CSS clamp() explicado con números reales

La función CSS clamp() toma tres valores — clamp(MIN, PREFERRED, MAX) — y devuelve el valor preferido bloqueado entre los dos límites; formalmente, se resuelve como max(MIN, min(PREFERRED, MAX)). En tipografía, el valor preferido suele ser una fórmula que crece con el viewport, lo que convierte un tamaño de fuente con clamp en la forma estándar de una sola línea de la tipografía fluida: un tamaño que se desliza con el ancho de la pantalla pero que nunca puede salir del rango para el que fue diseñado.

La mayoría de las explicaciones se quedan en la anatomía. Esta calcula un ejemplo real de principio a fin — pendiente, intersección, la declaración final — y lo verifica en tres anchos de viewport, porque la aritmética es donde clamp() deja de ser magia. Forma parte de nuestra guía de tipografía fluida.

¿Cómo decide clamp() qué valor gana?

Piensa en los tres argumentos como un suelo, un valor móvil y un techo — una anatomía que la guía de web.dev sobre min(), max() y clamp() ilustra bien. El navegador evalúa primero el valor preferido:

• Preferido por debajo del mínimo → gana el mínimo (el suelo aguanta).
• Preferido entre los límites → gana el valor preferido (manda la parte móvil).
• Preferido por encima del máximo → gana el máximo (el techo aguanta).

La función clamp de css se reevalúa cada vez que cambian sus entradas — así que un valor preferido que contiene vw se recalcula en cada cambio de tamaño, que es exactamente la propiedad que la tipografía fluida aprovecha.

¿Qué significan las partes rem y vw del valor preferido?

Un valor preferido fluido como 0.9511rem + 0.2174vw es una ecuación de recta disfrazada: size = intercept + slope × viewport. El término vw es la pendiente — cuántos píxeles gana el tamaño por cada unidad de ancho del viewport — y el término rem es la intersección, el valor que tendría la recta en un viewport hipotético de ancho cero. Dos números que, juntos, determinan por completo el deslizamiento.

Que la intersección esté en rem no es cosmético: rem sigue la preferencia de tamaño de fuente del usuario y el zoom del navegador, así que toda la recta se desplaza cuando el lector amplía. Un valor preferido hecho de puro vw es a la vez inflexible (un solo término tiene que codificar posición e inclinación al mismo tiempo) y un fallo de accesibilidad, ya que el texto definido solo en unidades de viewport ignora el zoom por completo.

¿Cómo se calculan los números dentro de clamp()?

Tomemos uno de los encargos más comunes en tipografía fluida: texto de cuerpo a 16px en un viewport de 360px, que crece hasta 18px a 1280px. Tres pasos.

Paso 1 — pendiente. El crecimiento dividido por el rango del viewport:

slope = (18 − 16) / (1280 − 360) = 2 / 920 ≈ 0.002174

Multiplícalo por 100 para expresarlo en vw (1vw = 1% del ancho del viewport): ≈0.2174vw.

Paso 2 — intersección. Recorre la recta hacia atrás desde el primer punto conocido:

intercept = 16 − 0.002174 × 360 ≈ 15.22px ≈ 0.9511rem   (÷16)

Paso 3 — ensamblar. Mínimo y máximo en rem (16px = 1rem, 18px = 1.125rem), preferido a partir de los dos términos calculados:

font-size: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);

Ahora verifícalo, porque un clamp que no puedes comprobar es un clamp en el que no puedes confiar:

Los extremos aterrizan en los tamaños diseñados, y el punto medio cae donde la recta dice que debe caer. Puedes inspeccionar los mismos números en vivo: abre este clamp en Scale Composer — los parámetros fluidos (16→18 a lo largo de 360→1280) producen exactamente esta expresión, y arrastrar el ancho de la vista previa recorre la tabla de arriba en tiempo real.

¿Funciona clamp() en algo más que font-size?

Sí — clamp() acepta cualquier propiedad cuyo valor sea una longitud. Un padding que respira con el viewport, un gap que se estrecha en pantallas pequeñas, una columna de contenido que crece hasta un tope: todos son el mismo patrón con distintas unidades en las mismas tres ranuras. Los sistemas de espaciado fluido se construyen exactamente sobre esto, con la misma aritmética de pendiente que la tipografía fluida.

¿Cuáles son las trampas comunes de clamp()?

Tres modos de fallo cubren las sorpresas más comunes de clamp():

1. Un mínimo mayor que el máximo. clamp() no reordena sus argumentos — por definición, max(MIN, min(PREFERRED, MAX)) — así que cuando MIN supera a MAX, MIN simplemente gana y el valor se vuelve rígido. Fácil de provocar cuando un cálculo produce una pendiente negativa.
2. Porcentajes en font-size. Un % dentro de un clamp de font-size se resuelve contra el tamaño de fuente del elemento padre, no del viewport ni de la raíz — los elementos anidados lo acumulan. Usa rem para la intersección y los límites.
3. Olvidar el término del zoom. La parte rem del valor preferido es lo que permite que el zoom del navegador y las preferencias de tamaño de fuente del usuario muevan todo el rango. Un clamp cuyo valor preferido es puro vw mantiene su tamaño en píxeles mientras el usuario está pidiendo un texto más grande.

Lleva el clamp a la raíz

Un clamp por tamaño funciona; un clamp para todo el sistema escala mejor. Pon la expresión en html { font-size: … } y escribe cada uno de los demás tamaños en rem: ahora cada valor en rem cabalga sobre el deslizamiento de la raíz, así que toda la escala es fluida con una sola pendiente — la arquitectura que el modo fluido de Scale Composer genera por ti. Abre la configuración del clamp en la raíz para ver la única expresión en la raíz y toda la escala deslizándose debajo de ella — luego cambia base-max de 18 a 20 y observa cómo una sola edición reajusta cada tamaño de la página.