¿Qué es la tipografía fluida?

La tipografía fluida define cada tamaño de fuente como una función del ancho del viewport: un tamaño mínimo para pantallas pequeñas, un máximo para las grandes y un deslizamiento suave y continuo entre ambos. Sustituye el modelo de breakpoints —tamaños fijos que saltan en unos pocos anchos elegidos— por un tamaño de fuente responsive que se recalcula en cada ancho intermedio.

La técnica se volvió práctica cuando CSS ganó una forma de expresar «un valor deslizante con un suelo y un techo» en una sola declaración, y se convierte en un sistema cuando esa declaración se aplica una vez, en la raíz, de modo que toda la escala tipográfica se mueve al unísono. Ambas versiones se desarrollan abajo con números reales. Este artículo es el punto de partida de nuestra guía de tipografía fluida.

¿Qué problema resuelve la tipografía fluida?

El modelo de breakpoints sirve un rango continuo de pantallas con una función escalonada. Un titular ajustado para verse bien a 1200px sigue siendo el tamaño que se muestra a 900px, donde satura las columnas más estrechas, y a 1400px, donde ya no sostiene el layout más ancho. Entre dos breakpoints cualesquiera, el diseño se aleja del ancho para el que fue ajustado; añadir más breakpoints acorta esa deriva pero multiplica el trabajo de ajuste, y cada nuevo escalón tiene bordes propios.

La versión intuitiva del problema: las pantallas son un continuo. Los dispositivos salen prácticamente en todos los anchos, desde unos 320px hasta monitores ultrapanorámicos, y un continuo servido con escalones siempre tiene bordes: anchos donde el salto se nota y tramos donde el tamaño apenas se tolera. El tipo fluido disuelve los bordes haciendo que el tamaño siga al ancho directamente: en lugar de preguntar «¿cuál de mis tres tamaños se aplica aquí?», el navegador calcula el único tamaño que corresponde a este ancho exacto.

¿Cómo funciona la tipografía fluida en CSS?

Toda la técnica cabe en una declaración usando clamp(), que toma un mínimo, un valor preferido y un máximo. El valor preferido mezcla una unidad de viewport (la parte deslizante) con un término en rem (el ancla que mantiene el zoom funcionando). Aquí tienes un titular que se desliza de 28px en un viewport de 360px a 38px a 1280px:

h2 {
  font-size: clamp(1.75rem, 1.5054rem + 1.087vw, 2.375rem);
}

Los números no son arbitrarios. El término 1.087vw es la pendiente —diez píxeles de crecimiento repartidos sobre 920 píxeles de viewport— y 1.5054rem (≈24,09px) es donde esa recta cruza el ancho de viewport cero. Compruébalo en ambos extremos: a 360px, 1.087vw es ≈3,91px, y 24,09 + 3,91 = 28px. A 1280px, 1.087vw es ≈13,91px, y 24,09 + 13,91 = 38px. Por debajo de 360px se mantiene el mínimo; por encima de 1280px se mantiene el máximo; entre ambos, el tamaño está siempre sobre la recta.

La historia detrás de esa única línea es breve. Las unidades de viewport, a principios de la década de 2010, hicieron posible que el tamaño siguiera a la pantalla, y las fórmulas con calc() que mezclaban vw con rem lo hicieron controlable. La llegada de clamp() a los principales navegadores alrededor de 2020 condensó todo el patrón en una sola declaración.

¿Qué convierte un tamaño fluido en un sistema fluido?

Escribir un clamp como el de arriba para cada tamaño de una escala funciona, pero le da a cada tamaño su propia pendiente, y una docena de pendientes calculadas de forma independiente son una docena de oportunidades para que discrepen. La versión sistemática mueve el clamp al tamaño de fuente de la raíz y expresa todos los demás tamaños en rem:

html {
  font-size: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem); /* ≈16px @360 → ≈18px @1280 */
}

(Los límites y la intersección están en rem y no en px por una razón: en el elemento raíz, rem se resuelve contra la preferencia de tamaño de fuente del navegador del lector, así que un clamp expresado en rem respeta esa preferencia mientras que uno en px la anula de forma silenciosa.)

Como rem se define en relación con la raíz, cada valor basado en rem del documento cabalga ahora sobre ese único clamp. El texto de cuerpo a 1rem se desliza de 16px a 18px; un titular a 2.369rem se desliza de ≈37,9px a ≈42,6px; nada más en la hoja de estilos necesita cambiar. Así funciona el modo fluido de Scale Composer: defines cuatro parámetros —el tamaño base en el extremo pequeño, en el extremo grande y los dos anchos de viewport— y una sola pendiente sostiene todo el sistema.

Mira la versión de sistema en movimiento: abre una escala tipográfica completa en modo fluido y arrastra el ancho de la vista previa: cada nivel de la escala se recalcula a partir del mismo clamp de la raíz a medida que cambia el viewport.

¿Qué no cambia la tipografía fluida?

Dos cosas sobreviven intactas, y ambas suelen malinterpretarse como bajas.

Las proporciones de la escala. El tipo fluido cambia los píxeles renderizados, no las relaciones. Con el clamp de la raíz de arriba, cada valor en rem crece en el mismo factor —un 12,5% de un extremo del deslizamiento al otro—, así que una escala construida sobre una razón de 1,333 sigue siendo una escala de 1,333 a 360px, a 1280px y en cada ancho intermedio. Lo que se desliza es la jerarquía que diseñaste; no se disuelve.

Los breakpoints del layout. El tipo fluido va de texto, no de columnas. Una rejilla de layout sigue cambiando el número de columnas por escalones, porque una rejilla es genuinamente discreta: puedes tener dos columnas o tres, no 2,4. La tipografía fluida elimina los saltos del tipo mientras el layout conserva sus breakpoints; los dos sistemas coexisten, cada uno respondiendo al ancho de la forma que exige su propio contenido.

Compara fijo y fluido en la misma escala

La forma más rápida de interiorizar la diferencia es ver una misma escala cambiar de modelo: alterna la misma escala entre fijo y fluido, y luego redimensiona la vista previa en cada modo. En fijo, los tamaños se quedan quietos hasta que un breakpoint vendría a rescatarlos; en fluido, siguen el ancho de forma continua. Las proporciones nunca se mueven en ninguno de los dos modos, y esa es la clave: la tipografía fluida cambia cuándo los tamaños son correctos (siempre, dentro del rango), no qué es la escala.