FluidType Calc

¿Qué es FluidType Calc?

La "tipografía fluida" es texto que cambia de tamaño suavemente entre un mínimo y un máximo a medida que se redimensiona la ventana del navegador, en vez de saltar bruscamente en los breakpoints — se logra con la función clamp() de CSS, cuya fórmula es complicada de calcular a mano. FluidType Calc genera un valor clamp() listo para usar a partir de los tamaños y anchos de viewport que quieras, ya sea para un solo tamaño de fuente o para una escala tipográfica completa (títulos, cuerpo, subtítulos) de una vez.

Cómo usar FluidType Calc

1. Elige Tamaño único para una sola fórmula de tamaño de fuente, o Escala tipográfica para generar un conjunto completo de tamaños relacionados a la vez.
2. Ingresa tu Tamaño mín. y Tamaño máx. (o base mín./máx. y razón, en modo Escala tipográfica), y los anchos de Viewport mín. / Viewport máx. entre los que debe aplicarse.
3. Arrastra el control de ancho de viewport simulado para previsualizar cómo cambia el texto en distintos anchos de pantalla.
4. Copia el CSS clamp() generado con el botón de copiar y pégalo en tu hoja de estilos.

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 —un valor Base más Step 1, Step 2, etc.— a partir de un tamaño base y una razón, para que tú mismo los asignes a tu jerarquía de encabezados (h1, h2, cuerpo...) con una escala 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().