tipografía y diseño web
description
Transcript of tipografía y diseño web
![Page 1: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/1.jpg)
TIPOGRAFIA & DISEÑO WEB
Diseño Web II!fundamentos!
![Page 2: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/2.jpg)
Diseño Web II!fundamentos!
El texto es la interfaz !!!
El texto es la interfaz !!!
![Page 3: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/3.jpg)
Diseño Web II!fundamentos!
El 95 % del diseño WEB es Tipografía
![Page 4: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/4.jpg)
Diseño Web II!fundamentos!
El diseño de información es Tipografía ?
![Page 5: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/5.jpg)
Diseño Web II!fundamentos!
Tipografía no es elegir las tipografias !!!
![Page 6: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/6.jpg)
Diseño Web II!fundamentos!
¿qué es la Tipografía ?
![Page 7: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/7.jpg)
Diseño Web II!fundamentos!
TIPOGRAFÍA = LETRAS = TEXTO
La tipografía ha sido un sistema de composición e impresión que tal y como lo creó
J. Gutenberg ha perdurado más de 500 años sin sufrir cambios sustanciales.
¿Qué significa tipografía? El término tipografía remite tanto al lugar donde se imprime, esto es la imprenta, como al arte de imprimir.
link
![Page 8: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/8.jpg)
La tipografía se ocupa de estructurar y organizar el lenguaje visualmente Phil Baines y Andrew Haslam (2002)
La tipografía también remite al diseño y creación de aquellos caracteres mínimos (signos grá!cos) con los que va a poder organizarse y estructurarse el mensaje visual.
un diseño para la ESCRITURA un diseño para la LECTURA.
Diseño Web II!fundamentos!
![Page 9: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/9.jpg)
Diseño Web II!fundamentos!
LEGIBILIDAD
Man
ual d
e Ti
pogr
afía
. Del
plo
mo
a la
era
dig
ital
José
Lui
s M
artín
Mon
tesi
nos
y M
onts
e M
as H
urtu
na.
Ed C
ampG
raph
ic
![Page 10: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/10.jpg)
Diseño Web II!fundamentos!
EXPRESIVIDAD
Man
ual d
e Ti
pogr
afía
. Del
plo
mo
a la
era
dig
ital
José
Lui
s M
artín
Mon
tesi
nos
y M
onts
e M
as H
urtu
na.
Ed C
ampG
raph
ic
![Page 11: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/11.jpg)
MACROTIPOGRAFÍA & MICROTIPOGRAFÍA
Diseño Web II!fundamentos!
![Page 12: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/12.jpg)
En el ámbito de la Microtipografía o tipografía del Detalle, las unidades conceptuales o conceptos tipográficos esenciales son:
La Letra y el espacio entre las letras;
la Palabra y el espacio entre las
palabras;
la Línea y el interlineado
El parrafo y la Columna (caja).
Microtipografía & Macrotipografía
Diseño Web II!fundamentos!
![Page 13: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/13.jpg)
Microtipografía & Macrotipografía Las correcciones aplicadas sobre la forma geométrica básica de las letras t iene como función compensar ilusiones ópticas que actúan sobre la forma y el tamaño de las letras y sobre el grosor de sus rasgos. En función de mantener una consistencia percibida de tamaño, por ejemplo, las letras de forma circular o triangular exceden en altura física a las demás letras.
Entre otras modificaciones puede indicarse que los trazos medios horizontales se colocan por encima de la mitad de la altura, para que el resultado sea de mayor liviandad. El grosor de los trazos varía con su d i recc ión: los ver t ica les , que visualmente representan sostén, son más gruesos que los horizontales; los horizontales medios son más finos que los extremos ubicados en tope o base; los diagonales son también más finos que los horizontales de los extremos. Los trazos verticales y diagonales se afinan al llegar a convergencias en función de evitar la creación de grandes áreas negras mientras que los trazos curvos varían constantemente de grosor y nunca son arcos de círculo, en función de manejar las fuerzas visuales de una manera menos mecánica, más fluida. Muchas de estas características aparecen ya en los alfabetos del siglo XVIII.
Palabra
Longitud de la línea en el párrafo
y calculo del interlineado correcto
e
Diseño Web II!fundamentos!
![Page 14: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/14.jpg)
Diseño Web II!fundamentos!
Today we are inundated with such an immense flood of printed matter that the value of the individual work has depreciated, for our harassed contemporaries simply cannot take everything that is printed today. It is the typographer’s task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him.
Emil Ruder: Typopgraphy (1967)
![Page 15: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/15.jpg)
Diseño Web II!fundamentos!
El diseño de información es Tipografía
Emil Ruder: Typopgraphy (1967)
![Page 16: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/16.jpg)
La Tipografía es el arte de disponer correctamente el material de imprimir, de acuerdo con un propósito específico: colocar las letras, repartir el espacio y organizar los tipos con vistas a prestar al lector la máxima ayuda para la comprensión del texto.
Stanley Morinson (1929)
Diseño Web II!fundamentos!
![Page 17: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/17.jpg)
LEGIBILIDAD
![Page 18: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/18.jpg)
TYPOGRAFÍA INVISIBLE ?
Diseño Web II!fundamentos!
![Page 19: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/19.jpg)
Diseño Web II!fundamentos!
![Page 20: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/20.jpg)
Toda recepción de escritura se realiza de dos modos simultáneos:
1º como lectura en el sentido propio de la palabra, o sea como transformación de una serie de letras vistas
por el lector en pensamientos
Jost Hochuli (1987)
2º como visión gráfica que desencadena una serie de asociaciones con lo ya visto, además de
generar efectos emocionales y apreciaciones estéticas.
Diseño Web II!fundamentos!
![Page 21: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/21.jpg)
Factor LINGÜÍSTICO vs
Factor GRÁFICO
Critter // Craig Frazier (1993 / Adobe)
Diseño Web II!fundamentos!
![Page 22: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/22.jpg)
Una de las principales funciones de la tipografía es la de actuar como soporte para
la comunicación.
La legibilidad de un texto, de una palabra o de un carácter está relacionada en cierta manera con la
“invisibilidad” de los signos gráficos que le dan presencia
![Page 23: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/23.jpg)
Cómo leemos una línea de texto, como opera el proceso de lectura!!!!!
![Page 24: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/24.jpg)
![Page 25: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/25.jpg)
LEGIBILIDAD Arquitectura tipografía
![Page 26: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/26.jpg)
![Page 27: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/27.jpg)
Elementos: Líneas de Referencia •! Cuerpo de texto:
La elección de una buena tipografía garantiza la correcta legibilidad de un texto. Prima Funcionalidad por encima de la expresividad estética. Son recomendables tipografías de palo seco o romanas, nunca manuscritas o decorativas.
![Page 28: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/28.jpg)
tipometría
![Page 29: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/29.jpg)
tipometría
Mac: 1px = 1pt 1pt (postscript)= 1/72 pulgadas Los Monitores MAC tienen una resolución de 72 DPI (Dots per Inch) // necesitamos PPM (pixel por EM) 12 pt en pantalla de 72 DPI : 12 pixel por EM 12 pt en una pantalla de 96 DPI (12X 96) / 72= 16 PPM
![Page 30: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/30.jpg)
![Page 31: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/31.jpg)
#box1 { font-size:16px; width:1em; height:1em; border:1px solid black } #box2 { font-size:60px; width:1em; height:1em; border:1px solid black }
M
M
![Page 32: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/32.jpg)
Elementos: Líneas de Referencia y ojo medio
![Page 33: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/33.jpg)
Elementos: Líneas de Referencia y ojo medio
![Page 34: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/34.jpg)
Elementos: Líneas de Referencia y ojo medio
![Page 35: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/35.jpg)
Elementos: ESTRUCTURAS BÁSICAS
Las variaciones en la estructura fundamental de los caracteres están determinadas:
(1) La ubicación respecto de las líneas de referencia
(2) La angulación del eje constructivo.
![Page 36: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/36.jpg)
![Page 37: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/37.jpg)
![Page 38: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/38.jpg)
![Page 39: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/39.jpg)
Elementos: ESTRUCTURAS BÁSICAS Ángulo eje constructivo: Oblicua & Cursiva
¿Cual es la diferencia entre unos caracteres cursivos y otros oblicuos?
![Page 40: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/40.jpg)
Elementos: ESTRUCTURAS BÁSICAS Ángulo eje constructivo: Oblicua & Cursiva
¿Cual es la diferencia entre unos caracteres cursivos y otros oblicuos?
![Page 41: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/41.jpg)
LA PALABRA Las palabras escritas forman unidades de significado
![Page 42: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/42.jpg)
Otro aspecto importante de la configuración de la PALABRA es su ritmo interior: El juego de blancos y la mancha tonal que se produce en la escritura.
LA PALABRA Las palabras escritas forman unidades de significado
![Page 43: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/43.jpg)
![Page 44: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/44.jpg)
http://type.method.ac/# http://shape.method.ac/
![Page 45: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/45.jpg)
Toda composición tipográfica regida por el principio de legibilidad
Las variables tipográficas más importantes: OJO MEDIO, LA MEDIDA DE LÍNEA, EL BLANCO ENTRE
PALABRAS & EL INTERLETRADO.
La función de toda composición tipográfica es lograr
configurar una representación de la escritura clara y
equilibrada
Existen 16 variables tipográficas de cuya interacción depende la legibilidad del texto
![Page 46: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/46.jpg)
VARIABLES TIPOGRAFICAS Factores que influyen sobre las ordenes de composición
1) Tamaño de la página, diseño, tema: Medida de línea, distancia de lectura, márgenes, distancia entre párrafos & números de estilos empleados
2) Tipo de letra: Ojo medio; grosor del trazo; modulación & contraste
3) Parámetros de composición: Blanco entre palabras; calidad de la partición de palabras; frecuencia de partición;Interlinea; cuerpo, sangrías;caja
Existen otras consideraciones generales que pueden influir en la elección tipográfica:
1.! La superficie del papel y su color
2.! Resolución de las Pantallas o dispositivos multimedia.
3.! Los hábitos de lectura del público
4.! La aplicación del contenido y la longitud media de las palabras que lo componen
![Page 47: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/47.jpg)
EL OJO MEDIO Se puede afirmar que se trata de la variable más determinante de todas
La interlínea y el ojo medio están directamente relacionados.
1.! Si el ojo medio es escaso la interlínea se puede reducir
o desaparecer. 2.! Reducir la interlínea con un carácter de ojo medio
elevado no es muy recomendable 3.! Un carácter con escaso ojo medio en un cuerpo
pequeño resultará “amenazante” en largos bloques de texto.
![Page 48: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/48.jpg)
![Page 49: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/49.jpg)
![Page 50: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/50.jpg)
LA LINEA Una línea es un conjunto de palabras que se apoyan sobre la misma línea base.
1.!La longitud de la línea 2.!La distancia entre palabras
La longitud de la línea puede producir fatiga en el lector y se pretende evitarlas dificultades para posicionarse en el inicio de la siguiente
línea.
![Page 51: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/51.jpg)
LA LINEA.
La longitud de la línea
El tipo de lectura o el contenido
¿Afecta a la longitud óptima de una línea?
![Page 52: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/52.jpg)
LA LINEA Una línea es un conjunto de palabras que se apoyan sobre la misma línea base.
La longitud adecuada de una línea depende de: 1.! El tipo de lectura que requiera el texto: consulta, periódico,
novela, estudio... 2.! El tamaño de la letra: a mayor tamaño, mayor longitud de
línea 3.! El número ideal de caracteres según el ancho de línea.
La longitud de la línea
![Page 53: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/53.jpg)
¿CÓMO AFECTA EL TAMAÑO DE LA TIPOGRAFÍA UTILIZADA ADECUADO LONGITUD DE UNA LÍNEA?
![Page 54: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/54.jpg)
Las líneas de entre 20 y 25 picas, resultan más apropiadas para libros, el número de caracteres que se considera óptimo en cada línea oscila entre 40 y 75 caracteres (65!!)
Una columna estrecha, entre 8 y 10 picas de ancho, ha de tener alrededor de 30-35 caracteres. .
Como regla general se considera que una línea de doce o trece palabras resulta óptima para lograr una lectura fluida y cómoda.
80 carácteres Web Content Accessibility Guidelines (WCAG) 2.0
![Page 55: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/55.jpg)
![Page 56: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/56.jpg)
LA LINEA: blanco entre palabras
![Page 57: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/57.jpg)
La tradición recomienda que el espaciado correcto entre las palabras será de 1/3
de cuadratín.
(2/3 del ancho de una “O”; el ancho del carácter “t”)
NORMA GENERAL: El espaciado entre palabras debe guardar
relación con los demás blancos del bloque de texto.
LA LINEA: blanco entre palabras
![Page 58: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/58.jpg)
1.! Cuanto mayor sea la longitud se recomienda un aumento del espaciado entre palabras.
2.! Un tipo con un ojo medio elevado y diseño amplio demanda un espaciado generoso.
3.! Cuanto mayor sea el interlineado mayor debe de ser el espaciado.
NORMA GENERAL:
El espaciado entre palabras debe guardar relación con los demás blancos del bloque de
texto.
LA LINEA: blanco entre palabras
![Page 59: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/59.jpg)
"Toda composición de texto debe llevar el espaciado entre palabras más estrecho que sea posible. Como regla general, el espacio utilizado debe ser del tamaño mediano o del grosor de una "i" del tamaño de tipo usado. Espaciados más amplios serán estrictamente evitados. Las palabras pueden ser partidas de forma discrecional con el fin de evitar un espaciado ancho, ya que partir las palabras es menos dañino para la apariencia de la página que disponer un espaciado ancho entre ellas".
Jan Tschichold (1948)
![Page 60: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/60.jpg)
![Page 61: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/61.jpg)
LA LINEA: blanco entre palabras LA LINEA: blanco entre palabras
![Page 62: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/62.jpg)
![Page 63: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/63.jpg)
Tamaño de los caracteres de la masa de texto 1.! Norma: 9 puntos (la distancia de lectura : El cuerpo x 3,5 en cm.)
En Pantallas la referencia es de 12-16px (14px)
![Page 64: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/64.jpg)
Tamaño de los caracteres de la masa texto
1.! Norma: 9 puntos (la distancia de lectura : El cuerpo x 3,5 en cm.)
En Pantallas la referencia es de 12-16px (14px)
2.! Se usan cuerpos mas pequeños: 1.! Los caracteres tienen un gran ojo medio.
2.! La medida de línea es estrechada la división de palabras
frecuente no es deseable
3.! El texto es material de consulta, catálogos,...
4.! Es importante conservar el espacio
5.! Se requiere una página más densa
![Page 65: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/65.jpg)
Tamaño de los caracteres de la masa texto
1.! Norma: 9 puntos (la distancia de lectura : El cuerpo x 3,5 en cm.)
En Pantallas la referencia es de 12-16px (14px)
2.! Se usan cuerpos mas grandes: 1.! Los lectores son ancianos y niños
2.! Las condiciones de lectura son deficientes
3.! Tipos condensado, negras o supernegras
4.! El carácter tiene mucho contraste
5.! El tamaño de página es mayor, necesita más distancia
![Page 66: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/66.jpg)
Se reduce el blanco entre palabras: 1.! Fuentes condensadas
2.! Muy poco espacio entre letras
3.! Interlineado negativo (titulares)
4.! Tipos con escaso ojo medio
5.! Un cuerpo grande
6.! Caracteres de palo seco
7.! Caracteres de caja alta y baja en lugar de mayúsculas.
LA LINEA: blanco entre palabras
![Page 67: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/67.jpg)
Se denomina interlineado a la zona no impresa entre dos líneas seguidas de texto impreso.
La medida de la línea En las líneas que exceden de una longitud considerada adecuada (10 a 12 palabras) es preciso aumentar el espacio entre ellas. (Compensar el riesgo de que las líneas se "doble”)
El tamaño del tipo Al mismo tiempo que se incremente el tamaño del tipo utilizado es razonable incrementar el interlineado proporcionalmente. (120%)
El ojo medio del tipo El ojo medio y la interlínea están estrechamente relacionados entre sí, ya que si el ojo medio es pequeño, la interlínea se debe reducir y en algunos casos desaparecer (VICEVERSA)
*Factores que determinan el interlineado
INTERLINEA: blanco entre Lineas
Se usa menos interlineado cuando:
El trazo es fino, el ojo medio escaso, longitud de línea es corta, se compone en versalitas o se leen pocas líneas a la vez.
![Page 68: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/68.jpg)
INTERLINEADO INTERLINEADOINTERLINEADO
![Page 69: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/69.jpg)
LA LINEA: blanco entre palabras LA LINEA: blanco entre palabras blanco entre palabras
![Page 70: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/70.jpg)
INTERLINEADO
![Page 71: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/71.jpg)
INTERLINEADO INTERLINEADO
http://24ways.org/2006/compose-to-a-vertical-rhythm
![Page 72: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/72.jpg)
INTERLINEADO INTERLINEADO
![Page 73: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/73.jpg)
Text (Css Box Model) Diseño Web II!
fundamentos!
![Page 74: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/74.jpg)
Text (Css Box Model) Diseño Web II!
fundamentos!
![Page 75: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/75.jpg)
Text (Css Box Model) Diseño Web II!
fundamentos!
![Page 76: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/76.jpg)
Text (Css Box Model) Diseño Web II!
fundamentos!
![Page 77: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/77.jpg)
Text (Css Box Model) Diseño Web II!
fundamentos!
![Page 78: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/78.jpg)
Text (Css Box Model) Diseño Web II!
fundamentos!
![Page 79: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/79.jpg)
INTERLINEADO
![Page 80: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/80.jpg)
B) COMPOSICIÓN NO JUSTIFICADA
1.! Composición centrada 2.! Composición en bandera por la izquierda 3.! Composición en bandera por la derecha
COMPOSICIÓN DE BLOQUES DE TEXTO Los bloques de texto pueden estar compuestos de diferentes maneras. Existen dos maneras generales de componer bloques de texto
A) COMPOSICIÓN JUSTIFICADA
![Page 81: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/81.jpg)
1.! PARTICIÓN DE PALABRAS 2.! TRACKING 3.! KERNING
COMPOSICIÓN JUSTIFICADA
![Page 82: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/82.jpg)
![Page 83: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/83.jpg)
![Page 84: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/84.jpg)
Parámetros de Justificación
1.! P
ARTI
CIÓN
DE
PALA
BRAS
2.!
TRA
CKIN
G
3.! K
ERNI
NG
![Page 85: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/85.jpg)
Parámetros de Justificación
1.! P
ARTI
CIÓN
DE
PALA
BRAS
2.!
TRA
CKIN
G
3.! K
ERNI
NG
![Page 86: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/86.jpg)
Parámetros de Justificación
1.! P
ARTI
CIÓN
DE
PALA
BRAS
2.!
TRA
CKIN
G
3.! K
ERNI
NG
![Page 87: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/87.jpg)
Parámetros de Justificación
1.! P
ARTI
CIÓN
DE
PALA
BRAS
2.! T
RACK
ING
3.!
KER
NING
![Page 88: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/88.jpg)
Parámetros de Justificación
Adobe Garamond 12pt16pt18pt
1.! P
ARTI
CIÓN
DE
PALA
BRAS
2.! T
RACK
ING
3.!
KER
NING
![Page 89: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/89.jpg)
Parámetros de Justificación
1.! P
ARTI
CIÓN
DE
PALA
BRAS
2.! T
RACK
ING
3.!
KER
NING
![Page 90: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/90.jpg)
1.! Composición centrada 2.! Composición en bandera por la izquierda 3.! Composición en bandera por la derecha
COMPOSICIÓN NO JUSTIFICADA
"Toda composición de texto debe llevar el espaciado entre palabras más estrecho que sea
posible. Como regla general, el espacio utilizado debe ser del tamaño mediano o del grosor de una "i" del tamaño de tipo usado. Espaciados más amplios serán estrictamente
evitados. Las palabras pueden ser partidas de forma discrecional con el fin de evitar un
espaciado ancho, ya que partir las palabras es menos dañino para la apariencia de la página
que disponer un espaciado ancho entre ellas".
"Toda composición de texto debe llevar el espaciado entre palabras más estrecho que sea posible. Como regla general, el espacio utilizado debe ser del tamaño mediano o del grosor de una "i" del tamaño de tipo usado. Espaciados más amplios serán estrictamente evitados. Las palabras pueden ser partidas de forma discrecional con el fin de evitar un espaciado ancho, ya que partir las palabras es menos dañino para la apariencia de la página que disponer un espaciado ancho entre ellas".
"Toda composición de texto debe llevar el espaciado entre palabras más estrecho que sea
posible. Como regla general, el espacio utilizado debe ser del tamaño mediano o del grosor de una "i" del tamaño de tipo usado. Espaciados más amplios serán estrictamente evitados. Las palabras pueden ser partidas de
forma discrecional con el fin de evitar un espaciado ancho, ya que partir las palabras es menos dañino para la apariencia de la página que disponer un espaciado ancho entre ellas".
![Page 91: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/91.jpg)
![Page 92: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/92.jpg)
Alessandro di Vecci 1600
![Page 93: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/93.jpg)
JAN TSCHICHOLD
![Page 94: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/94.jpg)
Recomendaciones básicas 1.! En la composición centrada es conveniente no
construir una forma de apariencia rectangular (para evitar la apariencia de un bloque de texto mal justificado)
2.! Un texto centrado de dos línea, se recomienda, que la primera líneas sea mayor que la segunda (aunque no menos del doble).
3.! Pero en general es fácil lograr un composición centrada variada y ópticamente equilibrada.
COMPOSICIÓN CENTRADA
![Page 95: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/95.jpg)
"La igualdad de la longitud de la línea no puede ser obtenida sin el sacrificio del espaciado regular y, tipográficamente hablando, éste es más importante que aquélla. El espaciado regular es una gran ayuda para la lectura; el lector no se ve molestado por las interrupciones y ralentización que conlleva un espaciado irregular del texto aunque este esté reducido al mínimo por una cuidadosa composición."
Eric Gill Essay on Typography de 1936
![Page 96: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/96.jpg)
Recomendaciones básicas para la composición en bandera:
1.-Espacios iguales entre palabras.
2.-Espacios iguales entre letras.
3.-No utilizar partición (sólo excepcionalmente).
4.-No se recomienda utilizar sangría de primera línea.
5.-Cuidado con la utilización de ciertas capitulares.
6.-No deben aparecer líneas demasiado similares.
7.-No debe haber líneas cada vez más cortas.
8.-No se deben repetir pares de líneas de igual medida.
9.-No deben quedar palabras sueltas aunque lleven punto seguido.
![Page 97: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/97.jpg)
![Page 98: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/98.jpg)
![Page 99: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/99.jpg)
"La igualdad de la longitud de la línea no puede ser obtenida sin el sacrificio del espaciado regular y,
tipográficamente hablando, éste es más importante que aquélla.
![Page 100: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/100.jpg)
"La igualdad de la longitud de la línea no puede ser obtenida sin el sacrificio del espaciado regular y, tipográficamente hablando, éste es más importante que aquélla.
"La igualdad de la longitud de la línea no puede ser obtenida sin el sacrificio del espaciado regular y, tipográficamente hablando, éste es más importante que aquélla.
![Page 101: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/101.jpg)
¿!? …
![Page 102: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/102.jpg)
TIPOS DIGITALES *
4 4
Diseño Web II!fundamentos!
![Page 103: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/103.jpg)
Porta-matrices Times New Roman
![Page 104: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/104.jpg)
Letra: código digital En la tipografía digital el tipo carece de una existencia física. El tipo es un conjunto de datos almacenados en la memoria de un ordenador
Diseño Web II!fundamentos!
![Page 105: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/105.jpg)
Diseño Web II!fundamentos!
![Page 106: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/106.jpg)
Los tipografías digitales son software
Los formatos de fuentes dominantes son: 1.!PostScript Type 1 (PS1) 1985 2.!TrueType (TT) 1991 3.!OpenType (OTF) 1997 4.!WEBFONTS (EOT & WOFF) (2010)
Multiplataforma
Trazados vectoriales de contorno (lineas y curvas)
Independientes del dispositivo de salida
Escalable a cualquier tamaño sin perdida de calidad
Diseño Web II!fundamentos!
![Page 107: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/107.jpg)
PostScript Type 1 (PS1) Diseño Web II!
fundamentos!
![Page 108: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/108.jpg)
PS1 en mac
Representación pixelada para su representación en pantalla
PS1 en WIN Helvetica.afm & Helvetica.pfb
Helvetica.afm Helvetica.ifm Helvetica.bmp
El formato TrueType solo necesita un archivo en
ambas plataformas
PostScript Type 1 (PS1) Diseño Web II!
fundamentos!
![Page 109: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/109.jpg)
RASTERIZAR: Es el proceso de convertir los vectores (las líneas y curvas) en el patrón de puntos de semitono del dispositivo de salida (impresora o filmadora)
Software de rasterización
Diseño Web II!fundamentos!
![Page 110: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/110.jpg)
Diseño Web II!fundamentos!
![Page 111: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/111.jpg)
HINTING: El «HINTING» es un conjunto de instrucciones que se incorporan a la fuente para mejorar la calidad de la imagen en el proceso de escalado, sobre todo para resoluciones de baja calidad (por ejemplo para la pantalla de ordenador).
TrueType dispone de unas instrucciones de hinting más complejas
Diseño Web II!fundamentos!
![Page 112: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/112.jpg)
Diseño Web II!fundamentos!
![Page 113: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/113.jpg)
Opentype (1997) trabaja con el codificado de caracteres estándar UNICODE 3.1, el cual está:
“diseñado para soportar el intercambio, la elaboración y la exhibición de textos escritos en todas las lenguas del mundo”.
Diseño Web II!fundamentos!
![Page 114: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/114.jpg)
Opentype (1997) trabaja con el codificado de caracteres estándar UNICODE 3.1, el cual está:
“diseñado para soportar el intercambio, la elaboración y la exhibición de textos escritos en todas las lenguas del mundo”.
Diseño Web II!fundamentos!
![Page 115: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/115.jpg)
Diseño Web II!fundamentos!
![Page 116: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/116.jpg)
Una fuente opentype se compone de 4 partes: 1.! La descripción de contorno 2.! Instrucciones de Hinting 3.! Tabla para la clasificación de caracteres/signo 4.! Posibilidades tipográficas de sustitución letras y
Glifos
Diseño Web II!fundamentos!
![Page 117: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/117.jpg)
Diseño Web II!fundamentos!
![Page 118: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/118.jpg)
![Page 119: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/119.jpg)
Diseño Web II!fundamentos!
![Page 120: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/120.jpg)
WEB FONTS !!!
Diseño Web II!fundamentos!
![Page 121: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/121.jpg)
SERVIDORES!
Diseño Web II!fundamentos!
![Page 122: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/122.jpg)
FONTFONT SUBSETTER
http://www.subsetter.com/ Diseño Web II!
fundamentos!
![Page 123: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/123.jpg)
TIPOGRAFIA EN PANTALLAS* LEGIBILIDAD EN PANTALLAS
HINTING
Diseño Web II!fundamentos!
![Page 124: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/124.jpg)
CONTEXTO EL HINTING UN SOLUCIÓN A UN PROBLEMA DE TIPOGRAFÍA DIGITAL! la tipo en la pantalla
![Page 125: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/125.jpg)
![Page 126: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/126.jpg)
Pixelación y Antialiaising
(1) Cleartype–2 / WINDOWS 98 (2) CORE FONT FOR WEB (3) QUARTZ TECH; MAC-OSX
![Page 127: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/127.jpg)
![Page 128: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/128.jpg)
Oakland: Zuzanna Licko // Video render test Mac 128K 1985 (LO-RES - Émigre, 2001)
![Page 129: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/129.jpg)
Oakland: Zuzanna Licko // Video render test Mac 128K 1985 (LO-RES - Émigre, 2001)
![Page 130: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/130.jpg)
FONTLAB
Matthew Carter
![Page 131: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/131.jpg)
FONTLAB
![Page 132: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/132.jpg)
FONTLAB
Verdana (1994)
(1) Cleartype–2 / WINDOWS 98 (2) CORE FONT FOR WEB (3) QUARTZ TECH; MAC-OSX
![Page 133: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/133.jpg)
FONTLAB
Verdana (1994), Georgia (1993) Tahoma (1997) Trebuchet (1996)
![Page 134: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/134.jpg)
Contorno Original de “Fedra Sans” (Peter BILAK), antes de la rasterisación
Versión con hinting para su adaptación a la rejilla de la pantalla a diferentes resoluciones
![Page 135: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/135.jpg)
Cada letra tiene que ser rediseñada, para optimizar la legibilidad en la pantalla
![Page 136: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/136.jpg)
![Page 137: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/137.jpg)
![Page 138: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/138.jpg)
¿PARA QUE NECESITAMOS EL HINTING?
TEXTO a 8- 9 puntos en pantallas de baja resolución (72-92 Dot Per Inch) o para impresiones de menos de 300 DPI.
HINTING ES IRRELEVANTE EN LA IMPRESIÓN COMERCIAL Inicialmente el hint surge de la necesidad mejorar la legibilidad de las tipos de entre 9-14 pt en las pantallas. Pero es clave para diferenciar en estas:
SERIF – SANS
REGULAR - BOLD
![Page 139: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/139.jpg)
El texto como interfaz
Diseño Web II!fundamentos!
![Page 140: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/140.jpg)
Diseño Web II!fundamentos!
El texto es la interfaz !!!
El 95 % del diseño WEB es Tipografía
![Page 141: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/141.jpg)
Diseño Web II!fundamentos!
http://www.subtraction.com/
![Page 142: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/142.jpg)
Diseño Web II!fundamentos!
Adolf Loos Loos, A. (1908). Ornament and Crime. Innsbruck.
RACIONALISMO
Forma = Función
Simplicidad
Austeridad
google, ebay, craigslist, youtube, flickr, Digg, reddit, delicious.
![Page 143: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/143.jpg)
Diseño Web II!fundamentos!
Tipografía no es elegir las tipografias !!!
¿Cómo elegimos las tipografías?
![Page 144: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/144.jpg)
Diseño Web II!fundamentos!
Elegir las tipografias:
Conoce tus fuentes!
Analiza las necesidades!
Elige el set tipográfico
Jerarquía & Contraste
![Page 145: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/145.jpg)
Diseño Web II!fundamentos!
![Page 146: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/146.jpg)
Diseño Web II!fundamentos!
![Page 147: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/147.jpg)
Diseño Web II!fundamentos!
![Page 148: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/148.jpg)
Diseño Web II!fundamentos!
![Page 149: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/149.jpg)
Diseño Web II!fundamentos!
![Page 150: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/150.jpg)
Diseño Web II!fundamentos!
http://www.fonttester.com/
Web safe fonts!
nativas
![Page 151: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/151.jpg)
Diseño Web II!fundamentos!
Solo un tipo!!!
![Page 152: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/152.jpg)
Diseño Web II!fundamentos!
No necesitamos más de dos familias…
Basta con una lo suficientemente versátil!!!
![Page 153: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/153.jpg)
Diseño Web II!fundamentos!
![Page 154: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/154.jpg)
Diseño Web II!fundamentos!
![Page 155: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/155.jpg)
Diseño Web II!fundamentos!
A que tamaño?
![Page 156: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/156.jpg)
Diseño Web II!fundamentos!
Color tipográfico
![Page 157: tipografía y diseño web](https://reader034.fdocument.pub/reader034/viewer/2022051413/553694154a7959a0138b4a2d/html5/thumbnails/157.jpg)
Diseño Web II!fundamentos!