18
Feb 2014

Tipografía web:
facilitar la lectura de contenido.

El principal motivo de ser de una tipografía es ser leída, por lo cual además de seleccionar la adecuada para ello, debemos definir una estructura que facilite el proceso de lectura. En temas anteriores hemos hablado de cómo el cerebro percibe la información y esta es interpretada como un todo; ahora toca turno de emplear esos principios para faciliar la lectura de nuestro contenido.

¿Cómo leemos?

Al igual que con la percepción de formas, en el proceso de lectura el cerebro no interpreta cada letra de forma independiente, sino que la considera como parte de un conjunto. Nuestra vista realiza un escaneo de las líneas de texto y de manera inconsciente nuestro campo visual identifica no solo las letras en las que nuestros ojos estan centrados (visión central), sino los que estan a ambos extremos (visión periférica) .

vision2

Como ejemplo, si posamos nuestra mirada en las palabras “veinte años” de la imagen anterior, podemos apreciar claramente el funcionamiento de la visión periférica. Aunque nuestra vista este centrada en las palabras, también comenzamos a procesar las palabras que estan al rededor, en fracciones de segundo nuestro cerebro distingue formas y posteriormente las palabras toman sentido en la mente.

Al leer, nuestra visión periférica funciona tanto horizontalmente como verticalmente. Usar fuentes legibles ayuda a hacer este proceso más ágil. Mientras más fácil sea identificar las formas de las letras, la velocidad con la que se procesa la información es mayor, recordemos, la selección de una fuente no solo es una cuestión estética.

El ritmo en la lectura

Otro elemento importante para ayudar a mejorar el proceso de lectura es que, por medio del diseño, nuestro contenido tenga ritmo; es decir, que exista consistencia en el uso de fuentes, tamaños, espacios y colores. Si nuestro contenido no posee un formato adecuado, visualmente será cansado e incómodo para el lector procesar la información.

estructura

Como podemos apreciar a pesar de tratarse del mismo contenido, el ejemplo de la izquierda al carecer de orden y diferenciación entre los elementos, da una sensación de incomodidad y quizás no se tenga interes en leer la información. Por el contrario, información ordenada y con elementos identificables, permite que de un simple vistazo el lector pueda procesar la información relevante.

La repetición de ciertos estilos, permite que nuestra visión se esfuerce menos por identificar palabras. Además, la definición de una jerarquía nos permite dar sentido estructural al texto, ayudando a diferenciar cada elemento que forma parte del conjunto de información.

Tamaño

El tamaño del texto es importante para que  nuestra tipografía sea legible. Al leer, el tamaño del texto influye  considerablemente,  letras muy pequeñas afectan  el reconocimiento de caracteres,por lo cual el lector debe reducir su velocidad para poder identificar letras o palabras. Mientras que texto muy grande afecta el ritmo horizontal del contenido, ya que se identifican pocas palabras por línea haciendo la lectura un proceso innecesariamente lento.
tamano

Digitalmente, se recomiendan tamaños entre los 14 y 16 píxeles. Ya que son dimensiones que permiten identificar claramente letras individualmente y con un ritmo cómodo. Aunque recientemente, debido a el incremento de uso de dispositivos móviles, la tendencia por usar fuentes entre los 18 y 22 píxeles se empieza a propagar, un ejemplo de esto es el sitio Medium, pueden aprovechar y ver la navegación entre publicaciones, poco común y creativa.

Longitud de línea

El tamaño de las líneas de texto quizás sea la propiedad que más influye en el ritmo, ya que de ella depende la velocidad con la que nuestra visión periférica reconoce palabras vertical y horizontalmente.

Si la longitud de la línea es muy grande, el esfuerzo al leer de nuestro campo visual es más cansado, ya que la vista tiene que recorrer toda la línea para identificar caracteres y posteriormente regresar al inicio y continuar nuevamente. Lo idea es que el texto nos permita escanear la información tanto horizontal y vertical simultáneamente.

