Uso de la tipografía en el diseño web

En el diseño de páginas web se consideran muchos componentes para transmitir información al usuario, desde imágenes y texto que son los más comunes, hasta vídeos y sonidos. La información puede ser accesible de forma más rápida gracias a una imagen, pero mediante texto se puede transmitir mayor cantidad de información y con una mayor profundidad. Por lo anterior es importante dedicar especial atención en el uso de la tipografía en el diseño web.

El aspecto más importante en la tipografía en el diseño web es la legibilidad, la cual se refiere a la facilidad que tiene el usuario para leer un texto. La legibilidad afecta en como el usuario visualiza la información, como la entiende y como la procesa. Una mala legibilidad puede ahuyentar a los usuarios o causar que no entiendan lo que están leyendo, mientras que una buena legibilidad los atrae y los alienta a continuar la lectura.

Elementos a considerar para una mayor legibilidad

ELEMENTOS DEL TEXTO

En cuanto a lo tipografía existen diversos elementos que deben ser considerados para que nuestro texto sea legible, como son los siguientes:

Espaciado entre letras.

Se refiere al espacio que existe entre dos letras consecutivas. Un valor muy pequeño da una sensación de que el texto se encuentra amontonado, mientras que un valor muy grande hace que el texto pierda legibilidad al tener las letras muy separadas entre sí.

Ancho de línea

Se refiere al espacio que existe entre dos líneas de texto consecutivas. Un valor muy pequeño da la sensación de que el texto está amontonado, mientras que un valor muy grande da la sensación de que cada línea dentro de un párrafo es parte de una idea diferente.

Longitud de la línea.

Se refiere a la cantidad de palabras que contiene cada línea. Un valor adecuado es aquel que permite al lector ir desde el final de una línea hasta el inicio de la siguiente de manera simple y natural.

Jerarquía.

Se refiere a la organización e importancia que se le da a los diferentes componentes de un texto, nos ayuda a identificar los encabezados, los títulos, los subtítulos y el cuerpo del texto. Para enfatizar la jerarquía se pueden utilizar diferentes colores y/o diferentes tamaños de fuente.

Consistencia.

Un concepto que está estrechamente ligado con la jerarquía. Es importante que cada elemento del texto coincida en formato con el resto de los elementos iguales, así todos los encabezados deben tener el mismo tamaño, color y tipo de letra; lo mismo aplica para los títulos, subtítulos y el cuerpo del texto.

ELEMENTOS WEB

Contraste.

Una página web debe tener un texto legible sin perder elementos de branding, por esto a veces se utiliza un fondo de cierto color o con imágenes. Es importante que exista un contraste adecuado entre el color de la letra y el fondo de la página web. Un mala combinación puede dificultar la lectura de un texto.

Implementación gráfica.

Los textos en la web en ocasiones necesitan elementos visuales que ayuden a dar soporte visual, ya sea para ejemplificar, para facilitar una explicación o volver mas amena la lectura. Es importante considerar la ubicación de las imágenes, el uso de bordes, la continuidad del texto, la separación entre texto e imagen, etc.

Uso de separadores.

Los separadores ayudan a dividir el texto en secciones de una forma clara y organizada, las formas más comunes de separadores son las líneas, cajas y bordes. Otra función de los separadores es delimitar el espacio ocupado por los diferentes elementos que componen la página web.

Espacios en blanco.

Los espacios en blanco son tan importantes como los espacios ocupados por texto o por una imagen. Nos ayudan a organizar y separar grandes contenidos de texto entre sí o imágenes para mejorar la legibilidad y se vuelve más fácil fluir a través del texto mientras se lee.

ERRORES MAS COMUNES

La tipografía es un elemento muy importante en el diseño de una página web, es por esto que se debe tener especial cuidado en como se maneja. Sin embargo, existen ciertos errores que se cometen frecuentemente al elegir la tipografía para un sitio web, los mas comunes son los siguientes:

• Elegir un tamaño ilegible. En este caso se puede caer en dos errores: tanto el elegir un tamaño de fuente muy pequeño que no se pueda leer, como elegir un tamaño muy grande que ocupe demasiado espacio.
• Combinación de fuentes. Idealmente se aconseja utilizar máximo tres fuentes diferentes a lo largo de un texto para diferenciar los elementos como encabezados, títulos, pie de imagen, etc. Un exceso en el uso de fuente se vuelve confuso para el usuario.
• Uso de mayúsculas. El uso de mayúsculas se debe restringir únicamente a los encabezados y títulos, así que se debe evitar utilizarlas innecesariamente en el cuerpo del texto.
• Exceso de colores. Al igual que con las fuentes, un máximo de 3 colores es suficiente para diferenciar los elementos en un texto. Un uso excesivo de colores vuelve difícil leer un texto (especialmente si no se utiliza un buen contraste), además de confundir al usuario.
• Falta de coherencia. Como se mencionó anteriormente, es importante considerar que todos los elementos de una misma categoría tengan el mismo formato de fuente para tener una mejor organización y dejar clara la jerarquía existente dentro del texto.

CONCLUSIÓN

El diseño de una página web considera muchos elementos para lograr que el usuario tenga la mejor experiencia posible mientras navega. La tipografía es solamente uno de tantos elementos que existen, pero es el más importante ya que el texto compone la mayor parte de una página web, especialmente para páginas como los blogs que se dedican a a compartir información de interés para los usuarios.

La tipografía se encuentra estrechamente ligada al diseño web responsivo, incluso es uno de sus elementos principales por lo que es importante considerar ambos en simultaneo al diseñar una página web.