clamp() es una función de CSS que acepta tres valores — mínimo, preferido y máximo — y devuelve el valor preferido si cae dentro del rango [mínimo, máximo]; si el preferido es menor que el mínimo, devuelve el mínimo; si es mayor que el máximo, devuelve el máximo. En términos simples: el valor nunca sale del rango, pero dentro del rango escala libremente según el preferido.

El caso de uso más conocido es la tipografía fluida: font-size: clamp(1rem, 4vw, 2.5rem) hace que el tamaño de fuente escale con el ancho del viewport (4vw), pero nunca baje de 1rem ni suba de 2.5rem. En una pantalla de 375px, 4vw son 15px — el mínimo de 1rem (≈16px) se aplica. En una pantalla de 1440px, 4vw son 57.6px — el máximo de 2.5rem (≈40px) se aplica. En el rango intermedio, la fuente escala suavemente. El resultado: texto que siempre es legible en mobile y no se vuelve gigante en desktop, sin escribir ninguna media query.

clamp() pertenece a la misma familia de funciones matemáticas que calc(): comparte la sintaxis de mezcla de unidades y el mismo modelo de evaluación. Puede aparecer en cualquier propiedad que acepte un valor de longitud, porcentaje o número — font-size, width, padding, gap, border-radius. No es exclusiva de tipografía, aunque es donde más se usa.

Cómo funciona

La sintaxis

propiedad: clamp(mínimo, preferido, máximo);

/* Tipografía fluida */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

/* Contenedor fluido */
.contenedor {
  width: clamp(320px, 90%, 1200px);
}

/* Padding que escala */
.seccion {
  padding: clamp(1rem, 5vw, 3rem);
}

Los tres argumentos se separan con comas. El navegador evalúa el valor preferido con los valores reales del viewport/contenedor en el momento del repintado, igual que calc().

Por qué el preferido debe ser una unidad relativa

Si el valor preferido no cambia con el viewport ni con el contenedor, clamp() se convierte en un selector entre mínimo y máximo sin escala continua — pierde su sentido. El valor preferido necesita escalar: normalmente vw (porcentaje del ancho del viewport), a veces una expresión calc() que combina rem y vw.

/* ❌ Preferido fijo — no escala, nunca hay degradación gradual */
font-size: clamp(1rem, 1.5rem, 2rem);

/* ✅ Preferido con vw — escala suavemente con el viewport */
font-size: clamp(1rem, 4vw, 2rem);

/* ✅ Preferido combinado — escala más suave y controlada */
font-size: clamp(1rem, calc(0.5rem + 2vw), 2rem);

La combinación calc(base_rem + fraccion_vw) da control más fino: la curva de escalado arranca desde base_rem y crece fraccion_vw por cada 100px de ancho de viewport.

min() y max() — las hermanas de clamp()

min() y max() son funciones de la misma familia:

• min(a, b) — devuelve el menor de los dos valores. width: min(100%, 800px) significa “el ancho es 100% del contenedor, pero nunca más de 800px” — equivale a max-width: 800px con width: 100%.
• max(a, b) — devuelve el mayor. padding: max(1rem, 3vw) significa “el padding es 3% del viewport, pero nunca menos de 1rem”.

clamp(min, val, max) es equivalente a max(min, min(val, max)) — se puede expresar anidando min() y max(), pero clamp() es más legible para el patrón de “rango con escala”. Los tres comparten la sintaxis de calc() y se pueden mezclar: clamp(1rem, calc(0.5rem + 2vw), 2rem).

Ejemplo realista

Tipografía fluida para un encabezado principal y un párrafo:

h1 {
  font-size: clamp(1.75rem, calc(1rem + 3vw), 3.5rem);
  line-height: 1.2;
}

p {
  font-size: clamp(1rem, calc(0.875rem + 0.5vw), 1.25rem);
  max-width: 65ch;
}

Cuándo usarlo

• Tipografía fluida: el caso central. Encabezados, subtítulos, y cuerpo de texto que deben ser legibles en todos los tamaños sin media queries.
• Espaciados fluidos: padding, gap, margin que escalan con el viewport en lugar de saltar en breakpoints.
• Anchos de contenedor: width: clamp(320px, 90%, 1200px) reemplaza el patrón width: 100%; max-width: 1200px; margin: auto con algo más expresivo.
• Cuando el escalado continuo es mejor que los saltos: si hay solo dos o tres tamaños fijos separados por breakpoints, una media query es más explícita. Si hay una curva de crecimiento continua, clamp() es más elegante.

Notas, gotchas e interacción

• Si el mínimo es mayor que el máximo, el resultado es indefinido. clamp(2rem, 4vw, 1rem) no es un error de sintaxis pero produce un comportamiento inconsistente entre navegadores. Siempre verificá que mínimo ≤ máximo.
• El preferido con px fijo no escala. clamp(1rem, 24px, 2rem) siempre devuelve el valor más cercano al rango: si 24px cae en el rango, lo devuelve siempre — sin variación. Usá vw o calc() con vw para que el preferido varíe.
• Usar rem en el mínimo y máximo respeta la configuración de accesibilidad del usuario. Si alguien configuró 20px como fuente base, 1rem = 20px y el rango se ajusta. Con px, el rango es fijo e ignora esa preferencia.
• clamp() en font-size puede interferir con el zoom del navegador si el preferido es solo vw. Al hacer zoom, el viewport no cambia y el vw tampoco, por lo que la fuente no crece. La solución es usar calc(base_rem + fraccion_vw) como preferido: la parte rem sí responde al zoom.
• Interacción con calc(): clamp() acepta calc() dentro de cualquiera de sus argumentos. El número de decimales no importa — el navegador hace la aritmética con precisión flotante.

Vigente / legacy

clamp() es vigente y Baseline widely. No hay equivalente legacy en CSS puro — antes se necesitaban breakpoints o JavaScript para lograr escalado continuo. min() y max() tienen el mismo soporte.

Aprendelo en el recorrido

Esta entrada complementa la lección Tipografía fluida con clamp() del módulo Diseño responsive.

Ver también

• responsive — diseño responsive: viewport, mobile-first y el toolkit completo
• media-queries — cuando el layout necesita cambios categóricos en lugar de escalado continuo
• unidades — vw, rem, % que se combinan dentro de clamp()
• calc() — función hermana para operaciones matemáticas en valores CSS