Estilo tipográfico

Tipo de fuente

Un tipo de fuente accesible debería ser:

• Claro, sin ornamentos que puedan dificultar la comprensión.
• Con formas bien diferenciadas, para evitar la confusión entre caracteres parecidos.
• Con suficiente espacio entre caracteres.

Las fuentes comunes (Arial, Helvetica, Open Sans, Times New Roman, Verdana...) resultan más fáciles de leer porque son familiares para la mayoría de los usuarios.

Un tipo de fuente fácilmente legible no solo beneficia a las personas con baja visión o dificultades de lectura, sino que mejora la experiencia para todos los usuarios.

Tamaño de fuente

Utiliza unidades relativas (%, em o rem) para el tamaño de las fuentes. De esta manera el usuario puede cambiar el tamaño del texto en su navegador.

En el siguiente ejemplo se establece un tamaño para los encabezados de nivel uno de dos veces el tamaño del elemento raíz (normalmente 16 píxeles).

h1 {
  font-size: 2rem;
}

Interlineado

El interlineado se refiere a la separación vertical entre las líneas del texto.

El espacio recomendado es de 1.5 veces el tamaño del texto. No obstante, el valor óptimo puede variar según el tipo y tamaño de fuente utilizados. En el caso de encabezados, el interlineado tiene que ser menor que el del cuerpo de texto, para que la separación no sea demasiado grande.

En el siguiente ejemplo indicamos un interlineado de 1.5 veces el tamaño de fuente para todos los párrafos:

p {
  line-height: 1.5;
}

Longitud de línea

Utiliza una longitud de línea de entre 45 y 80 caracteres. Una longitud mayor puede ser un problema para algunos lectores a la hora de encontrar el inicio de la línea siguiente, y una longitud menor provoca saltos de línea demasiado frecuentes, dificultando la lectura.

Para limitar el ancho de página puedes utilizar la propiedad max-inline-size con unidades relativas (rem). Así, si el tamaño de la fuente cambia el ancho se ajustará proporcionalmente.

article {
  max-inline-size: 40rem;
}

Una alternativa es usar unidades de carácter (ch):

article {
  max-inline-size: 60ch;
}

Evita justificar el texto

El texto justificado introduce espacios variables entre palabras para estirar las líneas y alinearlas por ambos márgenes. Estos espacios de diferente tamaño pueden dificultar la lectura, especialmente si se utiliza alguna aplicación para ampliar el contenido de la pantalla.