Tipografía

Tipo de letra

Utiliza un tipo de letra:

• Clara, 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.

Un tipo de letra fácilmente legible no solo ayuda a las personas con trastornos de la lectura, sino en general a 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.

El tamaño de fuente por defecto del navegador es de 16 píxeles. Es un tamaño adecuado, pero se puede mejorar la legibilidad aumentándolo a 18 o 20 píxeles.

En el ejemplo siguiente se establece un tamaño de fuente para toda la página de 1.125 veces el tamaño definido en el navegador.

html {
  font-size: 1.125rem;
}

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. Pero el valor óptimo depende del tipo y tamaño de letra. 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 letra 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-width con unidades relativas (rem). Así, si el tamaño de la letra cambia el ancho se ajustará proporcionalmente.

article {
  max-width: 40rem;
}

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

article {
  max-width: 60ch;
}

Tipografía adaptable

La forma clásica para cambiar el tamaño del texto en función del ancho de pantalla es usando media queries:

@media (min-width: 48rem) {
  html {
    font-size: 1.25rem;
  }
}

Una alternativa más avanzada para lograr un texto fluido es utilizar la función clamp:

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

Mediante esta función definimos un valor mínimo (1rem), un valor variable (0.75rem + 1.5vw) y un valor máximo (2rem).

Comprobación

Comprueba que la tipografía cumple los siguientes requisitos:

• El tipo de letra y el tamaño utilizado es fácilmente legible.
• Utiliza unidades relativas (em, rem, %).
• Existe suficiente espacio entre líneas.
• La longitud de línea no supera los 80 caracteres.
• El texto se puede aumentar de tamaño hasta un 200 % sin problema.