Diseño Web II fundamentos
TIPOGRAFIA & DISEÑO WEB
Diseño Web II fundamentos
El texto es la interfaz !!!
Diseño Web II fundamentos
El 95 % del diseño WEB es Tipografía
Diseño Web II fundamentos
El diseño de información es
Tipografía ?
Diseño Web II fundamentos
Tipografía no es elegir las tipografias !!!
Diseño Web II fundamentos
¿qué es la Tipografía ?
Diseño Web II fundamentos
TIPOGRAFÍA = LETRAS = TEXTO TEXTO
¿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 .
La tipografía ha sido un sistema de composición e impresión que tal y como lo
Diseño Web II fundamentos
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
. a n u t l r a u t i H g s i d a M a r e e s a l t n a o M o m y o s l p o n l i e s e D t . a n í f o a r M c n i g í o t h p r i a p a T M r e s G d i p l u m a L a u é n s C a o d M J E
LEGIBILIDAD
Diseño Web II fundamentos
. a n u t l r a u t i H g s i d a M a r e e s a l t n a o M o m y o s l p o n l i e s e D t . a n í f o a r M c n i g í o t h p r i a p a T M r e s G d i p l u m a L a u é n s C a o d M J E
EXPRESIVIDAD
Diseño Web II fundamentos
MACROTIPOGRAFÍA & MICROTIPOGRAFÍA
Diseño Web II fundamentos
Microtipografía & Macrotipografía 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;
Diseño Web II fundamentos
Microtipografía & Macrotipografía
Longitud de la línea en el párrafo y calculo del interlineado correcto
e
Palabra
Las correcciones aplicadas sobre la forma geométrica básica de las letras tiene 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 dire cción: los v e rticale s , 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.
Diseño Web II fundamentos
Today we are inundated inundate d with such an immense immen se flood of printed of printed matter that matter that the value of the individual work has depreciated, for our harassed contemporaries simply cannot take everything that is printed today. today. It is the typographer’s typograph er’s task to divide up and organize and interpret this mass of printed of printed matter in matter in such a way that the reader will have a good chance of finding what is of interest to him.
Diseño Web II fundamentos
El diseño de información es
Tipografía
Diseño Web II fundamentos
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)
LEGIBILIDAD
Diseño Web II fundamentos
TYPOGRAFÍA INVISIBLE
?
Diseño Web II fundamentos
Diseño Web II fundamentos
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
Factor LINGÜÍSTICO vs Factor GRÁFICO
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
Cómo leemos una línea de texto, como opera el proceso de lectura
!! !
LEGIBILIDAD Arquitectura tipografía
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.
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)
tipometría
12 pt en pantalla de 72 DPI : 12 pixel por EM 12 pt en una pantalla de 96 DPI (12X 96) / 72= 16 PPM
#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
Elementos: Líneas de Referencia y ojo medio
Elementos: Líneas de Referencia y ojo medio
Elementos: Líneas de Referencia y ojo medio
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 constructivo..
Elementos: ESTRUCTURAS BÁSICAS Ángulo eje constructivo: Oblicua & Cursiva
¿Cual es la diferencia entre unos caracteres c aracteres cursivos y otros
Elementos: ESTRUCTURAS BÁSICAS Ángulo eje constructivo: Oblicua & Cursiva
¿Cual es la diferencia entre unos caracteres cursivos y otros oblicuos?
LA PALABRA Las palabras escritas forman unidades de significado
LA PALABRA
Las palabras escritas forman unidades de significado
Otro aspecto importante de la configuración de la PALABRA PALABRA es su ritmo interior: El juego de blancos y la mancha tonal que se produce en la escritura.
http://shape.method.ac/
http://type.method.ac/#
Toda composición tipográfica tipográfica regida por el principio de legibilidad La función de toda composición tipográfica es lograr configurar una representación de la escritura clara y equilibrada Las variables tipográficas más importantes: OJO MEDIO, LA MEDIDA DE LÍNEA, EL BLANCO ENTRE PALABRAS & EL INTERLETRADO.
Existen 16 variables tipográficas de cuya interacción depende la legibilidad del texto
VARIABLES TIPOGRAFICAS Factores que influyen sobre las ordenes de composición 1) Tamaño de la página, diseño, tema: Existen otras consideraciones generales que pueden influir en la Medida de línea, distancia de lectura, márgenes, distancia entre elección tipográfica: párrafos & números de estilos empleados
1. La superficie 2) Tipo de letra: del papel y su color Ojo medio; grosor trazo; modulación & contraste 2. Resolución de las del Pantallas o dispositivos multimedia. 3) Parámetros 3. Los hábitosdedecomposición: lectura del público
Blanco entre palabras; calidad de la partición de palabras; frecuencia 4. La aplicación del contenido y la longitud media de las palabras de partición;Interlinea; cuerpo, sangrías;caja
que lo componen
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 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
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.
LA LINEA. La longitud de la línea
El tipo de lectura o el contenido ¿Afecta a la longitud óptima de una línea?
LA LINEA Una línea es un conjunto de palabras que se apoyan sobre la misma línea base.
La longitud de la línea 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.
¿CÓMO AFECTA EL TAMAÑO DE LA TIPOGRAFÍA UTILIZADA ADECUADO LONGITUD DE UNA LÍNEA?
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.. . 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
LA LINEA: blanco entre palabras
LA LINEA: blanco entre palabras
NORMA GENERAL: El espaciado entre palabras debe guardar relación con los demás blancos del bloque de texto. 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 carácter “t”)
LA LINEA: blanco entre palabras
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
"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 pal abras es menos dañino para la apariencia de la página que disponer un espaciado ancho entre ellas". Jan Tschichold (1948)
LA LINEA: blanco entre palabras
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)
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
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
LA LINEA: blanco entre palabras
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.
*Fac Factore toress que que de deter erm minan el el int inte erlineado
INTERLINEA:
Se denomina interlineado a la zona no impresa entre dos líneas seguidas de texto impreso.
blanco entre Lineas
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) 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”)
Se usa menos interlineado cuando: El tamaño del tipo Altrazo mismo incremente el tamaño utilizado es se El estiempo fino, elque ojose medio escaso, longituddel detipo línea es corta, razonableen incrementar proporcionalmente. compone versalitaselointerlineado se leen pocas líneas a la vez. (120%)
INTERLINEADO
LA LINEA: blanco entre palabras
INTERLINEADO
INTERLINEADO
INTERLINEADO
Diseño Web II fundamentos
Text (Css Box Model)
Diseño Web II fundamentos
Text (Css Box Model)
Diseño Web II fundamentos
Text (Css Box Model)
Diseño Web II fundamentos
Text (Css Box Model)
Diseño Web II fundamentos
Text (Css Box Model)
Diseño Web II fundamentos
Text (Css Box Model)
INTERLINEADO
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 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 JUSTIFICADA 1. PARTICIÓN DE PALABRAS 2. TRACKING 3. KERNING
Parámetros de Justificación S A R B A L A P E D N Ó I C I G N G T I I K N R C N R A A R E P T K
Parámetros de Justificación S A R B A L A P E D N Ó I C I G N G T I I K N R C N R A A R E P T K
Parámetros de Justificación S A R B A L A P E D N Ó I C I G N G T I I K N R C N R A A R E P T K
Parámetros de Justificación
S A R B A L A P E D G I G N N N Ó I K I C I C N T A R R E A R P T K
Parámetros de Justificación Adobe Garamond 12pt 16pt 18pt S A R B A L A P E D G I G N N N Ó I K I C I C N T A R R E A R P T K
Parámetros de Justificación
S A R B A L A P E D G I G N N N Ó I K I C I C N T A R R E A R P T K
COMPOSICIÓN NO JUSTIFICADA 1. Composición centrada 2. Composición en bandera por la izquierda 3. Composición en bandera por la derecha "Toda "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 "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".
COMPOSICIÓN COMPOSICIÓ N CENTRADA Recomendaciones básicas Recomendaciones 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.
"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
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
"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.
"La igualdad de la longitud de la línea no puede ser obtenida sin el sacrificio sacr ificio del espaciado regular y, tipográficamente hablando, éste es más importante que aquélla.
¿? !
Diseño Web II fundamentos
TIPOS DIGITALES *
4
Diseño Web II fundamentos
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
Diseño Web II fundamentos
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) WOFF) (2010)
Multiplataforma Trazados vectoriales de contorno (lineas y curvas) Independientes del dispositivo de salida
Diseño Web II fundamentos
PostScrript Ty PostSc Type 1 (PS1) (PS1)
Diseño Web II
PostScrript Ty PostSc Type 1 (PS1) (PS1)
fundamentos
PS1 en WIN Helvetica.afm & Helvetica.pfb
PS1 en mac Helvetica.afm Helvetica.ifm Helvetica.bmp Representación pixelada para su representación en
El formato TrueType solo necesita un archivo en ambas plataformas
Diseño Web II fundamentos
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 rasterización ón
Diseño Web II fundamentos
Diseño Web II fundamentos
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 TrueType instrucciones de hinting más complejas
Diseño Web II fundamentos
Diseño Web II fundamentos
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
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
Diseño Web II fundamentos
Una fuente opentype se compone de 4 partes: 1. 2. 3. 4.
La descripción de contorno Instrucciones de Hinting Tabla para la clasificación de caracteres/signo Posibilidades tipográficas de sustitución letras y Glifos
Diseño Web II fundamentos
Diseño Web II fundamentos
Diseño Web II fundamentos
WEB FONTS !!!
Diseño Web II fundamentos
SERVIDORES
!
Diseño Web II
http://www.subsetter.com/
fundamentos
FONTFONT SUBSETTER
Diseño Web II fundamentos
TIPOGRAFIA EN PANTALLAS* LEGIBILIDAD EN PANT ANTALLAS ALLAS HINTING
CONTEXTO EL HINTING UN SOLUCIÓN A UN PROBLEMA DE TIPOGRAFÍA DIGITAL !
la tipo en la pantalla
Pixelación y Antialiaising (1) Cleartype–2 / WINDOWS 98 (2) CORE FONT FOR WEB (3) QUARTZ TECH; MAC-OSX
Matthew Carter
(1) Cleartype–2 / WINDOWS 98 (2) CORE FONT FOR WEB (3) QUARTZ TECH; MAC-OSX
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
¿PARA QUE NECESITAMOS EL HINTING? TEXTO a 8- 9 puntos en pantallas pantallas de baja resolución 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
Diseño Web II fundamentos
El te texto xto como interfaz
Diseño Web II fundamentos
El texto es la interfaz !!! El 95 % del diseño WEB es Tipografía
Diseño Web II fundamentos
http://www.subtraction.com/
Diseño Web II fundamentos
RACIONALISMO
Forma = Función Simplicidad Austeridad
google, ebay, craigslist, youtube, flickr, Digg, reddit, delicious.
Adolf Loos
Diseño Web II fundamentos
Tipografía no es elegir las tipografias !!!
¿Cómo elegimos las tipografías?
Diseño Web II fundamentos
Elegir las tipografias:
Conoce tus fuentes ! Analiza las necesidades ! Elige el set tipográfico Jerarquía & Contraste
Diseño Web II fundamentos
Diseño Web II fundamentos
Diseño Web II fundamentos
Diseño Web II fundamentos
Diseño Web II fundamentos
Diseño Web II fundamentos
Web safe fonts! nativas
Diseño Web II fundamentos
Solo un tipo!!!
Diseño Web II fundamentos
No necesitamos más de dos familias… Basta con una lo suficientemente suficienteme nte versátil!!!
Diseño Web II fundamentos
Diseño Web II fundamentos
Diseño Web II fundamentos
A que tamaño?
Diseño Web II fundamentos
Color tipográfico
Diseño Web II fundamentos