Calculadora de Tipografía Fluida — CSS clamp()
Genera un CSS clamp() que escala el tamaño de fuente suavemente entre dos anchos de viewport — sin necesidad de breakpoints.
746 visitas
Los valores máximos deben superar a los mínimos
Vista previa en vivo (cambia el ancho de la ventana):
Almost before we knew it, we had left the ground.
La Receta de clamp()
La tipografía fluida interpola linealmente entre un tamaño mínimo en un viewport pequeño y un máximo en uno grande: pendiente = (fuente máx−mín) ÷ (viewport máx−mín), luego font-size: clamp(minRem, interceptoRem + pendiente·100vw, maxRem). Para 16→24 px entre viewports de 375→1280 px, eso da clamp(1rem, 0.793rem + 0.884vw, 1.5rem) — exactamente 16 px a los 375, exactamente 24 px a los 1280, fluido en medio, fijo fuera del rango.
La parte en rem del valor preferido importa para la accesibilidad: una fórmula puramente en vw ignora por completo el ajuste de tamaño de fuente del navegador del usuario, mientras que el intercepto en rem mantiene funcionando el zoom y las preferencias de texto grande. Esta calculadora siempre genera la forma mixta.
Preguntas Frecuentes
¿Qué rango de viewport debería usar?
375 px (un teléfono común) hasta el ancho máximo de tu contenido — a menudo 1200-1440 px. Por debajo/encima del rango clamp() se fija en el mín/máx, así que nada se rompe en relojes o pantallas ultraanchas.
¿Puedo usar esto también para el espaciado?
Sí — la misma matemática funciona para padding, márgenes y gaps. Genera con tus valores mín/máx de espaciado y coloca el clamp() en una propiedad personalizada.
¿Por qué mi texto no tiene exactamente el tamaño mínimo en mi teléfono?
Comprueba el ancho real del viewport CSS (píxeles del dispositivo ÷ DPR). Un teléfono de "390 px" es más ancho que el inicio del rango de 375 px, así que el tamaño ya está ligeramente por encima del mínimo — de forma intencionada.
Herramientas Similares
Reportar un Problema
Calculadora de Tipografía Fluida — CSS clamp()