Tipografía legible: tamaño, interlineado, espaciado (1.4.12), redimensionar (1.4.4) y reflow (1.4.10)

La legibilidad de un texto depende de la tipografía elegida, de su tamaño, del interlineado, del ancho de línea y, sobre todo, de que la persona pueda adaptarlos a sus necesidades. Muchas personas con baja visión no usan lector de pantalla: usan el zoom del navegador, aumentan el tamaño de letra o aplican hojas de estilo propias. Tres criterios de WCAG garantizan que puedan hacerlo sin romper la página: 1.4.4 Cambio de tamaño del texto, 1.4.10 Reajuste de los elementos y 1.4.12 Espaciado del texto. Esta lección los explica y da recomendaciones tipográficas concretas.

Elegir una tipografía legible

No existe una «tipografía accesible» universal, pero sí características que ayudan:

• Formas de letra distinguibles: que la «I» mayúscula, la «l» minúscula y el «1» se diferencien; que la «a» y la «o», o la «rn» y la «m», no se confundan. Fuentes como Verdana o Atkinson Hyperlegible se diseñaron pensando en ello; otras muy usadas en pantalla, como Source Sans, Open Sans o Inter, son legibles, pero conviene comprobar en ellas estos pares de caracteres, porque no todas los diferencian igual de bien.
• Grosor medio: evita las variantes light o thin para texto de lectura; pierden contraste efectivo.
• Altura de la x generosa y espaciado entre letras normal: las fuentes condensadas cansan.
• Pocas familias: una para texto y, como mucho, otra para títulos.
• Nada de cursiva ni mayúsculas sostenidas para párrafos: ambas reducen la velocidad de lectura, especialmente con dislexia.

Las fuentes con remates (serif) no son inaccesibles por sí mismas en pantalla actual, pero las sans serif suelen funcionar mejor en tamaños pequeños y en pantallas de baja resolución.

Tamaño, interlineado y ancho de línea

• Tamaño base: al menos 16 píxeles CSS para texto de lectura (1 rem). Las notas o el texto legal pueden bajar a 14 px, pero no menos.
• Interlineado: 1,5 veces el tamaño de letra (line-height: 1.5) en párrafos. El criterio 1.4.8 Presentación visual (AAA) lo pide expresamente (lo verás en detalle en la lección siguiente), y 1.4.12 exige que se pueda forzar.
• Ancho de línea: entre 45 y 80 caracteres por línea (max-width: 70ch es una buena regla). Las líneas más largas dificultan volver al principio de la siguiente.
• Separación entre párrafos: mayor que el interlineado, para que los párrafos se distingan.
• Unidades relativas: define los tamaños en rem o em, no en px, para que respeten el tamaño de letra que la persona ha configurado en su navegador.

1.4.4 Cambio de tamaño del texto

Este criterio, de nivel AA, exige que el texto pueda ampliarse hasta el 200 % sin tecnologías de apoyo y sin pérdida de contenido ni funcionalidad. Se comprueba de dos formas: con el zoom del navegador al 200 % y, más exigente, aumentando solo el tamaño de letra (en Firefox: «Solo ampliar texto»). Fallos típicos: textos que se cortan en cajas de alto fijo, botones cuyo texto se desborda, menús que se superponen, y contenido que desaparece bajo un encabezado fijo.

/* Incorrecto: alto fijo, el texto ampliado se corta */
.tarjeta { height: 120px; overflow: hidden; font-size: 14px; }

/* Correcto: alto mínimo, unidades relativas */
.tarjeta { min-height: 7.5rem; font-size: 0.875rem; }

1.4.10 Reajuste de los elementos

El criterio 1.4.10 Reajuste de los elementos (AA, introducido en WCAG 2.1) exige que el contenido pueda presentarse sin pérdida de información ni funcionalidad y sin desplazamiento en dos dimensiones: para contenido que se lee en vertical, a un ancho de 320 píxeles CSS; para contenido horizontal, a una altura de 256 píxeles. En la práctica, 320 px CSS equivale a una ventana de escritorio de 1280 px con zoom al 400 %, que es la forma habitual de comprobarlo. Se exceptúa el contenido que requiere dos dimensiones para su uso o significado: imágenes, mapas, diagramas, vídeos, juegos, presentaciones, tablas de datos (la tabla puede desplazarse horizontalmente, pero sus celdas no deben romperse) e interfaces donde es necesario mantener las barras de herramientas visibles mientras se manipula contenido.

El reflow es, básicamente, diseño responsive bien hecho. Lo que falla casi siempre:

• Anchos fijos en píxeles en contenedores, tablas de maquetación e imágenes sin max-width: 100%.
• Texto que se trunca con puntos suspensivos y no hay forma de leerlo entero.
• Elementos fijos (cabeceras, banners de cookies, chats) que al 400 % ocupan toda la pantalla y tapan el contenido.
• Versiones móviles con funciones recortadas respecto a la de escritorio: eso es pérdida de funcionalidad.

1.4.12 Espaciado del texto

Este criterio, de nivel AA, protege a las personas que aplican sus propias hojas de estilo o extensiones para espaciar el texto (muy habitual con dislexia). Exige que no se pierda contenido ni funcionalidad al forzar estos valores: interlineado de al menos 1,5 veces el tamaño de letra, separación entre párrafos de al menos 2 veces, espaciado entre letras de al menos 0,12 veces y entre palabras de al menos 0,16 veces. Los contenedores que recortan el texto, los botones de ancho fijo y los textos superpuestos son los fallos típicos. Se comprueba con un bookmarklet de espaciado de texto (el más usado es el «Text Spacing Bookmarklet» de Steve Faulkner) o con la extensión Stylus aplicando estos valores a todos los elementos.

Resumen

• Tipografía legible: letras distinguibles, grosor medio, 16 px de base, interlineado 1,5, líneas de 45-80 caracteres, unidades rem.
• 1.4.4 Cambio de tamaño del texto (AA): ampliar al 200 % sin pérdida; evita alturas fijas y el bloqueo del zoom.
• 1.4.10 Reajuste de los elementos (AA): sin desplazamiento horizontal a 320 px CSS (zoom 400 %), salvo tablas, mapas e imágenes.
• 1.4.12 Espaciado del texto (AA): soporta interlineado 1,5, párrafos 2, letras 0,12 em y palabras 0,16 em.
• Comprueba con zoom 200 % y 400 %, «solo ampliar texto» y el bookmarklet de Text Spacing.