Tamaños de títulos: cómo construir una jerarquía h1–h6

Los tamaños de títulos funcionan mejor cuando se derivan, no cuando se eligen: mapea los niveles de título sobre los pasos de una escala tipográfica modular — el texto de cuerpo en la base, cada título un número fijo de pasos por encima — en lugar de escoger seis valores independientes. Sobre una base de 16px con una cuarta justa (ratio 1,333), eso da h4 21px, h3 28px, h2 38px, h1 51px, con leyendas a 12px por debajo de la base. Dos aclaraciones honestas forman parte de la respuesta: la mayoría de las páginas nunca usan h5 ni h6, y los niveles de título de HTML son estructura del documento mientras que el tamaño es presentación — relacionados, pero separables.

Este artículo forma parte de nuestra guía de escala tipográfica. Recorre el mapeo con números reales, qué hacer con los niveles inferiores, por qué la semántica y el tamaño deben mantenerse separados, y cuán pronunciados deben ser los saltos de tamaño.

¿Cómo se mapean h1–h6 sobre una escala tipográfica?

Una escala modular genera los tamaños como base × ratio^(i/notes). Con dos notas por intervalo, existen medios pasos entre los saltos de ratio enteros — 18px, 25px, 33px, 44px en esta escala — y el mapeo de títulos más limpio los omite: da a los títulos los pasos enteros, y reserva los medios pasos para párrafos de entrada, etiquetas de interfaz grandes y otros roles intermedios.

Ahora cada nivel de título se relaciona con el siguiente mediante la misma proporción — una cuarta justa completa. Esa consistencia es lo que el lector percibe de verdad. Nadie mide los valores en píxeles de una página, pero las personas somos buenas percibiendo la proporción, y cuando cada salto de la jerarquía es el mismo ratio, los niveles se leen — tomando prestada una analogía del habla — como una sola voz a distintos volúmenes en lugar de seis voces diferentes. Una jerarquía construida a partir de seis tamaños sin relación puede estar técnicamente ordenada y aun así sentirse arbitraria; una jerarquía construida a partir de un solo ratio se siente intencionada.

Abre el mapeo completo en Scale Composer — cuarta justa, base de 16px, dos notas, con los niveles de título situados en los pasos enteros. Arrastra el ratio y toda la jerarquía se vuelve a derivar; ningún nivel necesita volver a decidirse.

¿Qué aspecto deben tener h5 y h6?

Con franqueza: en la mayoría de los sitios, ninguno — porque nunca se renderizan. El contenido que de verdad necesita seis niveles de anidamiento es raro fuera de las especificaciones, los documentos legales y las referencias de API profundas, y la mayoría de las páginas se detienen en h3 o h4. Gastar dos pasos de la escala en niveles que aparecen una vez al año comprime los niveles que aparecen en todas las páginas.

La convención habitual y sensata: deja de escalar en h4 y diferencia los niveles inferiores mediante el tratamiento — h5 al tamaño de cuerpo con un peso más marcado, h6 al tamaño de leyenda, a menudo en mayúsculas con espaciado entre letras. El tamaño es solo un canal de jerarquía; el peso, las mayúsculas y minúsculas y el espaciado sostienen los dos últimos niveles sin costarle nada a la escala. Si tu contenido realmente llega a seis niveles de profundidad, esa es una señal para elegir un ratio más plano para que la parte superior de la jerarquía siga cabiendo en la página.

¿Los tamaños de título tienen que coincidir con los niveles de título?

No — y tratarlos como si fueran lo mismo causa un daño real a la accesibilidad. Los niveles de título son el esquema del documento: quienes usan lectores de pantalla navegan saltando entre títulos y dependen de que los niveles sean jerárquicos — un h3 bajo un h2 bajo un h1, sin saltos — para entender cómo está organizada la página. El tutorial de estructura de página del W3C explica cómo debe comportarse ese esquema. El tamaño no juega ningún papel en ello: la tecnología de asistencia lee el nivel, no los píxeles renderizados.

De ahí salen dos reglas. Elige la etiqueta según el esquema — nunca recurras a un h4 porque quieres su tamaño, y nunca saltes de h1 a h3 porque el h2 “se ve demasiado grande aquí”. Después dale estilo con libertad: un h2 en una barra lateral renderizado al tamaño de h3 es legítimo — el esquema se mantiene fiel mientras el peso visual encaja con su contexto. La escala facilita implementarlo de forma limpia, porque los tamaños son pasos con nombre en lugar de propiedades de las etiquetas: cualquier nivel puede apuntar a cualquier paso sin tocar la estructura del documento.

¿Por qué el mismo h2 acaba con tamaños distintos a lo largo de un sitio?

Porque los tamaños se eligen por página. La landing page recibe un h2 de 40px, la plantilla del blog uno de 32px, la página de precios uno de 36px — cada uno razonable a nivel local, cada uno elegido por una persona distinta o en un mes distinto. Los visitantes leen varias páginas, y la deriva se percibe como un descuido difuso que nadie sabe nombrar.

La solución está en el nombrado, no en la disciplina. Deriva los tamaños de título de la escala una sola vez, y expórtalos como tokens — Scale Composer escribe tokens DTCG, propiedades personalizadas de CSS, valores @theme de Tailwind v4 o Figma Variables — de modo que “tamaño de h2” resuelva a un único valor allí donde el diseño y el código lo consulten. La elección por página ya no tiene nada que decidir: una página nueva hereda la jerarquía en lugar de reinventarla, y el h2 deja de ser una opinión por página.

¿Cuán pronunciada debe ser la jerarquía de títulos?

El ratio marca el registro. Una cuarta justa (1,333) es un caballo de batalla para páginas de contenido y de marketing: saltos claros, un h1 con presencia real. La interfaz de producto densa suele querer algo más plano — en torno a 1,2, el mismo mapeo deja el h1 cerca de 33px en lugar de 51px, y la jerarquía se apoya más en el peso y el espaciado que en el tamaño. Las páginas editoriales y las landing pages pueden ir más pronunciadas (1,5 en adelante) cuando los titulares son cortos y están pensados para dominar. El compromiso es la capacidad: cuanto más pronunciado el ratio, menos pasos enteros caben entre el texto de cuerpo y el tamaño más grande que puede sostener un diseño, así que las escalas pronunciadas encajan con esquemas poco profundos y las escalas planas con esquemas profundos.

Compara una jerarquía plana y una pronunciada

El registro es más fácil de sentir que de razonar: abre el mismo mapeo de títulos con un ratio plano de 1,2 y compáralo con la cuarta justa — mismos niveles, mismos pasos, h1 en torno a 33px en lugar de 51px. Alterna entre los dos y decide cuál habla con la voz de tu producto; después exporta el ganador como tokens para que el h2 de cada página signifique lo mismo.