Generador de CSS clamp()

Qué es clamp()

clamp() es una función matemática de CSS que toma tres valores: mínimo, ideal y máximo. Devuelve el valor ideal, pero limitado por los extremos. Es la herramienta más práctica para tipografía fluida y para cualquier valor que tiene que escalar suavemente con el ancho del viewport.

Sintaxis

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

Ejemplo concreto: clamp(16px, 4vw, 32px). El navegador toma 4vw como valor preferido, pero nunca baja de 16 ni sube de 32. En un viewport de 400px, 4vw es 16px (igual al mínimo). En 800px, 4vw es 32px (igual al máximo). Entre los dos, escala lineal.

Por qué es mejor que media queries

• Una sola línea en vez de tres o cuatro media queries.
• Escala continua: no hay saltos visibles cuando el usuario achica/agranda la ventana.
• Más predecible: definís dos extremos y el resto se calcula.
• Menos código, menos puntos de quiebre que mantener.

Cómo se calcula la fórmula

Para que el escalado sea exactamente entre dos viewports, el valor ideal se expresa en unidades vw más un offset en rem:

slope = (maxSize - minSize) / (maxVw - minVw)
yAxisIntersection = -minVw * slope + minSize
preferred = yAxisIntersection rem + slope * 100 vw

Este generador calcula esa fórmula exacta para que entre tu viewport mínimo y máximo el tamaño escale linealmente. Fuera de ese rango, el clamp queda fijo.

Casos de uso

• Tipografía responsive: títulos que crecen suavemente desde mobile a desktop.
• Spacing: padding, margin, gap que escalan con el viewport.
• Anchos: containers con max-width fluido.
• Iconos: tamaños proporcionales sin perder mínimo de legibilidad.

Buenas prácticas

Definí siempre un mínimo legible. Para body text, no bajes de 14-16px. Para títulos, definí un máximo razonable: en monitores ultra-wide, un h1 que escala sin tope termina ridículo. Probá tu clamp redimensionando la ventana de 320px a 1920px y verificá que se vea bien en todos los tamaños intermedios.

Soporte de navegadores

Soporte completo desde 2020 en Chrome, Firefox, Safari y Edge. No necesitás fallback. Si tu audiencia incluye navegadores muy viejos, podés agregar un fallback con font-size estática antes de la línea con clamp.