La legibilidad en la web es uno de los factores más importantes a tener en cuenta a la hora de afrontar un proyecto de diseño de interfaz (ui-ux).

El contenido en internet se compone básicamente de texto e imágenes, por tanto, es clave mantener las buenas prácticas a la hora de elegir una tipografía y estructurar el texto de manera correcta  para transmitir la información de manera clara y concisa al usuario.

Estas son algunas de las recomendaciones a las que debes atender:

Elección tipográfica

Elige fuentes estándar reconocibles por todos los navegadores como las de Google Fonts, diseñadas y optimizadas para leer en pantalla y fáciles de implementar en la web mediante código HTML y CSS.

Las fuentes se alojan directamente en el servidor de Google para que nuestra web sea más ligera y se actualizan continuamente a su versión más reciente.

No uses más de dos familias diferentes y evita las de estilo decorativo en pro de las que tengan formas simples y limpias. Ten en cuenta la más apropiada según cada caso, ya sea para título, encabezado o cuerpo de texto.

Fuentes de Google

Tamaño de texto

Elige un tamaño de párrafo adecuado para cada dispositivo. Un texto demasiado pequeño hará que el lector se canse y pierda gran parte de la información. Pon un tamaño de letra lo bastante grande como para facilitar la lectura en cualquier pantalla y no te preocupes si se genera mucho scroll.

También es importante jerarquizar y dinamizar el contenido para una lectura más fluida, por tanto, deberías definir una guía de estilos de texto con los diferentes tamaños que quieras utilizar (h1, h2, p…)

Para definir estos tamaños de manera armoniosa se suele emplear una escala modular. Primero, elige la escala (por ejemplo la proporción áurea 1.618) y multiplícala por el tamaño de cuerpo de texto (por lo general 16px en desktop y 14px en mobile) para obtener los números secuenciales: 16px, 26px, 42px, 68px…

Tamaños de tipografía

Interlineado

El interlineado es otro de los aspectos importantes que ayudan a agilizar y facilitar la lectura.
Cuanto más pequeño es el texto, mayor interlineado debe tener, pero hay que buscar el equilibrio, no debe quedar ni muy separado ni muy junto.
Para ello, lo ideal es multiplicar el tamaño de letra x1,2 ó x1,5 según sea el párrafo más corto o más largo.

Interlineado

Longitud de línea

Las líneas largas entorpecen mucho la lectura y debemos intentar evitarlas. La medida ideal de un bloque de texto ronda los 60 caracteres por línea en desktop, y los 40 caracteres en mobile.

Longitud de línea

Justificación

Los textos centrados o con justificación completa generan irregularidad en párrafos largos, y además nuestra cultura occidental hace que leamos de izquierda a derecha, por lo que se considera la justificación a la izquierda la más adecuada en general.

Gracias a ésta, el ojo puede encontrar rápidamente dónde acaba una línea y empieza la siguiente facilitando así la lectura.

Texto justificado

Contraste

Tenemos que tener en cuenta tanto el contraste de la letra (los tipos light o regular suelen ser más legibles que los más pesados en bold) como el contraste que genera el propio párrafo con el fondo.

Hay que buscar un contraste medio alto entre texto y color de fondo para que se distingan perfectamente entre sí y sea agradable de leer sin causar fatiga al ojo. Además, el contraste es un factor especialmente importante cuando se diseña para dispositivos móviles debido a la posibilidad de deslumbramiento.

Contraste