Interlineado en sistemas fluidos

Cuando los tamaños de fuente se deslizan con el viewport, el interlineado tiene tres formas de responder: multiplicadores sin unidad que escalan con el tamaño que haya en cada momento, múltiplos de línea base basados en rem que viajan sobre el mismo clamp de la raíz y bloquean la proporción entre tamaño e interlineado durante todo el deslizamiento, o clamps por valor que dejan que el interlineado siga su propia curva. La mayoría de los sistemas fluidos necesitan la respuesta intermedia, unos pocos estilos de display se ganan la tercera, y saber cuál es cuál evita que la tipografía fluida se descosa en vertical. Esta es la pieza específica del interlineado de nuestra guía de tipografía fluida; lo que el interlineado debe ser en cada tamaño es territorio de la escala tipográfica — este artículo trata de lo que debe hacer mientras los tamaños se mueven.

¿Qué le pasa al interlineado si no haces nada?

Depende de la unidad, y esa diferencia es todo el tema. Un interlineado declarado en px se queda quieto mientras su texto se desliza — un encabezado que crece de 28px hacia 31,5px dentro de una línea fija de 36px se aprieta visiblemente a medida que el viewport se ensancha, y pasado cierto ancho el interlineado que parecía generoso en un móvil se lee apretado en un escritorio. Nadie eligió esa compresión; es el resultado por defecto de mezclar una cantidad fluida con una congelada — la misma deriva que justifica el espaciado fluido, ocurriendo dentro del propio bloque de texto.

Así que la pregunta real no es si el interlineado debe responder al deslizamiento — debe hacerlo — sino qué mecanismo lo lleva.

¿Cuándo bastan los multiplicadores sin unidad?

line-height: 1.5 se calcula respecto al propio tamaño de fuente del elemento, así que se desliza automáticamente: 1,5 de 16px en un móvil, 1,5 de 18px en una pantalla ancha, 1,5 de cada valor intermedio. Para el texto de cuerpo esto es simple y correcto — la forma sin unidad además se hereda de forma segura, y por eso ha sido la recomendación estándar durante años.

El coste aparece a lo largo de la escala, no dentro de un mismo tamaño. El texto grande quiere un interlineado proporcionalmente más ajustado que el de cuerpo — la curva dependiente del tamaño que todo sistema tipográfico codifica — así que un único valor sin unidad para toda la página está mal en los extremos, sea cual sea el modo fluido. Los valores sin unidad por nivel (1,5 para cuerpo, 1,3 para encabezados, 1,1 para display) arreglan eso y siguen deslizándose. Lo que los valores sin unidad no pueden darte es un ritmo compartido: el interlineado de cada elemento es una proporción privada, y ninguna unidad común ata entre sí las alturas del bloque de texto.

¿Cómo se comportan los múltiplos de línea base basados en rem en un deslizamiento?

Este es el enfoque de Scale Composer, y tiene una propiedad que vale la pena explicar. Los interlineados del sistema son múltiplos de línea base expresados en rem — el cuerpo de 16px se asienta sobre una línea de 24px escrita como 1.5rem, la línea de 36px de un encabezado es 2.25rem. En modo fluido, el tamaño de fuente de la raíz lleva el deslizamiento y cada valor en rem viaja sobre él — tanto los tamaños como los interlineados. Tanto el numerador como el denominador escalan por el mismo factor, así que la proporción entre un tamaño y su interlineado queda bloqueada en cada ancho de viewport.

Trazado en concreto — un encabezado de 1.75rem sobre una línea de 2.25rem, con la base deslizándose de 16→18 a lo largo de viewports 360→1280:

La proporción que fijó el diseñador es la proporción que recibe cada lector, sea cual sea la pantalla — y como todos los interlineados son múltiplos de la misma línea base basada en rem, la propia unidad de ritmo se desliza: la línea base de 8px mide 8px en el extremo estrecho y 9px en el extremo ancho, y cada bloque de texto sigue contando unidades enteras de ella. El ritmo vertical sobrevive al modo fluido escalando, no rompiéndose.

Abre un sistema fluido con la columna de interlineado visible — tamaños e interlineados ambos en rem, viajando sobre un único clamp de la raíz, con las proporciones quietas mientras el simulador de viewport se mueve.

¿Cuándo merece el interlineado su propio clamp?

Cuando un estilo debe cambiar su carácter a lo largo del deslizamiento, no solo su tamaño. El caso clásico es el texto de display: un encabezado hero que crece de 28px en móviles a 48px en escritorios probablemente quiere que su interlineado se ajuste a medida que crece — el texto grande se lee como una forma, y las formas quieren menos aire. Un clamp por valor expresa eso: el tamaño se desliza de 28→48px mientras el interlineado se desliza de 32→52px,

h1 {
  font-size: clamp(1.75rem, 1.2609rem + 2.1739vw, 3rem);     /* 28 → 48px */
  line-height: clamp(2rem, 1.5109rem + 2.1739vw, 3.25rem);   /* 32 → 52px */
}

y la proporción cae a lo largo del deslizamiento por diseño: 32/28 ≈ 1,14 en el extremo estrecho, 52/48 ≈ 1,08 en el extremo ancho (ambas expresiones verificadas en los dos extremos). Esa proporción decreciente es inalcanzable con valores sin unidad o múltiplos de línea base — ellos mantienen las proporciones; esta curva dobla una.

El coste es el habitual de trabajar por valor: dos clamps por estilo que mantener coherentes, y un interlineado que ya no aterriza sobre la línea base compartida. El consejo honesto: resérvalo para el uno o dos estilos de display donde el cambio de carácter es el objetivo, y deja que la maquinaria de proporción bloqueada lleve todo lo demás.

¿Qué mecanismo para qué texto?

• Texto de cuerpo y de interfaz — múltiplos de línea base en rem (proporciones bloqueadas, ritmo compartido) o valores sin unidad por nivel si el ritmo no es un objetivo. Cualquiera se desliza correctamente; el camino del rem además mantiene viva la rejilla de línea base.
• Encabezados — múltiplos de línea base, con las proporciones más ajustadas por nivel que la escala tipográfica ya asigna. El deslizamiento preserva la curva que hayas fijado.
• Display — el único candidato a tener su propio clamp de interlineado, cuando de verdad se quiere una proporción que se doble a lo largo del deslizamiento.

Comprueba tus propias proporciones a lo largo del deslizamiento

El modo de fallo que este artículo existe para prevenir es silencioso: un interlineado que deriva mientras todo el mundo mira los tamaños de fuente. Abre el sistema fluido y lee la proporción en tres anchos — arrastra el simulador de viewport al mínimo, al punto medio y al máximo, y comprueba que la proporción entre tamaño e interlineado de cada nivel es la que elegiste. Si una proporción se mueve y no diseñaste ese movimiento, la unidad — no el valor — es donde vive el arreglo.