¿Qué es el ritmo vertical (y merece la pena)?

El ritmo vertical es la práctica de hacer que las distancias verticales de una página — interlineados, huecos entre párrafos, márgenes de encabezado — sean múltiplos de una misma unidad compartida, de modo que las líneas de texto vuelvan a un intervalo constante a lo largo de la página. Con una base de 16px la unidad suele ser 8px: las líneas del cuerpo caen cada 24px, un encabezado ocupa una línea de 48px y los huecos entre bloques miden 16, 24 o 32px. ¿Merece la pena? En su forma pragmática — interlineados y márgenes verticales sobre la unidad — sí, y a bajo coste. En su forma estricta de imprenta — cada línea base de glifo clavada a una rejilla global — rara vez en la web.

Este artículo forma parte de nuestra guía de la escala tipográfica. Cubre qué hace el ritmo por el lector, cómo construirlo con números reales, de dónde viene el término y dónde se tuerce la curva de coste.

¿Por qué funciona el ritmo vertical en un lector?

El lector nunca ve la rejilla. Lo que percibe es el regreso: leer es un movimiento repetitivo en el que el ojo recorre una línea, desciende y empieza de nuevo, y cuando cada descenso es la misma distancia — o un múltiplo limpio de ella — el movimiento se vuelve predecible y se retira de la conciencia. Cuando cada bloque fija su propio espaciado, en cambio, cada transición exige una pequeña recalibración. Una analogía útil viene de la música: un baterista constante desaparece dentro de la canción, y solo notas el pulso cuando tropieza. El ritmo no hace que una página esté más decorada; la hace más silenciosa, y el silencio es lo que necesita la lectura larga. Por eso el efecto es fácil de sentir y difícil de señalar: el lector percibe aplomo sin poder nombrar su fuente.

¿Cómo se construye el ritmo vertical con números reales?

Deriva una unidad de línea base de la mitad del tamaño de fuente base — 8px sobre una base de 16px — y luego aplica dos reglas: los interlineados son múltiplos enteros o medios de la unidad, y los márgenes verticales son múltiplos enteros. Aquí tienes una pila de encabezado más cuerpo sobre una base de 16px con tamaños de cuarta justa:

El total es un número entero de unidades, y también lo es cada límite intermedio — así que lo que siga a la pila empieza en el pulso, sin importar cómo se reajuste el contenido de arriba. Esa aditividad es todo el truco: el ritmo no es una propiedad que pintes al final, sino una consecuencia de que cada altura sea múltiplo del mismo número.

Scale Composer construye ambas mitades a partir de un solo sistema: los interlineados se ajustan a la línea base de base ÷ 2, y los pasos de espaciado derivan de la misma escala — de modo que los márgenes y los interlineados comparten un origen en lugar de ser dos conjeturas separadas.

Abre la pila en Scale Composer — encabezado, cuerpo y lista sobre una base de 16px con la línea base de 8px detrás del texto; cuenta la altura de cualquier bloque en líneas de la rejilla y sale entera.

Una advertencia honesta: las imágenes, los embeds y los controles de formulario llegan con alturas arbitrarias. O bien redondeas las alturas de los medios a la unidad, o dejas que cada sección reinicie el ritmo en su borde superior — muchos sistemas pragmáticos hacen lo segundo y aceptan que el ritmo vive dentro de las secciones en lugar de a través de toda la página.

¿De dónde viene el término “leading”?

Contexto histórico, útil de tener porque el vocabulario sobrevivió a la mecánica: en la impresión tipográfica, el espacio entre líneas se ajustaba con tiras físicas de plomo insertadas entre las filas de tipos metálicos — de ahí leading, todavía el término estándar en inglés para el espaciado entre líneas. La física hacía automático el ritmo: las líneas de tipos en una columna se apilaban a alturas idénticas, así que las columnas contiguas se alineaban por construcción, no por disciplina. La web heredó la palabra pero no la física — CSS distribuye el espacio extra por encima y por debajo del texto (medio interlineado), y nada se ajusta a nada por defecto. Por eso el ritmo vertical en la web es una decisión de recrear una propiedad que la imprenta obtenía gratis.

¿Merece la pena la alineación estricta a la línea base en la web?

La versión estricta — líneas base de glifo clavadas a una rejilla global de página, como en una revista impresa — pelea con la forma en que CSS maqueta el texto. Una caja de línea centra su contenido verticalmente: el espacio extra se reparte por encima y por debajo de los glifos, y dónde cae realmente la línea base depende de las métricas de la fuente, que difieren entre tipos de letra y sus fuentes de reserva. Clavar las líneas base implica, por tanto, correcciones de desplazamiento por fuente, compensaciones de relleno y reajustes cada vez que una fuente web carga tarde o sustituye a una fuente de reserva. Las técnicas existen, pero son frágiles precisamente en los lugares donde la web se mueve: reajuste responsive, ajustes de fuente del usuario, contenido embebido.

Y el beneficio es menor que en la imprenta. El argumento más fuerte a favor de la alineación estricta son las columnas de texto situadas directamente una junto a otra, donde una línea base desalineada se ve en el medianil — común en revistas, más raro en maquetaciones web. En la práctica, la mayor parte de la estabilidad percibida viene de las dos decisiones baratas: interlineados y márgenes verticales como múltiplos de la unidad. La versión pragmática conserva esas y se salta la cara y sutil. Si estás construyendo una maquetación editorial genuinamente multicolumna, el cálculo cambia y la estrictez empieza a pagar su alquiler; para la mayoría de los productos, no.

Escucha el pulso rompiéndolo

La forma más rápida de decidir cuánto vale el ritmo para tu producto es una comparación: abre la misma pila con el ritmo roto — interlineados como multiplicadores por elemento sin relación entre sí, en lugar de múltiplos de la línea base — y alterna entre las dos. Si tu producto tiene mucho texto, la diferencia suele ser fácil de sentir y difícil de articular; esa sensación es la calidad que compra la unidad. Luego toma las reglas pragmáticas — unidad de base ÷ 2, interlineados y márgenes sobre ella — y deja la rejilla estricta para la imprenta.