1 “el texto es para leer…” ¿qué es la legibilidad? es el punto óptimo donde el ojo reconoce...
Post on 22-Jan-2016
225 Views
Preview:
TRANSCRIPT
1
“El texto es para leer…”
¿Qué es la Legibilidad?Es el punto óptimo donde el ojo reconoce los caracteres y puede leer un texto e interpretarlo de manera cómoda, rápida y sin esfuerzos.
Diseño Gráfico de la IU – EL TEXTO
2
Existen millones de familias tipográficas o fuentes, pero una forma simple de catalogarlas es en 3 grandes grupos:
• Con Serif
• Sin Serif
• Decorativas
Familias Tipográficas
Diseño Gráfico de la IU – EL TEXTO
3
• Familias Con SerifSon elegantes, tradicionales y remiten a lo antiguo.Excelente legibilidad en papel pero pobre en pantalla.
Familias Tipográficas
Diseño Gráfico de la IU – EL TEXTO
4
• Familias Sin SerifSon más modernas y actuales.Buena legibilidad en papel y excelente en pantalla.
Familias Tipográficas
Diseño Gráfico de la IU – EL TEXTO
5
• Familias DecorativasSon irregulares y se usan para títulos o textos cortos.Evitar el uso de estas familias en texto largos y/o tamaños chicos,son muy poco legibles.
Familias Tipográficas
Diseño Gráfico de la IU – EL TEXTO
6
Constituyen alfabetos alternativos dentro de la misma familia, que permiten obtener diferentes soluciones de color y ritmo de lectura, manteniendo un criterio de diseño que las emparenta entre sí.Existen 4 tipos de variables:
• Tamaño o Cuerpo • Tono • Inclinación• Proporción
Variables Tipográficas
Diseño Gráfico de la IU – EL TEXTO
7
• Tamaño o CuerpoGeneralmente se mide en puntos, pero también puede ser en
pixels.
Variables Tipográficas
Diseño Gráfico de la IU – EL TEXTO
8
• TonoCuanto más negrita o bold esla fuente, más anchas son lasastas de las letras.
Variables Tipográficas
Diseño Gráfico de la IU – EL TEXTO
9
• InclinaciónLas más común es la inclinaciónhacia la derecha que es laque conocemos como Itálica.
Variables Tipográficas
Diseño Gráfico de la IU – EL TEXTO
10
• ProporciónNo es muy aconsejable usaresta variable, ya que la tipografíatiende a deformarse y a perderlegibilidad cuando se abusa deeste recurso.
Variables Tipográficas
Diseño Gráfico de la IU – EL TEXTO
11
Tener en cuenta que el sentido de lectura nuestro es de
Izquierda a Derecha y de Arriba hacia Abajo.
Existen 5 formas de alinear un texto:
• A izquierda • A derecha • Centrado• Justificado• Asimétrico
Alinear el texto
Diseño Gráfico de la IU – EL TEXTO
12
El texto alineado a la izquierda es el más natural y recomendable para textos largos. Crea una letra y un espacio entre palabras muy uniforme y el lector es capaz de localizar fácilmente cada nueva línea.Esta es posiblemente la forma más legible.
Alinear el textoEl texto alineado a la derecha
dificulta el ritmo de lectura porque es difícil para el lector
encontrar la nueva línea.Se suele usar en epígrafes y
textos muy cortos
El texto justificado puede ser muy legible si el diseñador asegura que el espacio entre letras y palabras sea uniforme y los molestos huecos llamados ríos no interrumpan el curso del texto.
Las alineaciones centradas dan al texto
una apariencia muy formal y son adecuadas cuando se
usan en textos cortos. Pero debe evitarse configurar textos
demasiado largos con este modelo, ya que tiene el mismo problema de legibilidad que las
alineaciones a derecha.
Las alineaciones asimétricas se usan para romper el texto en unidades de pensamiento lógicas, o para dar a la página un aspecto más expresivo
Diseño Gráfico de la IU – EL TEXTO
13
Son tan IMPORTANTES como los espacios escritos!!
Espacios blancos
El espaciado entre letras, palabras y líneas tam-bién afecta al tipo y al color. Las palabras parecen de un tono más luminoso si las letras están más se-paradas. Del mismo modo, si se incrementa el es-paciado que hay entre palabras y líneas, el tipo parece adquirir un valor más brillante.Prestar atención a las necesidades de
espaciado, puede favorecer la legibilidad cuando el contraste de color es escaso o cuando debe imprimirse en color un gran fragmento textual.
Tengamos en cuenta que cuando estamos hablando sobre legibilidad nos debemos fijar en los factores que determinan el correcto espaciado entre letras (set) o palabras. Estos factores son el tipo utilizado, el cuerpo con el que trabajemos y el grosor de la letra. Un "set" uniforme nos proporciona una textura o color homogéneo del texto, lo cual también nos proporciona una mayor legibilidad.
Interlineado Interletrado
CalleSangría Espacio entre palabras
Margen
Diseño Gráfico de la IU – EL TEXTO
14
1.- Primer “axioma”...
El usuario NO LEE!!
Consejos útiles
El usuario escanea la pantalla con la vista.Por lo tanto, evitar textos muy largo en pantalla.
Posibles soluciones:a. Armar jerarquías de lectura con título, subtítulos, destacados
para guiar el ojo del usuario hacia lo más importanteb. Poner los primeros párrafos del texto y agregar un link al
texto completo en el formato que sea (html, pdf, doc, pop up, etc.)
Diseño Gráfico de la IU – EL TEXTO
15
CSS ZEN GARDENThe beauty of css designA demostration of what can be accomplished visually throught CSS based design.Select any style sheet from the list to load it into this page.The road to enlightenmentEnsuciando un camino oscuro y aburrido reposan las reliquias pasadas de selectores específicos para navegadores, DOMs incompatibles, y soporte incierto para CSS .Hoy, tenemos que limpiar la mente de prácticas pasadas. La claridad de la Web ha sido alcanzada gracias a los esfuerzos infatigables de gente como W3C, WaSP y los grandes creadores de los navegadores.El Jardín Zen css invita a usted a relajarse y meditar acerca de las lecciones importantes de los maestros. Comience a ver con claridad. Aprenda a usar (aun por ser) técnicas honradas por el tiempo en una nueva y vigorosa forma. Conviértase en uno con la Web.
Diseño Gráfico de la IU – EL TEXTO
16
Diseño Gráfico de la IU – EL TEXTO
17
Diseño Gráfico de la IU – EL TEXTO
18
2.- Para textos largos en pantalla preferir las Sin Serif y mejor si son del sistema (Trebuchet, Arial, Helvetica, Verdana, Tahoma)
Consejos útiles
Diseño Gráfico de la IU – EL TEXTO
19
Diseño Gráfico de la IU – EL TEXTO
20
3.- Equilibrar el interlineado con el tamaño de la fuente para lograr mayor legibilidad (Ej. Trebuchet 11ptos.)
Consejos útiles
Interlineado 11ptosEl espaciado entre letras, palabras y líneas también afecta al tipo y al color. Las palabras parecen de un tono más luminoso si las letras están más separadas. Del mismo modo, si se incrementa el espaciado que hay entre palabras y líneas, el tipo parece adquirir un valor más brillante.
Interlineado 15ptosEl espaciado entre letras, palabras y líneas también afecta al tipo y al color. Las palabras parecen de un tono más luminoso si las letras están más separadas. Del mismo modo, si se incrementa el espaciado que hay entre palabras y líneas, el tipo parece adquirir un valor más brillante.
Interlineado 18ptosEl espaciado entre letras, palabras y líneas
también afecta al tipo y al color. Las palabras
parecen de un tono más luminoso si las letras
están más separadas. Del mismo modo, si se
incrementa el espaciado que hay entre
palabras y líneas, el tipo parece adquirir un
valor más brillante.
Interlineado 22ptos
El espaciado entre letras, palabras y líneas
también afecta al tipo y al color. Las palabras
parecen de un tono más luminoso si las letras
están más separadas. Del mismo modo, si se
incrementa el espaciado que hay entre palabras
y líneas, el tipo parece adquirir un valor más
brillante.
Diseño Gráfico de la IU – EL TEXTO
21
Diseño Gráfico de la IU – EL TEXTO
22
4.- Equilibrar el ancho de las columnas justificadas con el tamaño de la fuente
Consejos útiles
El espaciado entre letras, palabras y líneas también afecta al tipo y al color. Las palabras parecen de un tono más luminoso si las letras están más separadas.
El espaciado entre letras, palabras y líneas también afecta al tipo y al color. Las palabras parecen de un tono más luminoso si las letras están más separadas.Del mismo modo, si se incrementa el espaciado que hay entre palabras y líneas, el tipo parece adquirir un valor más brillante.
El espaciado entre letras, palabras y líneas también afecta al tipo y al color. Las palabras parecen de un tono más luminoso si
las letras están más separadas. Del mismo modo, si se incrementa el espaciado que hay entre palabras y líneas, el tipo parece
adquirir un valor más brillante. Prestar atención a las necesidades de espaciado, puede favorecer la legibilidad cuando el
contraste de color es escaso o cuando debe imprimirse en color un gran fragmento textual.
Diseño Gráfico de la IU – EL TEXTO
23
Diseño Gráfico de la IU – EL TEXTO
24
5.- NUNCA!! escribir textos largos todo en mayúsculas
Consejos útiles
El espaciado entre letras, palabras y líneas
también afecta al tipo y al color. Las palabras parecen de un tono más luminoso si las letras están más separadas. Del mismo modo, si se incrementa el espaciado que hay entre palabras y líneas, el tipo parece adquirir un valor más brillante.Prestar atención a las necesidades de espaciado,
puede favorecer la legibilidad cuando el contraste de color es escaso o cuando debe imprimirse en color un gran fragmento textual.
EL ESPACIADO ENTRE LETRAS, PALABRAS Y
LÍNEAS TAMBIÉN AFECTA AL TIPO Y AL COLOR. LAS
PALABRAS PARECEN DE UN TONO MÁS LUMINOSO
SI LAS LETRAS ESTÁN MÁS SEPARADAS. DEL
MISMO MODO, SI SE INCREMENTA EL ESPACIADO
QUE HAY ENTRE PALABRAS Y LÍNEAS, EL TIPO
PARECE ADQUIRIR UN VALOR MÁS BRILLANTE.
PRESTAR ATENCIÓN A LAS NECESIDADES DE
ESPACIADO, PUEDE FAVORECER LA LEGIBILIDAD
CUANDO EL CONTRASTE DE COLOR ES ESCASO O
CUANDO DEBE IMPRIMIRSE EN COLOR UN GRAN
FRAGMENTO TEXTUAL.
Diseño Gráfico de la IU – EL TEXTO
25
6.- NO combinar más de 2 fuentes distintas enun mismo sitio.
Consejos útiles
• Usar siempre la misma tipografía le da al sitioun sentido de unidad
• Para lograr RITMO Jugar con las variables tipográficas, las mejores son:
• Tamaño• Tono (negrita, normal y light)
• El color
Diseño Gráfico de la IU – EL TEXTO
26
7.- Generar buen contraste entre texto y fondo para lograr mayor legibilidad.
Consejos útiles
• Los colores complementarios NO son una buena elección para texto y fondo porque generan una vibración molesta para el ojo que cansa mucho la vista
• No poner texto sobre texturas muy densas.Si se quiere poner un texto sobre una imagen, ubicarlo en zonas planas y de color uniforme.
Diseño Gráfico de la IU – EL TEXTO
27
Diseño Gráfico de la IU – EL TEXTO
28
Software para manejo de fuentes
Font Navigator
Diseño Gráfico de la IU – EL TEXTO
top related