Jerarquía y escala tipográfica

Elige un cuerpo base y una sola razón, luego multiplica hacia arriba y hacia abajo para que cada paso se relacione con el anterior. Las razones comunes son 1.2 (tercera menor), 1.25 (tercera mayor) y 1.333 (cuarta justa); a mayor razón, saltos más dramáticos. Una escala de 5 a 7 tamaños cubre todo el documento y se lee armónica, no arbitraria.

La jerarquía tiene cinco palancas: tamaño, peso, color/valor, espacio y caja. Apoyarte solo en el tamaño obliga a que cada nivel sea enorme para distinguirse. Una etiqueta pequeña en negrita, versal y con tracking puede pesar más que una palabra mayor y ligera, así que combina dos o tres palancas por nivel y mantén moderados los saltos de tamaño.

Usa como máximo dos familias, una display/titular y una de texto corrido, o una sola superfamilia con cortes serif y sans diseñados para convivir. Más de dos familias se lee como ruido y multiplica el trabajo de embebido y licencia. Un default seguro es una serif de buen contraste para el texto y una sans neutra para etiquetas y pies.

En impresión, el cuerpo ronda los 9-12pt según la altura x de la fuente y la medida; los libros trade suelen usar 10-11pt serif, mientras que una sans de altura x grande lee bien a 9-10pt. En pantalla el equivalente es 16-20px. Fija primero el cuerpo y de ahí deriva cada titular, nunca al revés.

Cada nivel de titular (H1 > H2 > H3) necesita un escalón inequívoco hacia abajo y una regla de espacio coherente: más aire arriba del titular que abajo, para que se ligue al texto que introduce. Si H2 y H3 se ven casi iguales, el lector pierde el esquema. Dos o tres niveles bastan para la mayoría de los documentos.

Pies de foto, créditos, notas al pie y folios van por debajo del cuerpo, alrededor de 7-8pt en prensa, pero deben quedar legibles: no los hundas en un gris de bajo contraste ni en un peso ligero que desaparece. Dales su propio estilo consistente para que se lean como una capa distinta y subordinada, no como cuerpo encogido.

Un titular pertenece a la misma medida y borde izquierdo que el párrafo que abre; cuando flota fuera de la retícula o cuelga sangrado, se rompe la conexión. Da el mismo margen izquierdo a titulares y cuerpo, y ánclalos al baseline grid para que la primera línea de texto caiga en ritmo. Centrado óptico, no flotante, para el raro titular centrado.

Cuando falta el corte bold o italic real, el motor lo inventa: el faux-bold engrosa el contorno con un trazo sintético y el faux-italic solo inclina las astas. Ambos se ven sucios y pueden romper en el export a PDF. Embebe los archivos reales 700 e italic de la familia, y usa font-synthesis: none para que un corte faltante falle en voz alta en vez de fingirse.

Para pulido editorial, compón siglas y énfasis en texto corrido con versalitas reales (OpenType smcp), no capitales encogidas, que quedan ligeras y descompensadas. Usa numerales oldstyle (de texto) dentro de la prosa para que los números se sienten en la línea base con astas y descendentes como las minúsculas; reserva los lining para tablas y versales. Actívalos con font-feature-settings o font-variant.

Un nivel dado debe verse exactamente igual en todas las páginas: mismo tamaño, peso, color y espaciado. Define cada estilo una vez (un estilo de párrafo o una clase CSS) y reúsalo, nunca vuelvas a teclear tamaños a mano. La deriva, donde un H2 mide 18px y otro 20px, erosiona en silencio el mapa que el lector arma del documento.

Diseña la jerarquía en escala de grises, usando solo tamaño, peso y espacio, antes de agregar un solo color de acento. Si los niveles solo se distinguen por color, el documento colapsa en impresión B/N, para lectores daltónicos y en fotocopias. El color debe reforzar una jerarquía que ya se lee, nunca cargarla solo.