“El texto es para leer…”

1. Diseño Gráfico de la IU – EL TEXTO “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. 1

2. Diseño Gráfico de la IU – EL TEXTO Familias Tipográficas Existen millones de familias tipográficas o fuentes, pero una forma simple de catalogarlas es en 3 grandes grupos: • Con Serif • Sin Serif • Decorativas 2

3. Diseño Gráfico de la IU – EL TEXTO Familias Tipográficas • Familias Con Serif Son elegantes, tradicionales y remiten a lo antiguo. Excelente legibilidad en papel pero pobre en pantalla. 3

4. Diseño Gráfico de la IU – EL TEXTO Familias Tipográficas • Familias Sin Serif Son más modernas y actuales. Buena legibilidad en papel y excelente en pantalla. 4

5. Diseño Gráfico de la IU – EL TEXTO Familias Tipográficas • Familias Decorativas Son 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. 5

6. Diseño Gráfico de la IU – EL TEXTO Variables Tipográficas 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 6

7. Diseño Gráfico de la IU – EL TEXTO Variables Tipográficas • Tamaño o Cuerpo Generalmente se mide en puntos, pero también puede ser en pixels. 7

8. Diseño Gráfico de la IU – EL TEXTO Variables Tipográficas • Tono Cuanto más negrita o bold es la fuente, más anchas son las astas de las letras. 8

9. Diseño Gráfico de la IU – EL TEXTO Variables Tipográficas • Inclinación Las más común es la inclinación hacia la derecha que es la que conocemos como Itálica. 9

10. Diseño Gráfico de la IU – EL TEXTO Variables Tipográficas • Proporción No es muy aconsejable usar esta variable, ya que la tipografía tiende a deformarse y a perder legibilidad cuando se abusa de este recurso. 10

11. Diseño Gráfico de la IU – EL TEXTO Alinear el texto 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 11

12. Diseño Gráfico de la IU – EL TEXTO Alinear el texto 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. El texto alineado a la derechadificulta 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 12

13. Sangría Calle Espacio entre palabras 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. Margen Interlineado Interletrado Diseño Gráfico de la IU – EL TEXTO Espacios blancos Son tan IMPORTANTES como los espacios escritos!! 13

14. Diseño Gráfico de la IU – EL TEXTO Consejos útiles 1.- Primer “axioma”... El usuario NO LEE!! El usuario escanea la pantalla con la vista. Por lo tanto, evitar textos muy largo en pantalla. Posibles soluciones: • Armar jerarquías de lectura con título, subtítulos, destacados para guiar el ojo del usuario hacia lo más importante • 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.) 14

15. Diseño Gráfico de la IU – EL TEXTO CSS ZEN GARDEN The beauty of css design A 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 enlightenment Ensuciando 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. 15

16. Diseño Gráfico de la IU – EL TEXTO 16

17. Diseño Gráfico de la IU – EL TEXTO 17

18. Diseño Gráfico de la IU – EL TEXTO Consejos útiles 2.- Para textos largos en pantalla preferir las Sin Serif y mejor si son del sistema (Trebuchet, Arial, Helvetica, Verdana, Tahoma) 18

19. Diseño Gráfico de la IU – EL TEXTO 19

20. Diseño Gráfico de la IU – EL TEXTO Consejos útiles 3.- Equilibrar el interlineado con el tamaño de la fuente para lograr mayor legibilidad (Ej. Trebuchet 11ptos.) Interlineado 11ptos 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. Interlineado 15ptos 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. Interlineado 18ptos 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. 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. 20

21. Diseño Gráfico de la IU – EL TEXTO 21

22. Diseño Gráfico de la IU – EL TEXTO Consejos útiles 4.- Equilibrar el ancho de las columnas justificadas con el tamaño de la fuente 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. 22

23. Diseño Gráfico de la IU – EL TEXTO 23

24. Diseño Gráfico de la IU – EL TEXTO Consejos útiles 5.- NUNCA!! escribir textos largos todo en mayúsculas 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. 24

25. Diseño Gráfico de la IU – EL TEXTO Consejos útiles 6.- NO combinar más de 2 fuentes distintas enun mismo sitio. • 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 25

26. Diseño Gráfico de la IU – EL TEXTO Consejos útiles 7.- Generar buen contraste entre texto y fondo para lograr mayor legibilidad. • Los colores complementariosNO 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. 26

27. Diseño Gráfico de la IU – EL TEXTO 27

28. Diseño Gráfico de la IU – EL TEXTO Software para manejo de fuentes Font Navigator 28