¿Se envían datos a un servidor?

No. Todos los cálculos se realizan en su navegador. No se transmite ningún dato.

¿clamp() funciona en IE?

No. Internet Explorer no soporta clamp(). Todos los navegadores modernos lo soportan completamente.

¿Puedo usar clamp() para cosas además de font-size?

Sí. clamp() funciona con cualquier propiedad de longitud CSS: padding, margin, gap, width, y más.

¿Debo usar rem o px?

rem es recomendado para accesibilidad. Respeta la configuración de tamaño de fuente del navegador del usuario.

¿Es gratuita esta herramienta?

Sí. Completamente gratis sin límites de uso.

Generador CSS Clamp() | Cálculo de Tipografía Fluida Responsiva

📖 Resumen 🔰 Cómo usar 📚 Glosario ⚙️ Técnico ❓ FAQ 💡 Casos de uso

🔒

Procesamiento local

No se envían datos a ningún servidor

📝

Sin registro

Uso inmediato sin necesidad de cuenta

⚡

Cálculo instantáneo

Todos los parámetros se actualizan en tiempo real

Min Viewport Width320px

Max Viewport Width1440px

Min Font Size16px

Max Font Size24px

Root Font Size (1rem)16px

The quick brown fox jumps over the lazy dog

La tipografía es el arte y la técnica de organizar los tipos para hacer que el lenguaje escrito sea legible y atractivo.

Ancho del viewport:1024px

El Generador CSS Clamp() es una herramienta que genera automáticamente tamaños de fuente responsivos (tipografía fluida) usando la función CSS clamp(), que escala suavemente según el ancho del viewport.

Solo ingrese los tamaños de fuente mínimo y máximo y los anchos del viewport, y la herramienta calculará la fórmula clamp() óptima. Visualice la escala con un gráfico interactivo y una vista previa en tiempo real. Compatible con salida en formato de variables CSS y Tailwind CSS.

Todos los cálculos se realizan en su navegador — no se envían datos a ningún servidor. Sin registro necesario, completamente gratis.

Configurar parámetros

Ajuste los anchos de viewport mínimo y máximo y los tamaños de fuente usando los controles deslizantes. También puede personalizar el tamaño de fuente raíz para los cálculos en rem.

Verificar gráfico y vista previa

El gráfico de escala visualiza cómo cambia el tamaño de fuente según el ancho del viewport. Use el área de vista previa para simular diferentes anchos y ver la apariencia real del texto.

Copiar código

Elija su formato preferido — CSS, Variable CSS o Tailwind — y haga clic en el botón 📋 para copiar. Pegue directamente en su proyecto.

clamp(): Una función de comparación CSS en formato clamp(min, preferred, max) que establece límites inferior y superior para un valor.
vw (viewport width): Una unidad CSS igual al 1% del ancho del viewport. Por ejemplo, 1vw = 9.6px en una pantalla de 960px de ancho.
rem: Una unidad relativa CSS basada en el tamaño de fuente del elemento raíz (<html>). Por defecto 1rem = 16px.
Tipografía fluida (Fluid Typography): Técnica de diseño donde los tamaños de fuente escalan suavemente con el ancho del viewport, en lugar de cambiar en pasos con media queries.
Valor preferido (Preferred value): El segundo argumento de clamp(), calculado como intercept(rem) + slope × 100(vw).
Viewport: El área visible de una página web en el navegador, que varía según el dispositivo y el tamaño de la ventana.

La tipografía fluida con CSS clamp() se basa en principios de funciones lineales.

Derivación de la fórmula

A partir del tamaño mínimo (minFS), máximo (maxFS), ancho mínimo del viewport (minVW) y máximo (maxVW), se calculan la pendiente y el intercepto:
slope = (maxFS - minFS) / (maxVW - minVW)
intercept = minFS - slope × minVW
El valor preferido se expresa como intercept(rem) + slope × 100(vw).

Comparado con Media Queries

Las @media queries tradicionales crean saltos discontinuos en el tamaño de fuente. Con clamp(), el texto escala suavemente en todos los anchos de viewport, eliminando la necesidad de múltiples media queries.

Q. ¿Se envían datos a un servidor?: A. No. Todos los cálculos se realizan en su navegador. No se transmite ningún dato.
Q. ¿Funciona en móvil?: A. Sí. La herramienta es completamente responsiva y funciona en smartphones y tablets.
Q. ¿clamp() funciona en IE?: A. No. Internet Explorer no soporta clamp(). Todos los navegadores modernos (Chrome, Firefox, Safari, Edge) lo soportan completamente.
Q. ¿Puedo usar clamp() para cosas además de font-size?: A. Sí. clamp() funciona con cualquier propiedad de longitud CSS: padding, margin, gap, width, y más.
Q. ¿Debo usar rem o px?: A. rem es recomendado para accesibilidad. Respeta la configuración de tamaño de fuente del navegador del usuario.
Q. ¿Cómo funciona el cálculo?: A. Calcula la pendiente e intercepto a partir de los tamaños de fuente y anchos de viewport mín/máx, luego genera un valor preferido usando unidades vw.
Q. ¿Es gratuita esta herramienta?: A. Sí. Completamente gratis sin límites de uso.

📱

Diseño web responsivo

Cree títulos y texto que escalen suavemente del móvil al escritorio con una sola declaración CSS.

🎨

Sistemas de diseño

Gestione toda su escala tipográfica con clamp(). Exporte como variables CSS para usar como tokens de diseño.

📐

Espaciado fluido

Aplique clamp() no solo a fuentes sino también a padding, márgenes y gaps para escalado proporcional.

♿

Accesibilidad

La salida basada en rem respeta las preferencias de tamaño de fuente del usuario. Diseños responsivos conformes a WCAG.

CSS