Saltar al contenido principal

Estilo del texto

El texto de un sitio web debe ser claramente legible. Esto facilita la lectura a todos los usuarios y especialmente a los afectados por dislexia.

Tipografía

Utiliza una fuente clara y que no produzca confusión entre caracteres parecidos (por ejemplo: 1, i y l).

Usa preferentemente tipos de letra sans-serif (Arial, Helvetica,…).

Nota: Existe un tipo de fuente diseñada específicamente para los usuarios con dislexia llamada dyslexie font.

Tamaño de fuente

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

Ejemplo: Tamaño de fuente con unidades rem.

CSS
html {
    font-size: 1.125rem;
}

h1 {
    font-size: 2rem;
}

En el ejemplo anterior 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. Para h1 indicamos 2 veces el tamaño base, en este caso serán 36px.

Nota: El zoom del navegador permite aumentar el tamaño del texto aunque se usen tamaños fijos (píxeles), pero afecta a todo el contenido de la página, no solo al texto.

Contraste

El contraste ente el color de texto y el color de fondo debe ser suficiente para que sea percibido por personas con sensibilidad reducida al contraste o en pantallas en blanco y negro.

Símbolo de contraste

Para comprobar el contraste puedes utilizar una herramienta para calcular el contraste del color.

Aviso: Los colores con un contraste demasiado alto, como negro puro sobre blanco, pueden dificultar la lectura a algunos usuarios.

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.

Ejemplo: Interlineado definido a 1.5.

CSS
p {
    line-height: 1.5;
}

Longitud de línea

La longitud de línea no debería superar los 80 caracteres. Una longitud mayor puede ser un problema para algunos lectores a la hora de encontrar el inicio de la línea siguiente.

Nota: Es recomendable utilizar un diseño fluido, que permita al usuario cambiar el tamaño de la ventana para encontrar la longitud de línea que le resulte más cómoda.

Alineación

Hay que evitar justificar el texto, debido a que se crean grandes huecos vacíos entre las palabras que pueden dificultar la lectura.

La solución es alinear el texto de la página a un lado, normalmente a la izquierda en los idiomas que se escriben de izquierda a derecha.

Texto oculto

En algunas ocasiones queremos que un texto sea visible únicamente para los lectores de pantalla.

Para ocultar un texto visualmente, pero que pueda ser leído por los lectores de pantalla, podemos usar la propiedad de CSS clip. La propiedad clip define qué porción de un elemento es visible y solo se aplica sobre elementos con position: absolute o position: fixed.

Ejemplo 1: Código para ocultar texto.

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

Si queremos que el texto oculto sea visible al navegar con el teclado, como en el caso de un enlace para saltar la navegación, podemos añadir los siguientes estilos.

Ejemplo 2: Código para hacer visible el texto oculto al enfocarlo.

CSS
.screen-reader-focus:focus {
    clip: auto !important;
    display: block;
    height: auto;
    overflow: visible;
    position: static;
    width: auto;
}

Aviso: La propiedad clip está obsoleta y la recomendación oficial es utilizar clip-path. El problema es que clip-path aún no está ampliamente soportada por los navegadores.