Una buena jerarquía tipográfica no se nota. El lector la percibe como comodidad y claridad, no como artificio técnico. Cuando la jerarquía falla, el lector experimenta confusión: no sabe por dónde empezar, no puede distinguir niveles de importancia, pierde el hilo de la estructura.
Principios de la jerarquía tipográfica
La jerarquía tipográfica se establece mediante la diferenciación visual sistemática de niveles de texto. Esta diferenciación puede lograrse a través de varios parámetros: tamaño (el mecanismo más directo e inmediato), peso (de ligero a negrita), estilo (redondo versus itálico), familia (serif versus sans-serif), color, espacio (márgenes, sangría, espacio antes y después) y posición en la página.
El principio fundamental es que cada nivel jerárquico debe ser visualmente distinguible del anterior y del siguiente, pero el salto no debe ser tan grande como para romper la cohesión visual del conjunto. Una jerarquía con demasiado contraste resulta fragmentada; una con insuficiente contraste resulta indiferenciada y confusa.
Los niveles de la jerarquía
Nivel primario: titulares y cabezas
El titular es el primer punto de entrada del lector al contenido. Su función es capturar la atención, comunicar el tema central y motivar la lectura posterior. Debe destacar claramente sobre todos los demás elementos de la página. En diseño editorial, el titular puede ser el elemento más audaz del diseño; en diseño de interfaz, suele ser el componente más grande de la pantalla pero queda supeditado a la funcionalidad global.
Las decisiones para el titular incluyen: uso frecuente de serif para carácter editorial o sans-serif para modernidad funcional; peso bold o black para impacto; tamaño relativamente grande respecto al cuerpo de texto (generalmente 2.5× a 5× el cuerpo); posible uso de color de acento para el titular frente al negro neutro del resto.
Nivel secundario: subtítulos y bajadas
Los subtítulos articulan la estructura interna de los contenidos extensos, guiando al lector que escanea el texto buscando las secciones de su interés. La bajada (o deck) es el texto que sigue al titular y amplía o matiza lo dicho en él antes del cuerpo del artículo. Estos elementos ocupan el espacio de importancia media: más prominentes que el texto, menos que el titular.
Nivel terciario: texto de cuerpo
El texto de cuerpo es el corazón del contenido: todo el resto del sistema jerárquico existe para guiar hacia él y articular su lectura. Paradójicamente, es el elemento tipográfico que requiere menos intervención de diseño: su función es ser invisible, una ventana transparente hacia el contenido que contiene.
Las decisiones para el cuerpo se concentran en la selección de la fuente correcta para el contexto, el tamaño apropiado para el medio, el interlineado que favorezca la lectura y la longitud de línea óptima. Una vez establecidos estos parámetros correctamente, el texto de cuerpo debe "desaparecer" como objeto visual para convertirse en comunicación pura.
Nivel cuaternario: elementos de apoyo
Las notas al pie, los epígrafes de imágenes, los créditos, las citas marginales, los llamados a la acción, los metadatos (fecha, categoría, autor) — todos estos elementos tienen una función de apoyo que no compite con el contenido principal. Su tamaño es típicamente el más pequeño del sistema jerárquico (aunque nunca menor que el mínimo de legibilidad), con un peso más ligero o un color más tenue.
Mecanismos de diferenciación jerárquica
Escala tipográfica
La escala —la progresión de tamaños de fuente a través de los niveles jerárquicos— es el mecanismo de diferenciación más intuitivo. Las escalas modulares, basadas en proporciones matemáticas, producen sistemas con coherencia interna y armonía visual. La escala mayor (1.250), la quinta perfecta (1.500) y la proporción áurea (1.618) son las más utilizadas en diseño tipográfico.
En la práctica, las escalas puras se adaptan a las necesidades específicas del proyecto: un sistema de interfaz densa puede necesitar diferencias de escala más pequeñas que una revista de diseño con mucho espacio blanco. La escala debe calibrarse visualmente, no solo matemáticamente.
Peso tipográfico
El peso es el segundo mecanismo de diferenciación más usado. Un texto en negrita o semibold destaca sobre el mismo texto en regular sin cambiar el tamaño. El peso es especialmente útil para marcar términos importantes dentro del texto corrido (bold inline), para diferenciar elementos de interfaz como etiquetas de formulario del contenido, o para establecer jerarquía secundaria en sistemas donde los cambios de tamaño ya están comprometidos.
Espacio como jerarquizador
El espacio en blanco —márgenes, sangrado, espacio entre párrafos, espacio antes y después de títulos— es quizás el mecanismo de jerarquía más sofisticado y, en el trabajo amateur, el más descuidado. Un título de cuerpo modesto que tiene más espacio a su alrededor que el texto que lo rodea comunica su importancia sin necesidad de ser más grande o más pesado.
La regla práctica de "más espacio arriba que abajo" para los títulos —más espacio entre la sección anterior y el título que entre el título y su texto— ancla visualmente el título a su contenido siguiente, comunicando la estructura de la página de manera intuitiva.
Sistemas tipográficos cohesivos
Una jerarquía tipográfica bien ejecutada forma parte de un sistema tipográfico cohesivo: un conjunto de decisiones interrelacionadas que forman un todo coherente. Los sistemas tipográficos documentados —guías de estilo tipográfico o tokens de diseño en sistemas de diseño digital— aseguran la consistencia a través del tiempo y de múltiples colaboradores.
| Nivel | Mecanismo principal | Ejemplo de uso |
|---|---|---|
| H1 (primario) | Tamaño + peso | Titular de artículo, nombre de producto |
| H2 (secundario) | Tamaño + posición | Secciones principales del artículo |
| H3 (terciario) | Peso + espacio | Subsecciones, preguntas en FAQ |
| Cuerpo | Interlineado + longitud de línea | Texto principal de lectura |
| Apoyo | Tamaño reducido + color tenue | Captions, notas, metadatos |