Generador CSS clamp() | Tipografía fluida sin media queries

Introduce un ancho de viewport mínimo y máximo junto con un valor mínimo y máximo, y esta herramienta resuelve la interpolación lineal por ti y devuelve una declaración clamp(mín, pendientevw + intersección, máx) lista para pegar. Funciona con font-size, padding, gap, border-radius y más, alterna entre px y rem, y muestra tanto el cálculo de pendiente e intersección como una vista previa del valor por viewport.

💡 Sobre esta herramienta

En diseño responsivo aparece una y otra vez el mismo requisito: que un título crezca de 24px en móvil a 48px en escritorio, pero de forma suave. La solución clásica era apilar media queries en cada breakpoint, lo que hace que el texto salte por escalones y obliga a añadir una regla nueva cada vez que cambia el diseño.

clamp() sustituye toda esa escalera por una sola línea que escala de forma continua. La dificultad está en el segundo argumento: el valor preferido debe seguir al viewport, algo como 2vw + 8px. Calcular esa pendiente y esa intersección a mano significa resolver una ecuación lineal cada vez: la pendiente es (valorMáx − valorMín) / (vpMáx − vpMín) y la intersección es valorMín − pendiente × vpMín. Es posible, pero tedioso y propenso a errores mientras iteras un diseño.

Esta herramienta es ideal para aprender el patrón: el panel de desglose muestra exactamente cómo se derivan la pendiente y la intersección, así que la salida no es una caja negra y puedes comprobar el resultado paso a paso. La vista previa dibuja el valor real calculado en anchos habituales de 320px a 1920px, incluido el punto donde se fija (clamp) en cada extremo.

🧐 Preguntas Frecuentes

¿Puedo introducir valores en px y obtener la salida en rem? Sí. Cambia la unidad de salida a rem y la herramienta convierte desde px usando tu font-size raíz (16px por defecto). Para font-size, la salida en rem suele ser preferible porque respeta el tamaño de fuente configurado por el usuario en su navegador.

¿Qué ocurre si el valor máximo es menor que el mínimo? Obtienes una pendiente negativa, por lo que la propiedad se reduce a medida que crece el viewport. Es CSS perfectamente válido y útil para márgenes que quieras ajustar en pantallas grandes.

¿Pueden ser iguales el viewport mínimo y el máximo? No. Con viewports iguales o invertidos (mín ≥ máx) la pendiente de la recta no está definida, así que la herramienta muestra un error y detiene el cálculo. Mantén mín < máx.

¿Un clamp() basado en vw supone un problema de accesibilidad? Un valor preferido formado solo por vw puede resistirse al zoom del usuario. Esta herramienta conserva un desplazamiento fijo vw + rem (o px), de modo que cuando el mínimo está en rem mantienes cierta resistencia al zoom en lugar de anclarlo todo a unidades de viewport.

¿Funciona con propiedades distintas de font-size? Sí. Puedes elegir padding, margin, gap, width, height, border-radius, letter-spacing o line-height entre los preajustes, o escribir cualquier nombre de propiedad personalizado.

📚 Datos Curiosos

clamp() es una función matemática estandarizada en el CSS Values and Units Module Level 4, junto a min() y max(). Internamente clamp(MÍN, VAL, MÁX) equivale a max(MÍN, min(VAL, MÁX)): devuelve el valor central de los tres, un modelo mental útil cuando un resultado sorprende. El soporte llegó a los principales motores hacia 2020 y la tipografía fluida se convirtió rápidamente en la forma habitual de manejar el texto responsivo. El truco de sumar un término vw a una unidad fija es anterior a la función — circulaba desde hacía años con nombres como "fluid type" y "CSS locks" — pero requería calc() y un par de media queries. Reducir todo eso a un único clamp() es lo que popularizó el patrón.