Tipografía fluida con clamp(): tamaños que se adaptan sin breakpoints

Durante años, adaptar la tipografía de un sitio al tamaño de pantalla significó multiplicar los puntos de ruptura: un tamaño de titular para móvil, otro para tableta, un tercero para la pantalla grande. La función clamp() invierte la lógica —el texto crece y encoge de forma continua entre un límite inferior y uno superior— pero introduce una trampa de accesibilidad que muchas integraciones descubren demasiado tarde.

#El problema de los tamaños fijos y los breakpoints

Un tamaño fijo en píxeles ignora el ancho disponible: un titular calibrado para una pantalla de escritorio aplasta la maquetación en móvil, mientras que un titular pensado para móvil parece tímido en un monitor ancho. La respuesta histórica —los breakpoints de @media— funciona, pero produce saltos bruscos en cada umbral y una hoja de estilos que engorda a medida que los tamaños de pantalla se diversifican. Entre dos breakpoints el tamaño queda congelado, mientras que el ancho, en cambio, varía sin parar. A eso se añade un coste de mantenimiento rara vez cuantificado: cada nueva familia de dispositivos —plegables, ultrapanorámicos, móviles pequeños— reclama un breakpoint más, y el menor rediseño de la escala tipográfica obliga a reabrir cada media query una a una.

Lo que está en juego se cruza con las escalas tipográficas tratadas como tokens de diseño: un valor único, reutilizable, que describe una intención en lugar de una cifra congelada.

#clamp(): límite inferior, valor ideal, límite superior

La función toma tres argumentos: un valor mínimo, un valor «ideal» expresado normalmente con una parte del ancho de vista (vw) y un valor máximo. El navegador elige el valor ideal mientras se mantenga entre los dos límites, y recurre al límite más cercano más allá de ellos.

h1 {
  /* jamais moins de 1.75rem, jamais plus de 3rem,
     valeur idéale qui suit la largeur de vue entre les deux */
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
}

El término central merece atención. Un vw solo seguiría el ancho sin un suelo legible; la parte fija en rem garantiza una base que nunca desaparece. La combinación 1rem + 3vw se lee, pues, como «una base de un rem, a la que se suma una pendiente proporcional a la pantalla».

#Construir una escala fluida coherente

En lugar de ajustar cada tamaño a ojo, una escala se apoya en una razón constante entre niveles. La tabla siguiente muestra una escala sobria, del cuerpo de texto al mayor titular, con límites que se solapan de un nivel al siguiente para evitar inversiones en anchos intermedios.

Expresada en variables CSS, la escala se convierte en un juego de tokens reutilizables, exactamente como una paleta de colores:

:root {
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --step-2: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  --step-3: clamp(1.75rem, 1rem + 3vw, 3rem);
}

body { font-size: var(--step-0); }
h2   { font-size: var(--step-2); }
h1   { font-size: var(--step-3); }

#La trampa del zoom: por qué mezclar rem y vw

El punto peor entendido de clamp() tiene que ver con el comportamiento ante el zoom. Las unidades de vista (vw) son relativas a la ventana, no al ajuste de fuente: un texto dimensionado en vw puro no crece cuando el usuario aumenta el tamaño de fuente del navegador. Al deslizar una parte en rem dentro del término ideal, se reintroduce un componente que sí responde al zoom. La regla práctica cabe en una frase: el término central debe contener siempre una parte en rem, nunca vw solo.

Un tamaño de texto que ya no reacciona al zoom del navegador no es fluido, está roto.

#Más allá del texto: espaciados y unidades de contenedor

El mismo principio se extiende a los márgenes, las medianiles y los ritmos verticales, que ganan al respirar con la pantalla en vez de saltar por escalones. Una evolución reciente afina aún más el enfoque: las unidades relativas al contenedor (cqi, el ancho inline del contenedor) permiten a un componente dimensionar su texto según el espacio que ocupa realmente, y no según la ventana entera. Combinadas con las container queries, mantienen legible un mismo componente tanto si ocupa una columna estrecha como el ancho completo.

.carte { container-type: inline-size; }

.carte h3 {
  /* la taille suit la largeur de la carte, pas celle de la fenêtre */
  font-size: clamp(1.125rem, 0.9rem + 1.5cqi, 1.5rem);
}

#Verificar la fluidez antes de entregar

Una escala fluida se controla con tres gestos distintos, demasiado a menudo fundidos en uno solo. El primero es el redimensionado de la ventana: valida la pendiente en vw y la ausencia de un salto feo entre límites. El segundo es el zoom del navegador (Ctrl y +), que debe agrandar toda la página de forma homogénea. El tercero, el más descuidado, es el ajuste del tamaño de fuente por defecto del navegador llevado al 200%: es el que revela un tamaño bloqueado en vw puro, inmóvil allí donde el resto del texto ha crecido.

Una última precaución afecta a las pantallas muy grandes. Sin límite superior, un término en vw sigue creciendo indefinidamente y acaba produciendo titulares desmesurados más allá de los 2500 píxeles de ancho; el valor máximo de clamp() no es, pues, un detalle: es el guardarraíl que frena el desbordamiento. A la inversa, el límite inferior protege la legibilidad en pantallas pequeñas, donde un titular demasiado reducido resulta tan problemático como uno demasiado grande.

#Lo que hay que recordar

La tipografía fluida sustituye decenas de media queries por un puñado de funciones clamp() legibles, a condición de respetar su gramática: dos límites que protegen la legibilidad, un término central que mezcla una base en rem y una pendiente en vw. Es esa parte en rem la que preserva el zoom y, con él, la accesibilidad. Pasar los tamaños a variables CSS convierte al fin la escala en un juego de tokens mantenible, listo para extenderse a los espaciados y a las unidades de contenedor.

Para profundizar: la documentación de referencia de la función clamp() en MDN, con sus casos límite y su compatibilidad entre navegadores.