Si la longitud de la línea es muy corta, la lectura se torna vertical por lo cual la visión periférica horizontal pierde utilidad afectando el ritmo de lectura. Este tipo de líneas solo son recomendadas para encabezados o listas. Consideremos la imagen siguiente, y piensen en el seguimiento que tiene que hacer nuestra visión en cada línea, en el primer párrafo de ejemplo contamos con líneas de más de 90 caracteres y en el segundo con líneas no mayores a 60.

longitud

La longitud recomendada para textos en digital se encuentra entre los 75 a 85 caracteres ó de 15 a 20 palabras dependiendo del tamaño de nuestra fuente. Se considera que longitudes fuera de ese rango, afectan el ritmo de lectura.

Interlineado

El espacio entre cada línea de texto permite que nuestro contenido tenga continuidad visual. Un interlineado pequeño hace que nuestro contenido se vea muy “apretado”, dificultando la lectura por afectar el ritmo vertical, mientras que un interlineado grande hace que cada línea de texto parezca independiente, por lo cual no hay unidad entre el contenido, además la visión periférica vertical se ve afectada por la distancia entre cada línea.

interlineado

 

En estos casos un interlineado ideal se considera un espacio 150% mayor al tamaño de nuestra fuente, por ejemplo, un tamaño de 14 pixeles debe contar con un interlineado de 21 pixeles. Aunque esta proporción puede variar con respecto a la altura de la tipografía, letras con una altura menor pueden usar una proporción del 165%. y letras con gran altura un proporción de 135%.

Alineación

La alineación ayuda a que nuestro contenido tenga forma y hace notable la repetición de estilos. Los fragmentos de texto con forma ayudan a la estética de la información haciendo má fácil la lectura. La alineación también influye en el ritmo de lectura pues define el punto de partida cuando se realiza un escaneo de información.

Se recomienda usar alineación del texto a la izquierda o justificado, ya que en ambos el inicio de cada línea de texto es en el mismo punto. Y por el contrario alineaciones a la derecha o centradas dificultan el ritmo de la lectura ya que los inicios de cada línea varían.
alineacion

Color/Contraste

Finalmente nuestra selección de colores entre el texto y fondo, permite que el reconocimiento de caracteres sea más sencillo. Se debe  evitar el contraste de texto blanco con fondos negros, los textos brillantes dificultan el reconocimiento de la forma de letras y palabras. Es mejor utilizar tonos grises que reduzcan el contraste.

Recordemos que en medios digitales, el brillo de las pantallas de los dispositivos varía, por lo cual contrastes entre tonos blancos y negros no son recomendables debido a que la exposición a períodos prolongados son cansados para la vista por el esfuerzo que implica el reconocimiento de formas.

Por otra parte, los colores nos permiten distinguir los diversos tipos de elementos que componen el contenido, un sistema de colores definidos permite que el reconocimiento de información relevante sea más rápido, brindando la información necesaria sin necesidad de leer el texto por completo.

Hay que tener en cuenta que lo anterior no son reglas establecidas, sino recomendaciones que ayudan a facilitar la manera en que se lee, tomando como referencia la manera en que nuestro campo visual interactúa con las letras. Lo importante es hacer que nuestro contenido no sea cansado para los lectores, que a primera vista se vea ordenado y que cumpla con el objetivo de informar adecuadamente.

Por: Arturo Tadeo / Diseño web

2 Comentarios a Tipografía web:
facilitar la lectura de contenido.

  1. Que tal soy estudiante de diseño gráfico y estoy realizando un estudio sobre este tema y me gustaría saber si hay forma de hablar con el autor del articulo para saber sus fuentes o sus referentes y poder estudiar mas a fondo este tema

  2. Arturo Tadeo says:

    Hola Julian, el libro que se uso para referencia en este artículo es “Typographic web design” de Laura Franz de la editorial WILEY. Este libro se consiguio comprandolo en línea, así que no se que tan fácil sea conseguirlo en librerias.

Deja un comentario

DOTTO