Interlineado: el método de la rejilla de línea base

Hay un momento familiar en el front-end: dos tarjetas están una al lado de la otra, construidas a partir del mismo componente, y un bloque de texto termina unos píxeles más abajo que su vecino. En el inspector no hay nada mal. Ajustas un margen, el par se alinea, y el desfase reaparece dos pantallas más adelante en otra combinación. La causa no suele ser un estilo perdido sino la aritmética: interlineados elegidos como multiplicadores sin relación entre sí —1,4 aquí, 1,5 allá, 1,3 en los títulos— producen alturas de bloque que no comparten ningún divisor común, así que los bloques solo se alinean por casualidad.

El método de la rejilla de línea base sustituye las conjeturas de interlineado por elemento con una sola regla: deriva una unidad de línea base igual a la mitad del tamaño de fuente base —8px con una base de 16px— y elige cada interlineado como un múltiplo entero o medio de esa unidad. El texto de cuerpo pasa a ser 16px sobre una línea de 24px (3 unidades), un título de 32px se asienta en una línea de 40px (5 unidades), una leyenda recibe una línea de 20px (2,5 unidades). La altura de cada bloque de texto es entonces un múltiplo de la misma unidad, de modo que las distancias verticales suman en lugar de acumular error.

Este artículo forma parte de nuestra guía de la escala tipográfica. Una escala modular responde qué tamaños existen; la unidad de línea base responde en qué líneas se asientan.

¿Por qué los interlineados por elemento no cuadran?

Los multiplicadores sin unidad son buen CSS: line-height: 1.5 se hereda de forma más segura que los porcentajes o los valores fijos. El problema no es la sintaxis sino cómo se eligen los valores. Multiplica un conjunto de decisiones razonables por separado y aparecen casi-aciertos por todas partes:

• 16px de cuerpo × 1,5 → 24px
• 21px de entradilla × 1,5 → 31,5px
• 28px de título × 1,3 → 36,4px
• 14px de leyenda × 1,4 → 19,6px

Cada valor es defendible por sí solo. Juntos no comparten ningún divisor común, así que dos pilas construidas con ellos se desvían entre sí por fracciones de línea, que es exactamente ese efecto de quedar desfasado por unos pocos píxeles. Los valores fraccionarios lo empeoran: 31,5px se redondea de forma distinta según el nivel de zoom y la densidad de píxeles del dispositivo, así que la desviación ni siquiera es estable.

Sobre una línea base de 8px las mismas decisiones se vuelven 24px (3 unidades), 32px (4 unidades), 36px (4,5 unidades) y 20px (2,5 unidades). Todavía puedes escribir los resultados como números sin unidad en CSS (24 ÷ 16 = 1,5); lo que cambia es que cada valor se eligió sobre la rejilla en lugar de adivinarse por elemento.

¿Cómo funciona el método de la rejilla de línea base?

Dos decisiones sustituyen todas las conjeturas. Primero, la unidad: la mitad del tamaño de fuente base, así que una base de 16px da una unidad de 8px. La mitad de la base en lugar de la base entera porque una rejilla de base completa es demasiado gruesa: alrededor de un título de 38px, una rejilla de 16px solo ofrece una línea de 32px o de 48px, mientras que una rejilla de 8px ofrece 40px y 48px. Los múltiplos medios (pasos de 4px) siguen disponibles donde el texto pequeño necesita un control más fino. Segundo, la regla: cada interlineado es un múltiplo entero o medio de la unidad, nunca un valor libre.

Scale Composer deriva esto automáticamente: la unidad de línea base es base ÷ 2, y cada interlineado de la escala se ajusta a un múltiplo de ella. Cambia la base a 18px y la unidad pasa a ser 9px; cada interlineado se reajusta a la nueva rejilla.

Míralo en una escala real: abre la vista de línea base en Scale Composer — una escala de cuarta justa sobre una base de 16px, cada tamaño emparejado con un interlineado que es un múltiplo de la unidad de 8px. Arrastra la razón y observa cómo los interlineados se reajustan a la rejilla en lugar de derivar hacia valores fraccionarios.

¿El texto más grande debería tener un interlineado más ajustado?

Sí, y el texto más pequeño más suelto. Un único multiplicador para toda la página aplana una curva que la lectura realmente necesita. Este es el rango completo sobre una base de 16px, cuarta justa, con los interlineados elegidos como múltiplos de la línea base:

El multiplicador efectivo cae de 1,67 a 1,18 a medida que crece el tamaño. El porqué es perceptual. El texto de cuerpo se lee línea tras línea: el ojo viaja hasta el final de una línea y tiene que encontrar el comienzo de la siguiente, y ese viaje de vuelta necesita aire —más aire cuanto más largas sean las líneas—. Un titular es distinto: son una o dos líneas leídas como una sola forma, y con el espaciado del texto de cuerpo se descompone —un h1 de 51px a 1,5 quedaría sobre líneas de 76px, y el hueco entre ellas se lee como un agujero—. El texto pequeño invierte otra vez la lógica: a 12px las formas de las letras ya están apretadas, así que un interlineado ajustado hace que las leyendas densas se apelmacen; necesitan proporcionalmente más aire, no menos.

La rejilla expresa esta curva de forma natural, porque eliges unidades por tamaño en lugar de un solo multiplicador para todo.

¿Cuál es el mínimo de accesibilidad para el interlineado?

El criterio de espaciado de texto (1.4.12) de las WCAG exige que una página no pierda contenido ni funcionalidad cuando una persona lectora fuerza el interlineado a 1,5 veces el tamaño de fuente, entre otras sobreescrituras de espaciado. De ahí se derivan dos consecuencias para la rejilla. Primero, el texto de cuerpo a 3 unidades —24px sobre 16px, un 1,5 efectivo— ya se sitúa en el nivel que el criterio comprueba, que de por sí es un mínimo razonable para una lectura de cuerpo cómoda. Segundo, el criterio trata de sobrevivir a las sobreescrituras del usuario, no de los valores de autoría: los títulos más ajustados que 1,5 están bien, pero los contenedores de texto de altura fija que recortan cuando crece el espaciado no lo están. Una rejilla de línea base disciplina tus valores; no exime al diseño de ser probado con el espaciado aumentado.

Pon tus interlineados sobre la rejilla

Parte de tu tamaño de cuerpo, divídelo por la mitad y lee el resto de la rejilla en lugar de adivinarlo. Para sentir cómo el sistema sigue a la base, abre una variación ajustada a la lectura en Scale Composer — una base de 18px, así que la unidad pasa a ser 9px y el texto de cuerpo se asienta en una línea de 27px, 3 unidades de un ritmo algo mayor. Luego devuelve la base a la de tu propio producto y toma los interlineados que la rejilla ofrece: los debates por elemento desaparecen, y también el píxel que siempre estaba desfasado.