Composición tipográfica: jerarquía, alineación y presentación visual (1.4.8)

En la lección anterior viste qué hace legible una letra (forma, grosor, tamaño, interlineado) y cómo garantizar que la persona pueda ampliarla y espaciarla. Pero un texto con buena tipografía puede seguir siendo difícil de leer si está mal compuesto: justificado con huecos enormes, centrado en párrafos largos, todo en mayúsculas, con una jerarquía visual que no coincide con la estructura o con iconos que desaparecen al cambiar la fuente. Esta lección trata la composición tipográfica: cómo se organiza el texto en la página, qué pide el criterio 1.4.8 Presentación visual y cómo evitar los problemas de las fuentes web y las fuentes de iconos.

Jerarquía visual coherente con la estructura

Una escala tipográfica clara ayuda a todo el mundo a escanear una página: el título principal destaca, los encabezados de sección se distinguen del texto y los de subsección, de los de sección. Una progresión de tamaños con una proporción constante (por ejemplo, multiplicar por 1,25 en cada nivel) da coherencia sin saltos bruscos.

Pero la jerarquía visual tiene que corresponderse con la jerarquía real del HTML. Quien usa lector de pantalla navega por encabezados, y para esa persona solo existe lo que está marcado como <h2>, <h3>, etc. Si un texto parece un encabezado pero es un párrafo en negrita, incumple 1.3.1 Información y relaciones; si un encabezado se elige por su tamaño y no por su nivel, la estructura se rompe. La redacción de encabezados la viste en el curso de redacción accesible y su marcado lo verás en el nivel 3.

<!-- Incorrecto: parece un encabezado, pero no lo es -->
<p class="titulo-grande"><strong>Requisitos de la ayuda</strong></p>

<!-- Incorrecto: se elige h4 porque «es más pequeño» -->
<h4>Requisitos de la ayuda</h4>

<!-- Correcto: el nivel lo da la estructura y el tamaño lo da el CSS -->
<h2 class="titulo-seccion">Requisitos de la ayuda</h2>

Alineación, justificado y división de palabras

• Alinea a la izquierda el texto de lectura en idiomas que se escriben de izquierda a derecha. El borde izquierdo recto ayuda a encontrar el comienzo de cada línea.
• Evita el texto justificado en pantalla. Para igualar el ancho de las líneas, el navegador estira los espacios entre palabras y crea huecos irregulares que forman «ríos» blancos verticales. Molestan a muchas personas con dislexia y empeoran con el zoom y en columnas estrechas o en el móvil.
• Centra solo textos muy cortos: un título o un botón. Un párrafo centrado obliga a buscar el principio de cada línea en un sitio distinto.
• División de palabras: si necesitas columnas estrechas, la propiedad hyphens: auto mejora el reparto de las líneas, pero solo funciona si el idioma de la página está bien declarado (lang="es"), otra razón para cumplir 3.1.1 Idioma de la página.

Énfasis, mayúsculas y subrayado

• Negrita para destacar, con moderación. La cursiva sirve para títulos de obras o términos extranjeros, pero no para pasajes largos.
• Mayúsculas sostenidas solo en palabras sueltas (etiquetas, botones cortos). Si las usas, aplícalas con CSS (text-transform: uppercase) y escribe el texto en minúsculas en el HTML: así quien cambie el estilo recupera la escritura normal, y se reduce el riesgo de que algunos lectores de pantalla deletreen palabras cortas en mayúsculas como si fueran siglas. Un poco de espaciado entre letras mejora su lectura.
• Reserva el subrayado para los enlaces. Si subrayas textos que no son enlaces, la gente intentará pulsarlos, y si quitas el subrayado a los enlaces, dependerás del color (recuerda 1.4.1).
• No confíes el significado solo al formato. La mayoría de los lectores de pantalla no anuncian por defecto la negrita ni la cursiva. Si algo es importante («El plazo termina hoy»), dilo con palabras.

1.4.8 Presentación visual (AAA) en detalle

