Generador de clamp()
Genera un font-size fluido con CSS clamp(): define los límites del viewport y el rango de tamaño de fuente y obtén el resultado al instante
Parámetros
CSS generado
Función SCSS
Parámetros en px; devuelve clamp en rem + vw
Ejemplo de uso con los valores actuales
Cómo funciona el generador de clamp()
Genera valores CSS clamp() fluidos para tipografía y espaciado responsive. Define los límites del viewport y el rango de tamaños y obtén el resultado al instante.
Tipografía fluida
Genera valores de font-size que escalan con suavidad entre un mínimo y un máximo a medida que cambia el viewport. Sin breakpoints ni media queries: un solo valor CSS clamp().
Límites del viewport
Define el rango de viewport en el que se produce el escalado. Por debajo del mínimo, la fuente se queda en su tamaño más pequeño; por encima del máximo, en el más grande. Entre ambos, escala de forma lineal.
Control preciso
Introduce valores exactos en píxeles o rem para el tamaño de fuente mínimo y máximo. La herramienta calcula el valor preferido con una ecuación lineal que relaciona el ancho del viewport con el tamaño de fuente.
Copia y usa
Copia el valor clamp() generado como CSS o SCSS. El resultado es una sola línea que puedes pegar en cualquier propiedad font-size, padding, margin o gap.
Preguntas frecuentes
clamp(min, preferred, max) es una función CSS que limita un valor entre un mínimo y un máximo. El valor preferido (normalmente relativo al viewport) escala libremente dentro de esos límites. Se usa sobre todo para tipografía fluida.
Las media queries crean saltos bruscos de tamaño en breakpoints concretos. clamp() ofrece un escalado continuo y suave. Reduce la complejidad del CSS y da un comportamiento responsive más natural.
Sí. clamp() funciona con cualquier propiedad CSS que acepte una longitud: padding, margin, gap, width y más. El espaciado fluido crea diseños más armoniosos que se adaptan con naturalidad al tamaño de la pantalla.
El valor preferido usa una fórmula como calc(Xrem + Yvw), donde X es la base e Y la tasa de cambio. La herramienta calcula ambos valores a partir de tus datos para que el tamaño de fuente escale de forma lineal entre los anchos de viewport mínimo y máximo que definas.