Generador de clamp() de CSS

¿Qué es Generador de clamp() de CSS?

El generador de clamp() de CSS es una calculadora gratuita de tipografía fluida para desarrolladores front-end y diseñadores. Le indicas un tamaño de fuente mínimo, uno máximo, un ancho de viewport mínimo y uno máximo; te devuelve una declaración clamp(mín, preferido, máx) donde el valor preferido combina un desplazamiento en rem con una pendiente en vw, de modo que el texto crece linealmente con la pantalla y nunca sale de tus límites. Esto elimina las media queries de font-size apiladas y mantiene títulos y cuerpo de texto adaptables en cualquier dispositivo. Elige un tamaño de previsualización para ver cómo se renderiza, cambia la unidad de salida entre rem y px, y copia la línea directamente en tu hoja de estilos.

Cómo usar Generador de clamp() de CSS

1. Introduce el tamaño de fuente mínimo: el tamaño que debe tener el texto en la pantalla más pequeña.
2. Introduce el tamaño de fuente máximo: el tamaño que debe alcanzar el texto en la pantalla más grande.
3. Define los anchos de viewport mínimo y máximo entre los que debe escalar el tamaño.
4. Abre los ajustes para cambiar la unidad de salida (rem es más accesible; también hay px) si lo prefieres.
5. Elige un tamaño de previsualización para renderizar texto de ejemplo en ese viewport y lee el valor clamp() en vivo.
6. Copia la expresión clamp() generada y pégala en tu font-size de CSS.

Ejemplos

fuente mín 16, fuente máx 20, vw mín 320, vw máx 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

fuente mín 32, fuente máx 64, vw mín 320, vw máx 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

fuente mín 12, fuente máx 14, vw mín 480, vw máx 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

Preguntas frecuentes

¿Cómo escala el valor clamp() sin media queries?

clamp(mín, preferido, máx) toma un límite inferior, un valor preferido (fluido) y un límite superior. El valor preferido es una recta de la forma rem + vw, calculada para que la fuente sea igual a tu mínimo en el viewport mínimo y a tu máximo en el viewport máximo. Entre esos anchos el navegador interpola solo, y fuera de ellos clamp() fija el tamaño al límite más cercano, todo en una sola declaración.

¿Por qué la salida está en rem en lugar de px?

Usar rem para las partes fijas respeta la configuración de tamaño de fuente del navegador del usuario, lo cual es mejor para la accesibilidad. La pendiente relativa al viewport se expresa en vw. Puedes cambiar la unidad a px en los ajustes si tu proyecto necesita unidades absolutas, pero rem es el valor recomendado por defecto.

¿Qué rango de viewport debo usar?

Una elección habitual es tu ancho más pequeño admitido (a menudo 320px o 360px) para el mínimo y tu contenedor de contenido más ancho (como 1240px–1536px) para el máximo. La fuente es totalmente fluida solo dentro de ese rango; por debajo el texto se queda en el mínimo y por encima en el máximo.

¿Funciona para cualquier longitud CSS, no solo font-size?

Sí. El valor clamp() generado es simplemente una longitud, así que puedes pegarlo en padding, margin, gap o cualquier propiedad que acepte una longitud. Las etiquetas mencionan font-size porque la tipografía fluida es el uso más común, pero las matemáticas son idénticas para el espaciado.

¿Se envían mis datos a algún sitio?

No. El cálculo se ejecuta por completo en tu navegador con JavaScript: tus tamaños de fuente y anchos de viewport nunca se suben a ningún servidor, así que la herramienta funciona de forma privada e incluso sin conexión una vez cargada la página.