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