Tipografía

Tipo de letra

Un tipo de letra 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…) son más fáciles de leer debido a que son más conocidas.

Un tipo de letra fácilmente legible no sólo ayuda a las personas con problemas de visión o 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.

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. 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-inline-size con unidades relativas (rem). Así, si el tamaño de la letra 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 crea espacios entre palabras para estirar las líneas y ajustarlas a izquierda y derecha. Estos espacios de diferente tamaño pueden dificultar la lectura, especialmente si se utiliza alguna aplicación para ampliar el contenido de la pantalla.

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, un valor variable y un valor máximo.