Estilos display vs título vs cuerpo explicados

Toma una frase — Lanza interfaces en las que la gente confía — y compónla de tres maneras. A 51px, peso 700, espaciado entre letras de −0,02em, interlineado 1,1, es una declaración: la lees antes de decidir hacerlo. A 28px, peso 600, interlineado 1,3, es una señal: la registras mientras haces scroll, decidiendo si detenerte. A 16px, peso 400, interlineado 1,5, se acomoda en un párrafo y espera su turno. Las mismas palabras, tres trabajos distintos.

Esos tres trabajos definen las tres familias de roles de texto en un sistema tipográfico: los estilos display venden (declaraciones hero, leídas de un vistazo), los estilos de título navegan (orientación, leídos mientras escaneas) y los estilos de cuerpo transportan (lectura sostenida, de varias líneas). Cada familia recibe su propio tratamiento — no solo versiones más grandes o más pequeñas de un mismo estilo — porque cada una está optimizada para un acto de lectura distinto. Este artículo recorre los tres trabajos, los ajustes que se derivan de ellos y por qué el display no es simplemente un h1 más grande. Forma parte de nuestra guía de escalas tipográficas.

¿Para qué sirve un estilo display?

Para vender — en sentido amplio: hacer que una declaración cale antes de que el lector se haya comprometido a leer nada. Un titular hero, la cifra de una página de precios, la disculpa de una página 404. El texto display se lee de un solo vistazo, normalmente una vez, y casi nunca en cantidad — una pantalla lleva una declaración display, rara vez dos.

Los ajustes se derivan del trabajo. Los tamaños son los más grandes de la escala (de 44px en adelante; 51px en el ejemplo trabajado más abajo). El interlineado baja a alrededor de 1,1, porque una declaración display de dos líneas con el interlineado propio del cuerpo se descompone en dos declaraciones separadas — de un vistazo, las líneas deben leerse como una sola forma. El espaciado entre letras se aprieta hasta cerca de −0,02em, ya que el espaciado propio de una fuente se lee suelto cuando se amplía mucho más allá de los tamaños de lectura. El peso suele ser 700 o más pesado: a estos tamaños hay píxeles suficientes para que los trazos gruesos mantengan sus contraformas abiertas, y la oscuridad le da autoridad a la declaración.

¿Qué hacen los estilos de título que el display no hace?

Los títulos navegan. Existen para que un lector que hace scroll por una página pueda reconstruir su estructura sin leerla — en qué sección estoy, qué viene después, dónde está la parte que necesito. Eso significa que los títulos se leen de forma comparativa: un h2 importa sobre todo por ser visiblemente más grande que un h3 y visiblemente más pequeño que el h1, así que los tamaños de título vienen en una serie jerarquizada (21, 28, 38px en la escala trabajada) en lugar de como un solo tamaño.

Como un título puede ser lo bastante largo como para saltar de línea, su interlineado se mantiene cómodo para la lectura — en torno a 1,3 — y su espaciado entre letras se aprieta solo con suavidad (de 0 a −0,015em a medida que crecen los tamaños). Los pesos se sitúan en 600–700: lo bastante oscuros para posicionarse por encima del cuerpo de un vistazo, lo bastante contenidos para que seis títulos en una página no se griten entre sí. Un título es una señal, y una señal que exige ser admirada está fallando en su trabajo.

¿Qué hace diferente al texto de cuerpo?

El cuerpo carga con la lectura de verdad — muchas líneas, atención sostenida, el ojo volviendo a la izquierda unos cientos de veces por página. Todo en un estilo de cuerpo sirve a ese barrido de retorno. El tamaño se sitúa en el rango para el que se diseñaron las fuentes (14–18px; 16px es el valor por defecto habitual). El interlineado se abre hasta alrededor de 1,5, porque el canal en blanco entre líneas es lo que permite al ojo encontrar el inicio de la siguiente sin tropezar. El peso se mantiene en 400 — el grosor de trazo con el que se dibujó el tipo de letra para leerse — y el espaciado entre letras se mantiene en cero, porque las fuentes ya están espaciadas para este rango de tamaños.

