Legibilidad Lingüística y Formal en la Tipografía

Cuando se hace uso de la tipografía en la web, existen multitud de cosas a tener en cuenta para crear una página que proporcione un acceso claro al contenido y lo presente de una forma legible. Típicamente esto puede ser desglosado en dos grandes bloques: Legibilidad lingüística y Legibilidad formal. La legibilidad lingüística hace referencia a la forma en la que están ordenadas las palabras y los bloques tipográficos en la página. La legibilidad formal hace referencia a la forma en la que está diseñada una tipografía y a la medida en la que un carácter individual puede diferenciarse de otro. En este artículo voy a hablar un poco de ambas, sugiriendo algunas técnicas concretas que para mejorar tu tipografía.

Legibilidad Formal

Hablemos primero de la legibilidad tipográfica formal. Es importante entender qué hace que una tipografía sea más legible que otra. Cuando eliges una tipografía, todo depende del uso que le vayas a dar. Hazte algunas preguntas básicas: ¿Qué tamaño de texto voy a usar? ¿Aparecerá el cuerpo del texto o la usarás para los titulares? ¿Tiene que ser

También es importante recordar que distintas tipografías están diseñadas para distintos usos. Por ejemplo, la Garamond original fue diseñada para maximizar la legibilidad cuando era impresa en un cuerpo de texto largo. Algunos también dicen que era la tipografía más “eco-friendly” de su tiempo, ahorrando el gasto de tinta. Bell Centennial es una tipografía comisionada por AT&T en 1970’s, diseñada para usarse en los directorios telefónicos. Estos directorios estaban hechos de papel barato y por este motivo Bell Centennial se diseñó de tal forma que se adaptase a la expansión de la tinta durante el proceso de impresión. En el lado digital, existen fuentes que han sido diseñadas específicamente para pantallas, por ejemplo la Georgia y la Verdana. Azura es un fuente relativamente reciente diseñada para la lectura de texto en pantalla.

Dicho en pocas palabras, es muy útil conocer la función y el contexto final que tendrá la tipografía que estés considerando usar. Algunas fuentes son muy flexibles, incluyen distintos grosores y familias, y pueden usarse de diferentes formas. Otras son más restrictivas, diseñadas para usos muy concretos.

Esto nos lleva a uno de los primeros aspectos a considerar en lo que respecta a la legibilidad de una tipografía:

Tipografías para Titulares y Tipografías para el Cuerpo del Texto

Algunas tipografías fueron diseñadas para usarse a un gran tamaño, como es el caso de los titulares. Estas tipografías son normalmente menos legibles a tamaños pequeños y no se deberían usar para el cuerpo del texto. A estas tipografías se les suele llamar fuentes para titulares o decorativas. La fuente del ejemplo de abajo, knockout, es una de mis fuentes favoritas para titulares.

Otras tipografías están diseñadas para usarse específicamente en amplias áreas del cuerpo de texto y con tamaños más pequeños. A estas se les suele llamar fuentes de texto o fuentes para el cuerpo del texto.

Existen muchas variaciones entre estos dos puntos. Lo que yo hago normalmente es encontrar una fuente que crea que será adecuada para la tarea, recordando que tengo que emparejarla con otra, y hacer algunas pruebas. Ya he filtrado todas las fuentes que no creo que sean apropiadas para mi tarea objetiva, pero si acabas de empezar, quizá tengas que hacer algunas pruebas por ti mismo.

Serif y Sans Serif

Entonces, qué tipografía es más legible, ¿la serif o la sans serif? La historia nos indica que las tipografía serif siempre se han considerado más legibles, ya que casi siempre se han usado para la impresión de largos pasajes de texto. Las tipografías serif permiten que nuestra vista siga más fácilmente el flujo del texto, mejorando la velocidad de lectura y reduciendo la fatiga visual.

