Texto de cuerpo legible: medida, interlineado y contraste

Qué es

La medida es la longitud de una línea en caracteres. El interlineado (line height) es la distancia entre una línea base y la siguiente. La relación de contraste es la relación de luminancia entre el texto y su fondo. WCAG 2.2 da cifras para las tres. El criterio 1.4.8 Presentación visual (AAA) enumera, para bloques de texto: un ancho no superior a 80 caracteres o glifos (40 para CJK), texto no justificado, un interlineado de al menos espacio y medio dentro de los párrafos con un espaciado entre párrafos al menos 1,5 veces mayor que el interlineado, y texto redimensionable hasta el 200 % sin desplazamiento horizontal. El criterio 1.4.12 Espaciado del texto (AA) exige que no se pierda ningún contenido ni función cuando el usuario sobrescribe el interlineado a al menos 1,5 veces el tamaño de la fuente, el espaciado entre párrafos a 2 veces, el espaciado entre letras a 0,12 veces y el espaciado entre palabras a 0,16 veces. El criterio 1.4.3 Contraste (AA) exige 4,5:1 para el texto y 3:1 para el texto grande, que el documento define como aproximadamente 18 puntos, o 14 puntos en negrita.

Por qué importa

Las líneas demasiado largas hacen que el ojo pierda su posición en el barrido de retorno; un interlineado apretado hace que las líneas se fundan entre sí; el contraste bajo resulta ilegible a la luz del sol y para cualquiera con visión reducida. Estos son los fallos que más a menudo hacen desagradable de leer un contenido por lo demás bien estructurado, y son baratos de corregir.

Cómo aplicarlo

• Restringir la columna de texto con max-width en unidades ch (por ejemplo, max-width: 65ch). Un ch es el ancho de avance del glifo 0 de la fuente, de modo que el límite se escala con la fuente; en una tipografía proporcional, una línea contiene más caracteres que su valor en ch, así que hay que contar una línea de muestra frente al límite de 80 caracteres en lugar de darlo por supuesto.
• Establecer line-height como un número sin unidad (1.5 o más para el texto de cuerpo, menos para los encabezados grandes) para que se escale con la fuente; aumentarlo en líneas largas y en fuentes con x-heights altas.
• Usar rem para los tamaños de fuente y em/rem para el espaciado, de modo que funcionen el zoom del navegador y las preferencias de tamaño de fuente del usuario; evitar alturas fijas en píxeles en los contenedores de texto para que el texto reespaciado no desborde.
• Comprobar cada par texto/fondo frente a 4,5:1, incluidos el texto de marcador de posición, el texto sobre imágenes y ambos esquemas de color; los encabezados grandes pueden usar 3:1.
• Alinear el texto de cuerpo a la izquierda (alineación de inicio); la justificación sin guionado produce ríos de espacio en blanco, y 1.4.8 menciona explícitamente el texto no justificado.

Trampas

Los grosores de fuente finos pierden contraste en las pantallas incluso cuando la relación de color es correcta. line-height en px no se escala con el texto. Truncar con text-overflow: ellipsis oculta contenido cuando los usuarios aumentan el espaciado. Las herramientas de contraste solo miden el color; una imagen de fondo recargada necesita un fondo sólido o difuminado detrás del texto.