CSS clamp(): tipografía y espaciados que se adaptan sin media queries

mayo 20, 2026

Las medidas fijas en CSS son un dolor cuando empiezas a pensar responsive. Cambias de 16px a 14px en mobile con un media query, repites lo mismo para cada tamaño y terminas con un archivo lleno de breakpoints solo para mover unos pixeles. clamp() resuelve eso con una sola línea.

Qué es clamp()

clamp() es una función nativa de CSS que toma 3 valores: un mínimo, un valor preferido (ideal) y un máximo. El navegador ajusta el valor preferido pero nunca baja del mínimo ni sube del máximo.

font-size: clamp(MIN, IDEAL, MAX);

Cuando el IDEAL cae dentro del rango entre MIN y MAX, se usa ese valor. Si lo excede en cualquier dirección, se aplica el límite correspondiente.

Sintaxis básica

h1 {
font-size: clamp(2rem, 5vw, 4rem);
}

Lo que pasa según el ancho del viewport:

En pantallas chicas, 5vw calcula un valor muy bajo, así que se aplica 2rem (mínimo).
En pantallas medianas, 5vw queda entre 2rem y 4rem, así que se usa ese valor calculado.
En pantallas grandes, 5vw se vuelve muy grande, así que se topea en 4rem (máximo).

Resultado: tipografía fluida sin un solo media query.

Ventajas sobre medidas fijas

1. Menos media queries

Antes:

h1 { font-size: 2rem; }

@media (min-width: 768px) {
h1 { font-size: 3rem; }
}

@media (min-width: 1200px) {
h1 { font-size: 4rem; }
}

Con clamp():

h1 {
font-size: clamp(2rem, 4vw + 1rem, 4rem);
}

Una línea reemplaza tres reglas y se adapta en todos los puntos intermedios, no solo en los breakpoints que definiste.

2. Transición suave, sin saltos

Las medidas fijas saltan de un valor a otro cuando se cruza un breakpoint. clamp() interpola gradualmente, así no hay "saltos" visuales cuando el usuario redimensiona la ventana o rota el dispositivo.

3. Funciona para más que tipografía

Sirve para padding, margin, gap, width, line-height, border-radius. Prácticamente cualquier propiedad que acepte un valor numérico:

.card {
padding: clamp(1rem, 3vw, 2.5rem);
border-radius: clamp(8px, 1vw, 16px);
gap: clamp(0.5rem, 2vw, 1.5rem);
}

Ejemplos listos para copiar

Hero con tipografía fluida

.hero h1 {
font-size: clamp(2.5rem, 6vw, 5rem);
line-height: 1.1;
letter-spacing: -0.02em;
}

.hero p {
font-size: clamp(1rem, 1.5vw, 1.25rem);
max-width: 60ch;
}

Container responsive

.container {
width: clamp(320px, 90%, 1200px);
margin-inline: auto;
padding-inline: clamp(1rem, 5vw, 3rem);
}

Secciones con espacio vertical que respira

section {
padding-block: clamp(3rem, 10vh, 8rem);
}

h2 {
margin-block: clamp(2rem, 5vw, 4rem) clamp(1rem, 2vw, 1.5rem);
}

Grid con columnas adaptativas

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 30%, 320px), 1fr));
gap: clamp(1rem, 3vw, 2rem);
}

Fórmula para tipografía fluida limpia

Una buena receta es combinar un valor base con uno fluido:

font-size: clamp(MIN, BASE + FACTOR * vw, MAX);

Ejemplo concreto:

h1 {
/* Entre 2rem (mobile) y 4rem (desktop), creciendo 1rem + 3vw */
font-size: clamp(2rem, 1rem + 3vw, 4rem);
}

El 1rem + 3vw arranca en 1rem cuando el viewport es 0 y crece progresivamente. Esto garantiza un crecimiento suave en todo el rango sin saltos abruptos.

Cuándo NO usar clamp()

Valores que no necesitan escalar: bordes de 1px, alturas fijas de iconos pequeños.
Cuando necesitas saltos exactos: si tu diseño requiere un cambio drástico entre breakpoints (cambio de layout, no solo de tamaño), un media query sigue siendo más explícito.
Tamaños mínimos de accesibilidad: asegúrate de que el MIN respeta el tamaño legible. Para body text, no bajes de 14-16px.

Compatibilidad

clamp() tiene soporte universal en todos los navegadores modernos desde 2020. En 2026 es 100% seguro usarlo sin fallback.

Conclusión

clamp() es una de las funciones más útiles del CSS moderno. Te ahorra media queries, hace tu CSS más declarativo y produce diseños que escalan suavemente. Si todavía estás escribiendo tres breakpoints para cambiar tamaños de fuente, es momento de jubilar ese patrón y dejar que el navegador haga el trabajo.