Dicho esto, existen muchas tipografías sans-serif legibles. En el ámbito online muchas tipografías sans-serif se emplean con más frecuencia para el cuerpo del texto. Creo que hay varios motivos para esto. Las tipografías más simples parecen funcionar mejor con las actuales tendencias de diseño y tienen un aspecto más moderno. Además, normalmente no solemos leer largos pasajes en los sitios web, así que una fuente sans-serif puede funcionar bien en fragmentos de texto más cortos.

Deberíamos mencionar que hay un pequeño debate al respecto, hay un punto de vista que opina que las fuentes serif no funcionan bien a pequeños tamaños en la pantalla, principalmente porque disminuye la legibilidad. Otros creen que no existe ninguna diferencia. Mi postura es la siguiente, ¿tiene buen aspecto? ¿funciona bien en el contexto? ¿Leería una sección con este tipo de diseño?

Altura x

Otra característica que debemos observar es la altura x. Normalmente este concepto se emplea cuando hablamos del tamaño de las tipografías en los cuerpos de texto. La altura x es, bueno, la medida de la altura de la “x” minúscula de una tipografía dada. No tiene en cuenta la altura de los ascendentes ni las descendentes. Te sorprendería descubrir las diferencias que se dan en esta altura de una tipografía a otra. Normalmente cuando usamos tamaños de fuente pequeños, las tipografías con alturas x altas suelen resultar más legibles.

Legibilidad Lingüística

La legibilidad lingüística trata de organizar las palabras y los grupos de palabras que forman las frases y los párrafos (número de palabras por frase, número de palabras por línea, etc.), de modo que permita a los lectores acceder y seguir mejor flujo de texto y el contenido para que sea fácilmente comprensible. Se trata verdaderamente de una forma de arte que ha sido perfeccionada a lo largo del tiempo conforme se han ido encontrando las óptimas combinaciones o soluciones.

Según mi experiencia este suele ser uno de los conceptos más difíciles de asimilar para los desarrolladores o diseñadores “novatos”. Incluso a los diseñadores experimentados les cuesta en ocasiones determinar cuál es la mejor forma de organizar la tipografía en un diseño o en una página. Ahora que estos dos conceptos han empezado a emerger también en el diseño web, es importante es importante empezar a asimilar el concepto de legibilidad lingüística. Aquí tienes algunas cosas que debes recordar:

Espaciado/Altura de línea

Uno de los “errores” tipográficos que veo con más frecuencia actualmente en el diseño web es el uso inapropiado del espaciado tipográfico. A lo que me estoy refiriendo aquí es a las situaciones en las que a un bloque de texto no se le asigna suficiente margen, subtítulos y sus cuerpos de texto que no están debidamente agrupados en el sentido visual, y aspectos similares. El espaciado adecuado, combinado con la jerarquía) permite a los lectores escanear adecuadamente el texto y acceder a él en los puntos deseados (por ej. Saltar de una línea a la siguiente sin confusión).

No es una regla rígida ni de rápida aplicación, pero parece que la relación entre el espaciado de un párrafo (el espacio adicional añadido antes o después de un párrafo), el espacio alrededor de un bloque tipográfico, y el espacio entre las palabras está relacionado en proporción al interlineado de un párrafo. El interlineado o la altura de línea viene definida como la distancia vertical entre dos líneas de texto. De manera que, si la altura de línea de un párrafo es igual a 2em y un párrafo con el mismo tamaño de texto tiene una altura de línea igual a 1.5em, el primer párrafo necesitará más espacio entre párrafos y probablemente más margen alrededor.

Casi todo esto se ajusta a ojo, más que con fórmulas exactas, pero yo suelo usar una norma general en lo que respecta a la relación entre el espacio entre párrafos y la altura de línea o interlineado. Normalmente establezco el espacio entre párrafos (que en el diseño web se traduciría en “margin” o “padding” por encima o por debajo del párrafo) a una medida igual aproximadamente a la mitad del interlineado de dichos párrafos. Esto suele mantener los pasajes de texto “unidos” en lugar de usar el rudo salto de línea entre cada párrafo, creando una excesiva cantidad de espacio entre ellos.

