Generador de tipografía fluida con CSS clamp()

Tipografía fluida con clamp(): fórmula rem + vw y ejemplo

Un tamaño fluido crece en línea recta entre dos anchos de pantalla: pendiente = (tamaño máx. − tamaño mín.) ÷ (viewport máx. − viewport mín.), expresada en vw, más una constante en rem. De 16 px a 375 px de ancho hasta 32 px a 1.440 px, la herramienta genera clamp(1rem, 0.6479rem + 1.5023vw, 2rem).

La fórmula

• Pendiente m = (tamaño máx. − tamaño mín.) ÷ (viewport máx. − viewport mín.), en px por px.
• Ordenada en el origen b = tamaño mín. − m × viewport mín., en px.
• Valor preferido = b ÷ 16 rem + m × 100 vw (1 vw = 1 % del ancho de la ventana).
• Límites: tamaño mín. ÷ 16 y tamaño máx. ÷ 16 en rem; en modo px, los valores quedan en píxeles.

Ejemplo recalculado

Viewports de 375 y 1.440 px, tamaños de 16 y 32 px: m = 16 ÷ 1.065 = 0,015023, es decir, 1,5023 vw; b = 16 − 0,015023 × 375 = 10,37 px, es decir, 0,6479 rem. Resultado: clamp(1rem, 0.6479rem + 1.5023vw, 2rem). Con 768 px de ancho, la fuente mide 10,37 + 0,015023 × 768 = 21,90 px; se queda en 16 px por debajo de 375 px y en 32 px por encima de 1.440 px.

Hipótesis y límites

• La conversión a rem supone 16 px por rem, el valor por defecto de los navegadores. Si su hoja de estilos cambia el tamaño base de html, recalcule.
• La parte en rem sigue el ajuste de tamaño de letra del usuario, mientras que la parte en vw solo sigue el ancho de la ventana. Cuanto mayor es la pendiente, menos amplía el zoom el texto: compruebe que siga legible al 200 % (criterio 1.4.4 de las WCAG).
• Si los dos viewports son iguales, no hay pendiente calculable: la herramienta devuelve entonces una pendiente de 0 vw y un tamaño fijo igual al tamaño mínimo. Si el tamaño mínimo supera al máximo, los límites de clamp() se reordenan (el menor primero) y el tamaño disminuye a medida que la pantalla se ensancha.

Fuentes y fechas: W3C, WCAG 2.2, criterio 1.4.4 Cambio de tamaño del texto, Recomendación del 12/12/2024 (verificado el 14/10/2026).

Preguntas frecuentes

¿Cómo se interpreta un valor clamp() en CSS?

clamp(mín, preferido, máx) devuelve el valor preferido mientras quede entre los dos límites. Con clamp(1rem, 0.6479rem + 1.5023vw, 2rem), la fuente mide 16 px en pantallas pequeñas, 32 px en grandes y crece de forma lineal entre ambas.

¿Por qué combinar rem y vw en el valor preferido?

Un tamaño solo en vw no responde al ajuste de tamaño de letra del navegador. La parte en rem mantiene esa respuesta, lo que ayuda a cumplir la ampliación del texto al 200 % que exige el criterio WCAG 1.4.4.

¿Cuántos píxeles vale 1 rem?

16 px por defecto, el tamaño base de los navegadores; por eso la herramienta divide los píxeles entre 16. Si su CSS fija html al 62,5 %, 1 rem vale 10 px y hay que recalcular los valores.

¿Qué viewports elegir para la tipografía fluida?

Los valores por defecto, 375 px (smartphone pequeño) y 1.440 px (portátil de pantalla ancha), cubren la mayoría de casos. Fuera de ese rango, el tamaño queda fijo en el mínimo o el máximo.

¿La herramienta es realmente gratuita?

Sí, todas las herramientas en Kristools son 100% gratuitas y accesibles sin registro.

¿Están protegidos mis datos?

Sí. Todo el procesamiento se realiza de forma segura y directa en tu navegador. No se envían datos personales a nuestros servidores.