El criterio 1.4.8 Presentación visual, de nivel AAA, reúne en uno las principales recomendaciones de composición. Para los bloques de texto exige que haya un mecanismo, que puede ser el propio navegador, para conseguir lo siguiente:

1. La persona puede elegir los colores del texto y del fondo.
2. El ancho no supera los 80 caracteres (40 en chino, japonés o coreano).
3. El texto no está justificado (alineado a la vez a izquierda y derecha).
4. El interlineado es de al menos 1,5 dentro de los párrafos, y el espacio entre párrafos es al menos 1,5 veces el interlineado.
5. El texto se puede ampliar hasta el 200 % sin tecnologías de apoyo y sin tener que desplazarse en horizontal para leer una línea en una ventana a pantalla completa.

No lo exigen ni el RD 1112/2018 (PDF, se abre en una ventana nueva) ni la EN 301 549 (PDF, se abre en una ventana nueva), que se quedan en el nivel AA. Pero es una excelente lista de diseño para contenidos de lectura larga: normativa, noticias, información sanitaria, cursos. Conviene no confundirlo con 1.4.12, que ya conoces:

Aspecto	1.4.12 Espaciado del texto (AA)	1.4.8 Presentación visual (AAA)
Qué pide	Que la página aguante sin romperse el espaciado que aplique la persona	Que la presentación sea legible por defecto o mediante un mecanismo
Interlineado	Debe tolerar 1,5	Al menos 1,5
Espacio entre párrafos	Debe tolerar 2 veces el tamaño de letra	Al menos 1,5 veces el interlineado
Ancho, justificado y colores	No los regula	Máximo 80 caracteres, sin justificar, colores elegibles

Fuentes web, fuentes de iconos y texto real

Fuentes web

Las fuentes que se descargan con la página tardan en llegar. Mientras tanto, el navegador puede mostrar el texto invisible o con una fuente de reserva. Usa font-display: swap para que el texto se vea desde el primer momento y define una pila de reserva con fuentes de proporciones parecidas, para que el cambio no desplace el contenido. Comprueba también que tenga todos los caracteres del español (ñ, tildes, ¿, ¡, «») y de las lenguas cooficiales que uses.

Fuentes de iconos

Las fuentes de iconos asignan pictogramas a caracteres. Tienen dos problemas: si la persona aplica su propia fuente (lo hacen muchas extensiones para dislexia o los modos de lectura), los iconos se convierten en cuadrados o letras sin sentido; y los lectores de pantalla pueden leer el carácter o no anunciar nada. Usa SVG en su lugar, con el tratamiento de texto alternativo que viste en el curso de imágenes.

<!-- Incorrecto: icono de fuente sin alternativa -->
<button><i class="icon-search"></i></button>

<!-- Correcto: SVG decorativo y nombre accesible en el botón -->
<button aria-label="Buscar">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

Texto real, no imágenes de texto

Todo lo que has visto en este curso (ampliar, reflow, espaciado, modo oscuro, contraste forzado, elección de fuente) solo funciona con texto real. Un cartel convertido en imagen no se adapta a nada. El criterio 1.4.5 Imágenes de texto lo trataste en el curso de imágenes; desde el punto de vista tipográfico, la conclusión es la misma: maqueta el texto con HTML y CSS.

Más detalle en Understanding 1.4.8 Visual Presentation (W3C).

Resumen

• La jerarquía visual debe coincidir con la estructura HTML: el nivel de encabezado lo da la estructura y el tamaño, el CSS.
• Alinea a la izquierda, no justifiques, centra solo textos muy cortos y usa hyphens: auto con el idioma bien declarado.
• Negrita con moderación, mayúsculas solo en palabras sueltas y aplicadas con CSS, subrayado solo en enlaces y nunca el significado confiado solo al formato.
• 1.4.8 Presentación visual (AAA): colores elegibles, máximo 80 caracteres, sin justificar, interlineado 1,5 y ampliación al 200 % sin desplazamiento horizontal.
• Fuentes web con font-display: swap, SVG en lugar de fuentes de iconos y texto real en lugar de imágenes de texto.