Tamaño de la fuente

Obviamente, tienes que tener cuidado para asegurarte de que el texto no se presente en un tamaño excesivamente pequeño. También es importante recordar que la edad de tu público puede variar, en consecuencia la calidad de su visión. Generalmente, es aconsejable que el tamaño este entre los 13px o .813em como mínimo.  Actualmente, con la amplia adopción del diseño web responsive, hay una tendencia a usar tamaños de letra mayores para el cuerpo de los textos. En el diseño web responsivo también es importante recordar que lo lógico sería usar distintos tamaños de texto para distintos dispositivos. Por ejemplo, tendría sentido aumentar el tamaño en los cuerpos de texto para los dispositivos móviles en oposición a lo que haríamos para las pantallas más anchas de los ordenadores de sobremesa.

Medida de línea

Otra práctica común que obstaculiza la comprensión de los textos es permitir que la longitud de las líneas horizontales de una página sea excesiva. A esta longitud se le denomina medida de línea, en ocasiones también longitud de línea. Si una línea tipográfica es excesivamente larga se torna tediosa para el lector y a este le resulta complicado volver al lado izquierdo del bloque de texto e identificar la línea en la que continuar la lectura. También resulta intimidante ver un bloque de texto organizado de esta manera y es posible que algunos lectores ni siquiera lo intenten.

Entonces ¿cuál es la anchura máxima que debería tener un bloque de texto? Bueno, todo depende del tamaño del texto. Cuanto más largo sea, más larga podrá ser la línea, como hemos mencionado en casos anteriores, todo depende de las proporciones. En mi opinión, generalmente la longitud máxima de línea debería estar limitada unos 70 caracteres aproximadamente. De media, para el cuerpo de texto intentaría mantenerme dentro de un margen de 45ems.

Interletraje o tracking

El espacio entre letras o interletraje, también conocido como “tracking”, es el incremento o disminución consistente de la distancia entre los caracteres de una palabra o de un bloque de texto. No debe confundirse con el kerning, éste último hace referencia a los ajustes de distancia entre un par de caracteres individuales. El interletraje puede usarse para ajustar la densidad de un bloque de texto, de un titular o de un subtitular.

Obviamente, el interletraje afecta a la legibilidad del texto. Su exceso o defecto compromete la legibilidad. No obstante, según mi punto de vista, en ocasiones es necesario aumentar el interletraje. Como puedes ver en la ilustración de abajo, prefiero añadir un generoso espacio extra a los titulares y subtitulares o en las frases en las que todo el texto va en mayúsculas o versalitas. Creo que el texto en mayúsculas es más legible cuando los caracteres tienen un espacio extra adicional. Además, dependiendo de la tipografía en uso, me gusta aumentar un poco el interletraje en el texto del cuerpo de las páginas.

Contraste

Podría parecer obvio que un buen contraste tipográfico es esencial para la legibilidad. El caso es que los diseñadores, yo mismo incluído, estamos expandiendo continuamente los límites del contraste. Quizá deseamos que cierta sección de texto sea menos prominente, o crear “capas” de jerarquía en nuestro diseño. Sea como sea, recuerda que el contraste en pantalla, especialmente cuando hablamos de pantallas pequeñas, las formas finas del cuerpo del texto varían bastante de una pantalla a otra. Por este motivo es mejor errar por un poco de exceso en lo que respecta al contraste.

Jerarquía

Como ya he explicado a lo largo de esta serie, la jerarquía juega un papel primordial en la legibilidad del contenido. Una óptima jerarquía organiza el contenido en fragmentos digestibles y comprensibles que permiten al lector un mejor escaneo y acceso a los textos.

Reflexiona sobre la aplicación de estos conceptos de legibilidad tipográfica y lingüística en tus proyectos. Cuanto más lo pongas en práctica, mejores serán tus habilidades.