Rejilla de línea base vs rejilla de 8pt: la diferencia

Una rejilla de línea base y una rejilla de 8pt cuantizan cosas distintas. La rejilla de línea base cuantiza el ritmo del texto: las líneas horizontales invisibles sobre las que se asientan las líneas de tipografía. La rejilla de 8pt cuantiza el espacio: la distancia a la que se sitúan los elementos entre sí y el tamaño que tienen. Responden a dos preguntas diferentes, y se combinan limpiamente cuando la línea base se deriva del tamaño del texto de cuerpo.

Este artículo explica qué controla cada rejilla, cómo hacer que ambas compartan un único cuanto, y cuánto de la tradición impresa sobrevive de forma realista al contacto con CSS. Es un rincón de los fundamentos más amplios del espaciado.

¿Qué controla una rejilla de línea base?

En tipografía, la línea base es la línea invisible sobre la que reposan las letras. Una rejilla de línea base repite esa línea a un intervalo fijo por la página —cada 8px, por ejemplo— y pide que cada línea de texto caiga sobre una de esas repeticiones. Es una herencia de la composición impresa, donde las columnas dispuestas una junto a otra tenían que alinearse línea por línea, y el texto impreso al dorso de una página fina se transparentaba menos cuando sus líneas quedaban justo detrás de las del anverso.

La rejilla de línea base gobierna la dimensión vertical de la tipografía: los interlineados, las alturas que acaban teniendo los bloques de texto y el intervalo constante con el que reaparecen las líneas de tipografía. No dice nada sobre el espaciado horizontal, ni sobre los elementos que no son texto.

¿Qué controla en cambio la rejilla de 8pt?

El espacio entre las cosas y a su alrededor: márgenes, relleno, huecos y tamaños de componentes como múltiplos de 8. Es indiferente al ritmo del texto: una tarjeta puede tener un relleno perfectamente ajustado a la rejilla de 8 mientras el párrafo que contiene corre con un interlineado de 22px que no aterriza en ningún sitio en particular. Una rejilla decide a qué distancia se sitúan las cosas; la otra decide dónde vuelven las líneas de texto. Ninguna implica la otra, y por eso un equipo puede adoptar la rejilla de 8pt y aun así publicar páginas sin ningún ritmo vertical.

¿Cómo se combinan las dos rejillas?

Derivando la unidad de línea base del tamaño del texto de cuerpo: la mitad de ese tamaño es una convención habitual. Un texto de cuerpo a 16px da una línea base de 8px, y ahora ambas rejillas comparten un mismo cuanto: el espaciado del layout corre en múltiplos de 8, y los interlineados también. En Scale Composer esa derivación viene integrada —la línea base es la mitad de la base—, de modo que el mismo número que genera los pasos de espaciado fija la unidad de ritmo.

Así se ve con los tamaños de tipografía tomados de una escala (base 16, ratio 2, dos notas por intervalo):

Cada interlineado y cada margen vertical es un múltiplo de 8, así que cualquier pila de estos estilos suma un número entero de unidades de línea base: texto y layout siguen siendo conmensurables sin importar cómo se combinen.

Abre esta escala con su línea base en Scale Composer — la base de 16px deriva la línea base de 8px, mostrada junto a los tamaños de tipografía que genera la misma escala, para que puedas comprobar cada interlineado contra la unidad de ritmo.

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

En su mayor parte no, no en el sentido de la imprenta, y vale la pena ser honesto sobre por qué. CSS construye el texto a partir de cajas de línea: la tipografía se centra dentro de su interlineado, con el espacio sobrante repartido arriba y abajo, en lugar de asentarse sobre una línea base que puedas fijar. Forzar líneas base reales sobre una rejilla global exige una aritmética de desfases por estilo que depende de las métricas de la fuente —aritmética que hay que rehacer cada vez que cambia un tipo de letra, un tamaño o un valor por defecto del navegador.

El término medio pragmático conserva casi todo el beneficio con una fracción del esfuerzo: haz que los interlineados y los márgenes verticales entre bloques de texto sean múltiplos de la unidad de línea base. Así los bloques de texto consumen números enteros de unidades de ritmo aunque las líneas base dentro de ellos no estén fijadas una a una. El ritmo se mantiene entre los elementos —encabezados, párrafos, tarjetas, pies— que es donde de todos modos resulta más fácil de percibir.

¿Por qué importa el ritmo si los lectores no ven la rejilla?

Los lectores no perciben la rejilla en sí; lo que perciben es el retorno de la vista: terminar una línea, bajar, aterrizar en la siguiente a un intervalo constante. Cuando ese intervalo se mantiene a lo largo de párrafos, pies y elementos de lista, la página se lee como un único ritmo continuo; cuando cambia en cada límite, cada transición cuesta un pequeño reajuste de la mirada. La rejilla de línea base es un medio para esa constancia, no la cosa que se mira —y por eso la versión pragmática de arriba suele bastar. El lector experimenta los retornos, no el mecanismo que hay detrás.

Lleva el ritmo a las columnas

La disciplina de línea base cubre el eje vertical; el layout también tiene uno horizontal. Abre la vista de rejilla con la misma escala cargada — los anchos de columna, los medianiles y los márgenes recorren la misma escala que fijó la línea base, con 4 columnas en móvil, 8 en tableta y 12 en escritorio. Sube y baja un medianil por la escala y ambos ejes siguen explicados por una sola base: el ritmo vertical a partir de la mitad de ella, la estructura horizontal a partir de sus pasos.