Es también la familia donde la contención más se paga: el texto de cuerpo es la mayoría de las palabras en casi cualquier pantalla, así que cualquier rareza en el estilo es una rareza con la que el lector tiene que convivir durante párrafos enteros.

¿Cómo se comparan las tres familias?

* Los rangos son típicos del trabajo de interfaces; los valores entre paréntesis provienen de una escala modular con base de 16px a razón 1,333 con dos notas por intervalo. En esa escala, con los interlineados ajustados a la rejilla de línea base de 8px (la mitad de la base): display 51/56, heading-lg 38/48, heading-md 28/36, body 16/24, caption 12/16.

Lee la tabla por columnas y el patrón se revela: al bajar de display a leyenda, el interlineado sube mientras el tamaño baja, y el espaciado entre letras oscila de negativo a positivo. Las tres familias no son tamaños de un mismo estilo — son tres estilos que da la casualidad de que comparten un tipo de letra.

Mira las tres familias en un solo sistema: abre este conjunto de roles en Scale Composer — el display, la serie de títulos, los tamaños de cuerpo y la leyenda uno al lado del otro, cada uno con el interlineado, el peso y el espaciado entre letras que su trabajo pide. Compara directamente el interlineado de 1,1 del nivel display con el 1,5 del cuerpo.

¿Por qué el display no es solo un h1 más grande?

Porque el trabajo del h1 sigue siendo la navegación — es la cima de la serie de orientación, y obedece las convenciones de la serie: interlineado de título, lógica de peso de título, un tamaño que se posiciona en relación con el h2. El display se sitúa por encima de esa serie y rompe sus convenciones a propósito: interlineado más apretado, espaciado entre letras más apretado, a menudo un peso más pesado — ajustes que estarían mal en cualquier punto de la propia serie de títulos.

La distinción se gana su sitio en la práctica. Estira la serie de títulos para cubrir un hero de 51px y o bien le das al hero el interlineado propio de un título (se descompone en dos líneas) o bien doblegas en silencio el estilo del h1 hasta que deja de coincidir con sus hermanos. Mantener display como su propio rol permite que ambos estén bien — y ten en cuenta que display es un estilo, no un elemento: un hero de marketing con estilo display normalmente se sigue marcando como h1, porque el rol visual y la estructura del documento son decisiones separadas. Los sistemas tipográficos de plataforma trazan la misma línea — las Human Interface Guidelines de Apple definen un rol Large Title por encima de la serie de títulos, con roles de cuerpo, nota al pie y leyenda por debajo, reflejando esas mismas tres familias.

¿Dónde encajan las leyendas y los antetítulos?

Son los hermanos callados del cuerpo — más pequeños que el tamaño de lectura, usados para metadatos, marcas de tiempo, etiquetas de tabla y créditos de imagen. Una leyenda es texto pequeño en minúsculas: conserva el peso del cuerpo, gana un toque de espaciado entre letras (+0,02em) para mantenerse abierta a 12px, y a menudo baja de nivel en color en vez de en peso. Un antetítulo es la variante en mayúsculas — la pequeña etiqueta sobre el título de una tarjeta — y las mayúsculas en tamaños pequeños necesitan aire de verdad: +0,08em y un peso 500 para que sus trazos sobrevivan al tamaño. Ninguno pertenece a la serie de títulos; se posicionan por debajo del cuerpo, no por encima.

Construye el conjunto mínimo

La mayoría de los productos necesita menos estilos de los que cree: abre un conjunto mínimo de roles — un display, dos títulos, un cuerpo, una leyenda — y pruébalo contra tu pantalla más compleja. Añade un estilo solo cuando dos roles existentes chocan de verdad, y deja que cada añadido herede la lógica de su familia: interlineados de título para los títulos, interlineados de lectura para el cuerpo. Los tres trabajos — vender, navegar, transportar — son la lista de comprobación; si un estilo propuesto no se corresponde con uno de ellos, probablemente es una variante de un estilo que ya tienes.