CSS Clamp Generator
Genera valores CSS clamp() fluidos para font-size con vista previa en vivo.
① Establece tamaños min/max y viewports ② Haz clic en Generar ③ Copia el valor CSS clamp()
¿Qué es CSS clamp() para tipografía fluida?
La función CSS clamp(min, preferido, max) permite tipografía verdaderamente fluida que escala entre dos anchos de viewport sin breakpoints. El valor preferido combina una unidad relativa al viewport (vw) y un offset rem, calculados para que el tamaño de fuente coincida exactamente con el mínimo en el viewport mínimo y el máximo en el viewport máximo.
Preguntas frecuentes
CSS clamp(min, preferido, max) acepta tres argumentos. min es el valor más pequeño posible, preferido es el valor ideal (usualmente una expresión vw + rem), y max es el límite superior. El navegador siempre mantiene el resultado entre min y max.
La pendiente es (tamañoMax - tamañoMin) / (viewportMax - viewportMin). Multiplicada por 100 da el coeficiente vw. El intercepto rem es (tamañoMin - pendiente × viewportMin) / rootSize. El clamp final: clamp(minRem, coefVw + interceptoRem, maxRem).
Las media queries producen saltos abruptos en breakpoints definidos. clamp() produce una interpolación lineal suave entre dos tamaños. No se necesitan breakpoints, el código es más corto y el resultado visualmente más refinado.
Para CSS vanilla, declara los valores como propiedades custom en :root. Para Tailwind v3 en theme.extend.fontSize. Para Tailwind v4 usa @theme en el archivo CSS.
CSS clamp() tiene soporte en todos los navegadores principales desde 2020. Soporte global superior al 97%. Para navegadores legacy, usa el fallback solo en px antes de la declaración clamp().
clamp() funciona para cualquier propiedad de longitud que se beneficie de escalado fluido. Para tipografía elimina @media para font-size. Para espaciado crea layouts proporcionales.
Problemas comunes: (1) Root font size incorrecto. (2) Unidades mezcladas sin conversión. (3) Min mayor que max. (4) Coeficiente vw muy grande. Siempre prueba con el simulador de viewport.