¿Por qué clamp() en vez de media queries?

Escala lineal entre dos breakpoints — sin saltos, sin valores por breakpoint que mantener. Menos líneas de CSS para el mismo efecto.

¿Por qué rem y no px?

Los usuarios pueden ajustar el tamaño base en el navegador (accesibilidad). rem lo respeta; px lo ignora.

Cuánto crece el valor por `1vw` de aumento de viewport. Junto al intercept, es la función lineal que pasa por (minVw, minVal) y (maxVw, maxVal).

¿Soporte de navegador?

`clamp()` funciona en todos los navegadores desde 2020 — Safari 13.1, Chrome 79, Firefox 75. Seguro en 2026.

Calculadora CSS clamp() (Tipografía Fluida)

Color

La tipografía fluida usa `clamp(min, preferred, max)` para escalar linealmente entre dos anchos de viewport — sin breakpoints. Esta calculadora toma tus valores min/max y rango de viewport y produce la expresión exacta `clamp(min, intercept + slope*100vw, max)` sin ruido de redondeo. Salida en `rem` (con root configurable) o `px`. Bloque de preview en vivo para ver la escala.

—

Presets

Valor min (px)Valor max (px)Viewport min (px)Viewport max (px)UnidadRoot font-size (px)

Resultado

font-size: clamp(1rem, 0.8261rem + 0.8696vw, 1.5rem);

Redimensiona la ventana para ver la escala lineal.

Vista previa

El veloz murciélago hindú comía feliz cardillo y kiwi.

Cómo usar

Elige un preset (Body, H1, etc.) o configura min/max y rango de viewport.
Elige rem o px (rem recomendado — respeta preferencias del usuario).
Copia la expresión clamp de una línea en tu CSS.

Preguntas frecuentes

¿Por qué clamp() en vez de media queries?: Escala lineal entre dos breakpoints — sin saltos, sin valores por breakpoint que mantener. Menos líneas de CSS para el mismo efecto.
¿Por qué rem y no px?: Los usuarios pueden ajustar el tamaño base en el navegador (accesibilidad). rem lo respeta; px lo ignora.
¿Qué es el slope?: Cuánto crece el valor por `1vw` de aumento de viewport. Junto al intercept, es la función lineal que pasa por (minVw, minVal) y (maxVw, maxVal).
¿Soporte de navegador?: `clamp()` funciona en todos los navegadores desde 2020 — Safari 13.1, Chrome 79, Firefox 75. Seguro en 2026.