Esta página fue traducida con asistencia de IA. El original en inglés es la versión autorizada.
Una jerarquía tipográfica le dice al lector de qué trata una página, cómo está organizada y por dónde entrar en ella — antes de leer una sola frase. La edición de 2005 recomendaba dimensionar los niveles de la jerarquía con una razón consistente entre 1.2 y 1.5, y advertía de que un tamaño base mal elegido se vendría abajo con el escalado. Ambos puntos sobreviven, pero cada uno ha adquirido una segunda dimensión que el original no podía abordar: las escalas son ahora fluidas en lugar de fijas, y la jerarquía en la web ya no es solo visual. Debe ser también estructural, porque una proporción sustancial de lectores nunca la ve.
Qué cambió desde 2005
La recomendación de la razón 1.2–1.5 maduró hasta convertirse en la práctica hoy estándar de las escalas tipográficas modulares: cada tamaño de la página derivado de multiplicar repetidamente un tamaño base por una razón. Las razones comunes han adquirido nombres de intervalos musicales — 1.2 (tercera menor), 1.25 (tercera mayor), 1.333 (cuarta justa), 1.5 (quinta justa) — y el rango original sigue siendo exactamente correcto, con un matiz: la razón debe adecuarse al medio. Las interfaces de producto densas y la lectura de textos largos funcionan bien con razones suaves (1.125–1.25), que producen suficientes tamaños distintos sin titulares enormes; las páginas editoriales y de marketing pueden soportar 1.333 o 1.5. Una razón que genera un h2 de 60 píxeles en una aplicación cargada de datos es la razón equivocada para ese contexto.
El cambio técnico mayor es que una escala ya no necesita ser un conjunto fijo de números. La función clamp() de CSS permite que cada paso de la escala sea fluido: un tamaño definido con un mínimo, un valor preferido relativo al viewport y un máximo, de modo que los titulares escalan con suavidad entre el teléfono y el escritorio en lugar de saltar en los puntos de ruptura. Una escala fluida bien construida usa en la práctica una razón menor en pantallas pequeñas y una mayor en pantallas grandes — lo que coincide con cómo los diseñadores de impresos siempre ajustaron el tipo de exhibición a la página. Una precaución de accesibilidad es esencial: el término intermedio relativo al viewport debe mezclarse con un componente basado en rem (por ejemplo, un cálculo que combine rem y vw), nunca unidades de viewport puras. El texto dimensionado solo en vw ignora la preferencia de tamaño de fuente del usuario y no responde al redimensionado de texto del navegador, socavando los requisitos de redimensionado y reflujo de las WCAG. Toda expresión clamp() debe seguir honrando a un usuario que haya fijado su tamaño base al 200%.
Las advertencias del original sobre el comportamiento al escalar — marcos truncados, etiquetas de botones que desaparecen, orden de lectura roto al 150% — han sido codificadas. Las WCAG exigen que el texto se redimensione al 200% sin pérdida (1.4.4 Cambio de tamaño del texto) y que el contenido refluya a 320 píxeles CSS (1.4.10). El viejo consejo de "diseñar para el escalado" es hoy simplemente conformidad.
La jerarquía debe ser estructural, no solo visual
La adición más importante a este capítulo es invisible. Un usuario de lector de pantalla no percibe que una línea mide 32 píxeles y está en negrita; percibe que es — o no es — un elemento de encabezado de un nivel determinado. Los usuarios de lectores de pantalla navegan rutinariamente extrayendo una lista de encabezados y saltando entre ellos; una página cuyos "encabezados" son meros párrafos agrandados en negrita no les ofrece estructura alguna. Esto es lo que exige el Criterio de Conformidad 1.3.1 Información y relaciones (nivel A) de las WCAG: la información transmitida mediante la presentación visual — incluida la jerarquía — debe ser también determinable por programación.
La disciplina práctica tiene dos mitades. Primera, todo encabezado visual debe ser un elemento de encabezado real (h1 a h6), y los niveles de encabezado deben reflejar el esquema del documento: un h1 para el tema de la página, h2 para las secciones principales, h3 para sus subsecciones, sin saltarse niveles en el descenso. Segunda — y aquí es donde los diseñadores se equivocan más a menudo — el nivel semántico y el tamaño visual deben desacoplarse. El nivel de encabezado correcto lo dicta la estructura del documento; el tamaño correcto lo dicta el diseño. Cuando entran en conflicto (un h2 que debe verse modesto, un h4 que merece prominencia), conserve el nivel estructural y reestilícelo con una clase. Elegir la etiqueta por su tamaño predeterminado es la causa raíz de la mayoría de los esquemas rotos de la web.
La jerarquía más allá del tamaño
El capítulo de 2005 trataba la jerarquía como un problema de dimensionado. La práctica madura distribuye el trabajo entre cuatro variables — tamaño, peso, espacio y color — y el tamaño es a menudo la menos eficiente de ellas. Un paso hacia arriba en el peso de la fuente (digamos, de 400 a 600) o una banda de espacio en blanco sobre un encabezado pueden señalar una nueva sección con tanta claridad como un salto de tamaño, sin consumir espacio vertical ni saturar las pantallas pequeñas. Esto importa tanto para la accesibilidad como para la economía: las jerarquías que se apoyan enteramente en el tamaño tienden a colapsar en viewports estrechos, donde los tamaños de exhibición deben encogerse, mientras que la diferenciación por peso y espacio sobrevive a cualquier viewport. Las fuentes variables convierten el peso en un eje continuo, de modo que los pesos intermedios pueden afinarse con precisión al contraste que necesita cada nivel. El color y las señales secundarias nunca deben portar la jerarquía en solitario — deben ir montados sobre el marcado estructural y al menos otra señal visual, y el texto de los encabezados sigue necesitando cumplir los requisitos de contraste.
Dos refinamientos modernos menores. Los encabezados de varias líneas se benefician de text-wrap: balance, que iguala las longitudes de línea para que un titular no deje una sola palabra varada en su última línea — una pequeña declaración de CSS que reemplaza años de ajustes manuales de partición. Y el interlineado de los encabezados debe fijarse apretado (aproximadamente 1.1–1.25, según el capítulo anterior) en cada nivel de la escala, en lugar de heredarse del texto de cuerpo.
El tamaño base, como insistía el original, sigue siendo primordial: toda la escala se multiplica a partir de él. El suelo moderno es el predeterminado del navegador de 1rem (16px por defecto) para el texto de cuerpo — fijado en rem, nunca en píxeles, para que las preferencias del usuario se propaguen — y la lectura de textos largos a menudo se sirve mejor con 1.125–1.25rem.
En CSS
:root {
/* a fluid modular scale, ratio ≈ 1.25, anchored in rem */
--step-0: 1rem;
--step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
--step-2: clamp(1.55rem, 1.35rem + 1vw, 2.2rem);
--step-3: clamp(1.95rem, 1.55rem + 2vw, 3.2rem);
}
h1 { font-size: var(--step-3); text-wrap: balance; }
h2 { font-size: var(--step-2); text-wrap: balance; }
h3 { font-size: var(--step-1); }Recomendaciones
- Construya los tamaños a partir de una escala modular con una razón de aproximadamente 1.2–1.5, elegida según la densidad del contenido.
- Haga la escala fluida con clamp(), mezclando siempre un componente rem en el valor preferido para que se honren los ajustes de tamaño de fuente del usuario.
- Use elementos de encabezado reales en un esquema lógico — un h1, sin niveles saltados — conforme a WCAG 1.3.1; nunca elija una etiqueta por su tamaño.
- Desacople la semántica de la apariencia: estilice los niveles de encabezado con clases cuando la estructura y el diseño discrepen.
- Exprese la jerarquía mediante el peso y el espacio además del tamaño; evite jerarquías que dependan solo del tamaño o del color.
- Fije el texto de cuerpo en un mínimo de 1rem en unidades relativas, y verifique que la jerarquía sobrevive al redimensionado de texto al 200% y al reflujo a 320px.
- Aplique text-wrap: balance e interlineado apretado a los encabezados.