Tipografía

El tipo de letra y el estilo del texto es fundamental a la hora de facilitar la lectura.

Tipo de letra

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.

Se recomienda utilizar 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 (por ejemplo l y 1).
  • Con suficiente espacio entre caracteres.
  • Que incluya todos los caracteres y estilos necesarios del idioma que va a utilizarse (por ejemplo, ñ y tilde en el caso del español).

Tamaño de letra

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

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. Si el tamaño de fuente del navegador son 16px, entonces equivale a 18px.

CSS
html {
    font-size: 1.125rem;
}

El texto se debe poder aumentar de tamaño hasta un 200 % sin pérdida de contenido o funcionalidad.

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 de fuente.

CSS
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.

CSS
article {
    max-width: 40rem;
}

Texto oculto

En algunas ocasiones queremos que un texto no sea visible pero que sea anunciado por los lectores de pantalla.

Para ocultar un texto visualmente podemos usar la propiedad clip.

CSS
.sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

Y si queremos que el texto oculto sea visible al enfocarlo, como en el caso de un enlace para saltar la navegación, podemos añadir los siguientes estilos:

CSS
.sr-only-focusable:focus {
    clip: auto;
    height: auto;
    overflow: visible;
    position: static;
    width: auto;
}

Criterios de conformidad WCAG 2.1