ContraformaLos fundamentos del diseño, explicados

La jerarquía tipográfica

La jerarquía tipográfica es el orden de lectura que la tipografía construye dentro de un texto para que el lector sepa, sin que nadie se lo explique, qué es un titular, qué es un subtítulo, qué es el cuerpo del texto y qué es una nota.

Término

La jerarquía tipográfica

Categoría

Organización de niveles dentro de un texto

No confundir con

La jerarquía visual, que ordena también imagen, color y forma

Dónde se decide

Al definir los estilos, antes de escribir la primera página

Lámina dibujada: La jerarquía tipográfica. Cuatro niveles bastan. El quinto ya no se distingue del cuarto.
Cuatro niveles bastan. El quinto ya no se distingue del cuarto.

Se construye con cuatro recursos: tamaño, peso, caja y espacio.

La jerarquía tipográfica es un caso particular de un problema más general. La jerarquía visual ordena todo lo que hay en una pieza, incluidas la imagen, la mancha de color y la posición dentro de la retícula. La tipográfica trabaja sólo con el texto y con lo que se le puede hacer a una letra, y por eso se puede describir con exactitud: sus recursos se cuentan con los dedos de una mano.

Los cuatro recursos y qué hace cada uno

Los cuatro recursos se usan casi siempre combinados, pero conviene entender qué aporta cada uno por separado, porque tienen alcances distintos.

RecursoCómo se aplicaQué distancia de lectura alcanza
TamañoCuerpo en puntos, de 1/72 de pulgada o 0.3528 mm cada unoSe ve desde lejos, antes de leer
PesoRedonda, seminegra, negra dentro de la misma familiaSe ve a media distancia, en el bloque
CajaVersales, versalitas, altas y bajasSe ve en la línea
EspacioBlanco antes y después, sangría, interlineadoSe ve como agrupación, no como signo

El espacio es el recurso que menos se usa y el que más rinde. Separar un subtítulo del párrafo anterior con más blanco del que lo separa del párrafo que introduce ya construye un nivel completo, sin cambiar el tamaño ni el peso, porque el lector agrupa lo que está cerca antes de leer nada. Es el principio de proximidad de la Gestalt, formulado como principio de agrupación en 1923, aplicado a un texto.

Cuántos niveles admite una pieza

Una pieza admite entre tres y cinco niveles tipográficos, y pasar de ahí deja de producir orden. Con tres, título, texto y pie, se resuelve un cartel. Con cuatro o cinco se resuelve un libro entero o una interfaz. A partir del sexto el lector ya no distingue si un texto es más importante que otro, y lo que percibe es ruido.

La razón es aritmética. Cada nivel tiene que diferenciarse del anterior lo bastante para que la diferencia se lea como intencional, y el rango de tamaños utilizable no es infinito: en una hoja A4 de la serie ISO 216, que mide 210 × 297 mm, por abajo lo limita lo que se puede leer y por arriba lo limita el ancho de la columna. Cuando faltan niveles, la salida no es agrandar más sino cambiar de recurso, pasando del tamaño al peso o del peso al espacio.

La escala: por qué los tamaños no se eligen uno por uno

Una escala tipográfica es la serie cerrada de cuerpos que se van a usar en toda la pieza, decidida de una vez y respetada después sin excepciones. Se elige una serie, por ejemplo cuatro o cinco valores separados por saltos que se noten, y todo lo que aparezca en la pieza toma uno de esos valores. Nada se ajusta a ojo para que quepa.

La disciplina de la escala es lo que distingue una pieza compuesta de un documento maquetado a mano. La misma lógica de sistema aparece en Univers, que Adrian Frutiger publica en 1957 con 21 variantes numeradas en una matriz de peso y anchura: la familia no ofrece infinitas opciones, ofrece un conjunto ordenado, y esa restricción es lo que hace que las combinaciones funcionen.

Las versales, las versalitas y la trampa del titular en mayúsculas

El cambio de caja es el recurso de jerarquía que más rápido se agota. Un titular compuesto todo en versales gana presencia y pierde una parte del dibujo de la palabra, porque desaparecen las ascendentes y las descendentes que le daban perfil: la b, la l, la p y la g dejan de sobresalir y el bloque se vuelve un rectángulo. Para tres palabras eso no es un problema. Para una frase larga sí lo es, y por eso los titulares extensos en versales cuestan más de leer.

Las versalitas son la solución intermedia y están hechas para eso. Una versalita bien dibujada es una mayúscula ajustada a la altura de x, con el trazo compensado para que no se vea más fina. Conviene usar las que trae la familia, porque una versalita fabricada reduciendo las mayúsculas queda con el trazo más delgado que el texto que la rodea y se nota. Un texto todo en versales necesita además más tracking, ya que el espaciado de las mayúsculas está calculado para que convivan con minúsculas. Y cuando la familia trae suficientes variantes, como las 21 de Univers, el cambio de caja deja de hacer falta para construir un nivel.

La jerarquía en pantalla, donde el lector manda

En pantalla la jerarquía tiene que sobrevivir a dos cosas que en papel no ocurren: el ancho cambia y el lector puede agrandar el texto desde el sistema. El diseño responsivo, cuyo planteamiento publica Ethan Marcotte en A List Apart en 2010, obliga a definir la jerarquía como una relación entre niveles y no como una lista de tamaños fijos. Si el titular es grande porque mide un número concreto de puntos, en una pantalla estrecha se rompe; si es grande porque guarda una proporción con el texto, aguanta.

Hay además una condición que en papel no existe. Los niveles tipográficos de una interfaz tienen que seguir distinguiéndose en todos los estados de un componente, que son reposo, hover, foco, activo, inhabilitado, carga y error, y también cuando el color no está disponible como señal. Por eso una jerarquía que depende del color no es una jerarquía tipográfica: es un adorno que se apaga en cuanto cambia el contexto.