Jerarquía tipográfica: cómo construir una que realmente se lea
Cómo construir una jerarquía tipográfica desde cero con ratios de escala reales, contraste de peso, interlineado y tracking. Además, los fallos que matan a la mayoría de las jerarquías antes del lanzamiento.
La mayoría de los artículos sobre jerarquía tipográfica la describen en lugar de construirla. Dicen que los titulares deben sentirse importantes y el texto de cuerpo debe sentirse tranquilo. Inútil cuando el encargo es "elige cinco tamaños, tres pesos y el interlineado que aguante en una página de inicio, un artículo y un panel de ajustes". Una descripción no es un sistema. El sistema es lo que se publica.
Este texto es la construcción. Ratios reales, números reales, el orden de las decisiones y los patrones de fallo que matan a la mayoría de las jerarquías antes del lanzamiento.
Qué es realmente la jerarquía tipográfica
La jerarquía tipográfica es la clasificación estructural de cada elemento de texto para que el ojo sepa qué leer primero, segundo y tercero antes de leer nada. Es la capa específica de tipografía de la jerarquía visual y la columna vertebral de cualquier sistema tipográfico que funcione.
Una jerarquía real responde por escrito cuatro preguntas. Cuántos niveles hay. Qué tamaño tiene cada nivel. Qué peso tiene cada nivel. Qué espaciado hay entre niveles y dentro de ellos. Si esas respuestas no existen en una sola página de documentación, el sistema está improvisado, no diseñado.
Los cinco niveles que casi todo sistema necesita
La mayoría de los sistemas que funcionan aterrizan en cinco niveles: H1, H2, H3, cuerpo y pequeño. Más crea ruido. Menos aplana la página.
La trampa es tratar botones, pies de foto y etiquetas de formulario como niveles aparte. Son cuerpo o pequeño con un rol distinto. El botón es cuerpo en peso medium. El pie de foto es pequeño en peso regular. La etiqueta es pequeña en peso medium. Mismos tamaños, trabajos distintos.
Elige un ratio de escala y comprométete con él
El tamaño de cada nivel sale de un único ratio aplicado a una base. Elige primero el ratio y deriva de él cada tamaño. La base casi siempre es 16px, el valor por defecto del navegador y el tamaño en el que el cuerpo se lee mejor en pantalla. Tres ratios cubren casi todos los proyectos.
Tercera mayor (1.25). Compacta y densa. Ideal para UI cargada de datos y herramientas de administración. Desde una base de 16px: 16, 20, 25, 31, 39, 49, 61. Visible pero nunca dramática.
Cuarta perfecta (1.333). El caballo de batalla. Lo bastante fuerte para editorial, lo bastante contenida para producto. Desde una base de 16px: 16, 21, 28, 37, 50, 67. El valor por defecto de la mayoría de sitios de marketing.
Proporción áurea (1.618). Editorial, expresiva, casi teatral. Ideal para landing pages y maquetación de revista. Desde una base de 16px: 16, 26, 42, 68, 110. El H1 se alza sobre el cuerpo, y ese es el punto.
Herramientas como type-scale.com generan la tabla para cualquier base y ratio en un segundo. Elige uno, anota los números, publica. Cambiar a mitad de proyecto es un refactor que toca todas las páginas.
El peso es el segundo eje, no el primero
Los diseñadores recurren al tamaño como única palanca y luego se preguntan por qué la página se lee plana. El peso lleva la mitad del trabajo, sobre todo en móvil, donde el rango de tamaños está limitado.
Un sistema funcional necesita tres pesos. Regular para el cuerpo, medium para énfasis y etiquetas, bold o semibold para titulares. Un cuarto peso es una decisión de marca, no un requisito del sistema.
La regla que arregla la mayoría de las páginas planas: nunca uses el mismo peso en dos niveles adyacentes. Si H2 es bold, H3 debería ser semibold o medium. La adyacencia de pesos iguales colapsa la jerarquía sin importar el tamaño. La trampa inversa es que todo sea bold, lo que elimina el peso como palanca.
El interlineado es la palanca silenciosa de la jerarquía
El interlineado es el espacio vertical entre líneas, de línea base a línea base. CSS lo llama line-height. La palanca más infravalorada de la jerarquía tipográfica.
Un interlineado ajustado en un titular se lee seguro y denso. Un interlineado amplio en el cuerpo se lee tranquilo y legible. Al revés, la jerarquía se invierte. Un cuerpo a 1.2 parece un muro. Un titular de 64px a 1.6 parece decoración.
Valores por defecto que funcionan. Titulares (H1, H2): 1.1 a 1.2. Subtítulos (H3): 1.2 a 1.3. Cuerpo: 1.5 a 1.7. Pies de foto: 1.4 a 1.5. El texto grande necesita menos interlineado, el pequeño más. El texto largo necesita más interlineado de cuerpo que la UI. Un dashboard a 1.4 se lee denso, y eso es lo correcto.
El tracking es para el texto display, no para el cuerpo
El kerning es el espacio entre pares de letras concretos, ajustado a escala de logo o titular. El tracking es el espacio entre todas las letras de una cadena, aplicado de forma uniforme. No son la misma palanca.
El tracking es una herramienta de jerarquía solo en los extremos. Un tracking ajustado en un titular grande (-0.02em a -0.04em) lo hace sentir firme y decidido. Un tracking amplio en etiquetas pequeñas en mayúsculas (+0.05em a +0.1em) hace que la etiqueta se sienta intencional. Ambos señalan el rol del texto.
La zona de peligro es el cuerpo. Aplicar tracking al cuerpo daña la legibilidad sin dar ningún beneficio de jerarquía. Deja el cuerpo en cero. La señal más rápida de un diseñador que no entiende el tracking es un titular hero a +0.1em porque "se siente editorial". No lo es. Se siente decoración.
El espaciado entre niveles es parte de la jerarquía
El espacio vertical alrededor de cada nivel lo clasifica tanto como el tamaño y el peso. Un H2 con 80px arriba y 24px abajo se lee como el inicio de una nueva sección. El mismo H2 con 24px arriba y abajo se lee como un salto de párrafo.
La regla: el espacio de arriba debe ser aproximadamente el doble del de abajo. El elemento pertenece al contenido que tiene debajo. Especificación inicial: sobre H2: 64 a 96px, bajo H2: 16 a 24px. Sobre H3: 32 a 48px, bajo H3: 8 a 16px. La disciplina del espacio en blanco importa tanto como la tipografía misma. Una escala perfecta con un espaciado descuidado se lee plana.
El orden de decisiones para construir una jerarquía desde cero
Saltate pasos y la jerarquía se verá bien aislada, pero se desmoronará dentro de un producto real.
- Elige el tamaño base. 16px para pantalla. 18px para sitios muy editoriales. Nunca por debajo de 16px para el cuerpo.
- Elige el ratio de escala. Tercera mayor para UI densa, cuarta perfecta para uso general, proporción áurea para editorial.
- Genera la tabla de tamaños. Deriva cada nivel del ratio. Redondea a píxeles enteros. Anótalo.
- Elige tres pesos. Regular, medium, bold o semibold. Ni uno más.
- Define el interlineado por nivel. Ajustado para titulares, amplio para el cuerpo.
- Define el espaciado por nivel. Proporción 2 a 1 arriba-abajo en cada titular.
- Define tracking solo para los extremos. Ajustado en display, amplio en mayúsculas pequeñas. Cero en el cuerpo.
- Valida en tres pantallas reales. El hero de una página de inicio, un artículo largo, un panel de UI denso. Si aguanta en las tres, publícala.
La forma más rápida de publicar una jerarquía rota es derivar los tamaños de la intuición en lugar de un ratio, y luego parchear interlineado y espaciado página por página.
Dónde fallan la mayoría de las jerarquías
Seis patrones de fallo matan más jerarquías que cualquier otra cosa.
Todo es bold. El peso deja de ser una palanca y la página depende solo del tamaño. Baja H3 y cualquier titular terciario a medium o semibold.
Solo existen dos niveles. H1 y cuerpo sin nada en medio se lee como un documento plano con un título arriba. Añade un H2 cada 150 a 300 palabras.
El subtítulo flotante. Igual espacio arriba y abajo deja al subtítulo sin pertenecer a ninguna sección. Reduce el espacio inferior para que se pegue al cuerpo que sigue.
El H1 desbocado. Un H1 de hero de escritorio usado tal cual en cada página de contenido rompe el ritmo. Define un token de H1 de escritorio y un token de H1 de página de contenido. Mismo nombre, dos valores.
Cuerpo a 14px. Por debajo de 16px se rompe la legibilidad y se comprimen los niveles más pequeños en un rango de 2px. 16px mínimo. Usa 13 a 14px solo para pies de foto y etiquetas.
Jerarquía diseñada solo en escritorio. El móvil comprime cada nivel y convierte la jerarquía en una mancha. Diseña primero para móvil y escala hacia arriba.
La jerarquía en las condiciones de 2026
Las fuentes variables son ahora la opción correcta por defecto. Un solo archivo de 80KB entrega regular, medium, semibold y bold desde un solo eje. Dos fuentes variables cubren todo el sistema. La guía de combinación de fuentes explica cómo elegirlas.
Los resúmenes de IA leen el marcado semántico, no el visual. Una página con un H1, luego un div con estilo de H2 y luego un H3 se interpreta mal. La jerarquía visual y el HTML semántico tienen que coincidir. Un H1 por página, sin niveles saltados. El desglose de principios de diseño web cubre el lado semántico.
La checklist de auditoría de jerarquía
Guárdala. Pásala antes del lanzamiento. Cualquier no se arregla antes de publicar.
| # | Comprobación | Aprobado |
|---|---|---|
| 1 | Tamaño base y ratio de escala documentados | Un ratio para el sistema, por escrito |
| 2 | Cada nivel deriva del ratio | Sin tamaños arbitrarios |
| 3 | Al menos tres niveles de texto en cada página de contenido | H1, H2, cuerpo como mínimo |
| 4 | Ningún par de niveles adyacentes comparte peso | Contraste de peso en cada paso |
| 5 | Texto de cuerpo de 16px o más | Suelo de 16px para el cuerpo en pantalla |
| 6 | Interlineado más ajustado en titulares, más amplio en el cuerpo | Titulares 1.1 a 1.2, cuerpo 1.5 a 1.7 |
| 7 | Espacio sobre cada titular aproximadamente 2x el espacio inferior | Proporción 2 a 1 en H2 y H3 |
| 8 | Tracking cero en el cuerpo, ajustado solo en los extremos | Cuerpo intacto |
| 9 | La jerarquía aguanta en un viewport de 375px | Validada en móvil |
| 10 | El HTML semántico coincide con la jerarquía visual | Un H1, sin niveles saltados |
Diez de diez se lee solo en cualquier dispositivo. Siete de diez se lee como diseñado. Por debajo de siete se lee plano sin importar la tipografía.
FAQ
¿Cuál es la diferencia entre jerarquía visual y jerarquía tipográfica?
La jerarquía visual es el sistema más amplio que clasifica cada elemento usando tamaño, peso, color, posición, espacio, alineación e imágenes. La jerarquía tipográfica es la capa específica de tipografía que usa tamaño, peso, interlineado, tracking y espaciado para clasificar el texto. La jerarquía tipográfica es una de las entradas de la jerarquía visual.
¿Cuál es el mejor ratio para una escala tipográfica?
La cuarta perfecta (1.333) es el valor por defecto más seguro. Produce un contraste claro sin volverse teatral. Usa la tercera mayor (1.25) para UI densa y herramientas de administración. Usa la proporción áurea (1.618) para editorial y landing pages donde el hero debe dominar.
¿Cómo arreglo una jerarquía que se ve plana?
Tres movimientos, en orden. Primero, aumenta el contraste de tamaño. H1 al menos 2x H2, H2 al menos 1.5x el cuerpo. Segundo, añade contraste de peso. Ningún par de niveles adyacentes comparte el mismo peso. Tercero, ajusta el ritmo de espaciado con una proporción 2 a 1 arriba-abajo en cada titular. Si la página sigue leyéndose plana, el layout está haciendo demasiado y necesita recortes de alcance antes de más trabajo tipográfico.
Construye la jerarquía y luego confía en ella
Una jerarquía que funciona es el camino más barato hacia una página que se lee sola. El lector no ve los niveles, los ratios ni los valores de interlineado. Ve una página que tiene sentido. Las matemáticas desaparecen en la claridad.
La trampa es tratar la jerarquía como un pulido de última milla. Es la columna vertebral. Constrúyela primero, valídala en pantallas reales, documéntala como tokens y deja que cada otra decisión se componga a partir de ella. Si quieres un equipo que construya el sistema tipográfico, la jerarquía y la UI del producto como un solo proyecto en lugar de tres, contrata a Brainy. Elegimos el ratio, escribimos los tokens y publicamos el sistema en un producto real.
Want a type system with a hierarchy that survives a real product instead of a Figma file? Brainy ships brand and product typography end to end.
Get Started
