FluidType Calc
Genera una fórmula clamp() de tamaño de fuente fluido, o una escala tipográfica completa.
Entradas
Salida y vista previa en vivo
El veloz murciélago hindú comía feliz cardillo y kiwi
Cómo funciona la fórmula clamp()
La tipografía fluida interpola linealmente entre un tamaño mínimo en un ancho de viewport mínimo y un tamaño máximo en un ancho de viewport máximo, en vez de saltar entre tamaños fijos en los breakpoints de media query. La pendiente de esa línea se convierte en un término basado en vw:
pendiente = (tamañoMax - tamañoMin) / (viewportMax - viewportMin) intercepto = tamañoMin - pendiente * viewportMin preferido = calc(intercepto-px + (pendiente*100)vw) clamp(tamañoMin-px, preferido, tamañoMax-px)
Ejemplo resuelto: 16px en un viewport de 320px, creciendo a 24px en un viewport de 1280px. Pendiente = (24-16)/(1280-320) = 8/960 ≈ 0.00833. Intercepto = 16 - 0.00833×320 ≈ 13.33. El resultado es clamp(16px, calc(13.33px + 0.83vw), 24px) — exactamente a 320px de ancho el término calc() vuelve a dar 16px, y exactamente a 1280px da 24px, con una rampa suave entre medio. Esto evita los saltos propensos a layout shift de los tamaños basados en breakpoints que la guía de Core Web Vitals de web.dev señala como un costo de UX.
Preguntas frecuentes
¿Cómo evita la fórmula clamp() los saltos de breakpoint?
En vez de saltar entre tamaños fijos en los breakpoints de media query, clamp() interpola linealmente entre tu tamaño mínimo y máximo con una fórmula basada en vw, así el tamaño de fuente cambia suavemente en cada píxel de redimensionado.
¿Para qué sirve el modo de escala tipográfica?
Genera de una vez todo un conjunto de tamaños fluidos (cuerpo, h6...h1) a partir de un tamaño base y una razón, para que toda tu jerarquía de encabezados escale de forma consistente en vez de ajustar cada tamaño a mano.
¿Por qué la vista previa usa un control deslizante en vez de redimensionar el navegador?
Las unidades vw de CSS son relativas a la ventana real del navegador, no a una caja redimensionable en la página, así que el control deslizante recalcula el resultado exacto de clamp() en JavaScript para cualquier ancho simulado sin que tengas que redimensionar tu ventana real.
¿Esto reemplaza por completo las media queries?
Para el tamaño de fuente, normalmente sí dentro del rango mínimo/máximo que definas. Por debajo del viewport mínimo o por encima del máximo, el tamaño queda fijo en tu mínimo o máximo elegido, que es justamente para lo que sirve clamp().