Calculadora de Tipografía Fluida para clamp() CSS
Esta calculadora de tipografía fluida convierte dos anchos de viewport y dos tamaños de fuente en un valor clamp() de CSS listo para pegar, de modo que el texto escale con fluidez en lugar de saltar entre breakpoints de media queries. Está pensada para desarrolladores y diseñadores que buscan una tipografía responsive que crezca al ritmo de la pantalla.
Indica un viewport mín y máx, elige un tamaño mín y máx, y la herramienta hace los cálculos —pendiente, intersección y el coeficiente vw— para luego entregar font-size y line-height listos para producción en rem o px. Una vista previa en vivo y los presets integrados (H1–H6, Cuerpo, Pequeño) te permiten ajustar la escala antes de copiar.
Cómo usar la calculadora
Define el rango de viewport
En Rango de viewport, indica el Ancho mín y el Ancho máx de tu diseño. Un rango de 320 px a 1440 px cubre la mayoría de los proyectos; el texto escala de forma lineal entre ambos.
Define el tamaño de fuente
Usa los deslizantes o escribe el Tamaño mín (en el viewport más pequeño) y el Tamaño máx (en el más grande). O pulsa un Preset —de H1 a H6, Cuerpo o Pequeño— para cargar valores probados de tamaño e interlineado.
Ajusta el interlineado
Define el interlineado Mín y Máx. Los títulos suelen pedir un espaciado más ajustado (1.1–1.2) y el texto de cuerpo más amplio (1.5–1.7). Si ambos valores coinciden, se entrega un interlineado fijo en lugar de un clamp().
Elige la unidad de salida
En Ajustes de salida, elige rem (recomendado) o px. Para rem, ajusta la Fuente base al font-size raíz de tu proyecto —normalmente 16 px— para que las conversiones sean exactas.
Previsualiza y copia
Arrastra el deslizante de viewport de la Vista previa (320–1920 px) para ver cómo cambia de tamaño el texto de ejemplo y pulsa Copiar para llevar el CSS al portapapeles.
Funciones
Generación de clamp() CSS
Entrega un font-size listo para producción con clamp(), con la pendiente (vw) y la intersección correctamente calculadas en rem o px.
Interlineado fluido
Genera un clamp() acorde para el line-height y recurre a un valor fijo y limpio cuando el mín y el máx son iguales.
Control del rango de viewport
Define los anchos de viewport mín y máx entre los que escala tu tipografía, ajustados a tus propios breakpoints.
Vista previa interactiva
Un deslizante de viewport de 320 px a 1920 px cambia el tamaño del texto de ejemplo en tiempo real para que veas exactamente cómo escala.
8 presets de tipografía
Con un clic se cargan rangos sensatos de tamaño e interlineado para títulos H1–H6, texto de cuerpo y texto pequeño.
Salida en rem / px
Alterna entre salida en rem y px, con un font-size base configurable para que los valores rem sigan siendo exactos en tu configuración.
Desglose de la fórmula
Muestra los cálculos paso a paso —pendiente, coeficiente vw, intersección y conversión a rem— para que puedas verificar el resultado.
Copia con un clic
Copia al portapapeles el CSS completo de font-size y line-height con un solo botón.
Preguntas frecuentes
¿Qué es la tipografía fluida?
La tipografía fluida hace que el texto escale con fluidez en distintos tamaños de pantalla en lugar de saltar entre breakpoints fijos. Con clamp() de CSS, el font-size se ajusta de forma proporcional a medida que cambia el ancho del viewport, sin necesidad de media queries.
¿Cómo funciona clamp() de CSS para el tamaño de fuente?
clamp(mín, preferido, máx) limita un valor entre un mínimo y un máximo. El valor preferido usa una unidad vw para crecer con el viewport, pero nunca baja del mín ni supera el máx. Por ejemplo, font-size: clamp(1rem, 0.5rem + 0.7143vw, 1.5rem) escala el texto de 16 px en un viewport de 320 px a 24 px en 1440 px.
¿Cómo calculo los valores de clamp para tipografía?
El valor preferido (el del medio) es una función lineal del ancho del viewport. Calculas la pendiente a partir de las diferencias de tamaño y de viewport, la conviertes en un coeficiente vw y determinas la intersección en rem/px. Esta calculadora lo hace todo automáticamente y muestra el desarrollo en el panel Fórmula.
¿Debo usar rem o px en la salida?
Usa rem en la mayoría de los casos: rem respeta el ajuste de tamaño de fuente del navegador del usuario, lo que mejora la accesibilidad. Elige px solo cuando necesites un tamaño independiente del font-size raíz. Con salida en rem, ajusta la Fuente base al font-size raíz de tu proyecto para que las conversiones sean exactas.
¿Qué anchos de viewport mín y máx debo usar?
Un rango de 320 px a 1440 px funciona bien en la mayoría de los proyectos: 320 px cubre los teléfonos comunes más pequeños y 1440 px es un ancho de escritorio estándar. Ajusta los límites según tus propias analíticas o especificaciones de diseño.
¿Por qué mi line-height muestra un valor fijo en lugar de clamp()?
Cuando el interlineado mín y máx son iguales, no hay nada que escalar, así que la calculadora entrega un único valor fijo en lugar de un clamp() innecesario. Define interlineados mín y máx distintos si quieres que escale con fluidez.
¿clamp() es compatible con los navegadores?
Sí. clamp() de CSS es compatible con todos los navegadores modernos, incluidos Chrome 79+, Firefox 75+, Safari 13.1+ y Edge 79+. Para navegadores muy antiguos, añade un font-size de reserva sencillo antes de la declaración con clamp().
¿Por qué usar clamp() en lugar de media queries para texto responsive?
Las media queries cambian el tamaño en saltos bruscos en cada breakpoint y requieren un valor distinto para cada elemento y tamaño de pantalla. Un único clamp() escala de forma continua entre dos viewports, así que el texto siempre se ve bien y hay mucho menos CSS que mantener.
Aún no hay comentarios. ¡Sé el primero en comentar!