Generador de clamp() de CSS: fuentes y espaciado fluidos

Cómo se usa

Elija la Propiedad y escriba el Tamaño menor y el Tamaño mayor; después, elija la Unidad de los tamaños.
Escriba los dos anchos en Ancho de ventana donde el tamaño es menor y Ancho de ventana donde el tamaño es mayor, y elija su unidad.
Si usó rem en algún lugar, compruebe el Tamaño de fuente raíz (px). Los navegadores usan 16 px salvo que el sitio fije otro tamaño.
Copie la Declaración CSS, o revise el Desarrollo y la tabla Tamaño en anchos habituales para ver el resultado en cada ancho.

Cómo hace clamp() fluido un tamaño

clamp(MIN, VAL, MAX) recibe un mínimo, un valor preferido y un máximo. La especificación CSS Values and Units (en inglés) indica que equivale exactamente a max(MIN, min(VAL, MAX)). Así, el tamaño nunca baja de MIN ni sube de MAX, y entre ambos sigue a VAL, que aquí es una recta que depende del ancho de la ventana.

La recta va desde el tamaño menor con el ancho de ventana menor hasta el tamaño mayor con el ancho de ventana mayor. Fuera de esos dos anchos, el tamaño se mantiene.

pendiente = (tamaño mayor - tamaño menor) / (ventana mayor - ventana menor);  ordenada = tamaño menor - pendiente × ventana menor;  valor preferido = ordenada + pendiente × 100vw

Pendiente, ordenada en el origen y el término vw

La pendiente es cuánto crece el tamaño por cada píxel de ancho de ventana. La ordenada en el origen es el punto donde la misma recta corta un ancho de cero. Una unidad vw es el uno por ciento del ancho de la ventana, así que la pendiente multiplicada por 100 da el término que sigue a la ventana.

Los dos anchos y los dos tamaños se calculan en píxeles antes de hallar la pendiente. Un valor en rem se multiplica por el tamaño de fuente raíz, así que el mismo diseño da el mismo resultado en rem o en px cuando la raíz es de 16 px.

Mantenga el tamaño mayor igual o superior al menor. La herramienta rechaza un tamaño mayor más pequeño, porque esa recta se reduciría al crecer la pantalla.
Un término vw no sigue el ajuste de tamaño de texto del visitante, pero una ordenada en rem sí. Pruebe la página con un zoom de 200 %, y mantenga la ordenada en rem siempre que pueda.

Ejemplo resuelto: una fuente de 16 px a 24 px

Entre una ventana de 320 px y una de 1200 px, la fuente crece de 16 px a 24 px. La pendiente es (24 - 16) / (1200 - 320) = 8 / 880, que es 0.0091 con cuatro decimales. La ordenada en el origen es 16 - 0.0091 × 320 = 13.0909 px, y el término de ventana es 0.9091 vw.

El valor es clamp(16px, 13.0909px + 0.9091vw, 24px), así que la declaración CSS es font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);. Con unidades rem, de 1rem a 1.5rem entre 20rem y 75rem y con una raíz de 16 px, da clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem).

Preguntas frecuentes

¿Qué pasa con el tamaño cuando la ventana es más estrecha que el ancho menor?

El tamaño se mantiene en el tamaño menor. La fórmula clamp() nunca deja que el valor baje de su mínimo, así que el texto conserva el tamaño que fijó para el ancho más estrecho.

¿Por qué la parte de la ventana se escribe en vw?

Una unidad vw es el uno por ciento del ancho de la ventana, así que cambia cuando cambia el tamaño de la ventana del navegador. Un valor en píxeles o en rem no cambiaría con la ventana, y el tamaño no podría seguirla.

¿Por qué el código a veces pone primero la parte vw?

Cuando la ordenada en el origen es negativa, el código escribe primero la parte vw y resta la ordenada, lo que se lee con más claridad. Las dos formas dan el mismo valor.

¿Puedo usar el valor para el relleno, el margen o la separación?

Sí. Elija relleno, margen o separación en Propiedad. La misma recta sirve para cualquier longitud, así que el espaciado crece con la ventana igual que un tamaño de fuente.

¿Qué navegadores admiten clamp()?

Todos los navegadores principales actuales admiten clamp(). Si sus visitantes usan versiones antiguas, compruebe la página en esas versiones antes de fiarse del tamaño fluido.

¿Se guarda o se envía algo de lo que escribe?

No. El valor se calcula en su navegador, y nada de lo que escribe se guarda ni se envía a nuestro servidor. Copie la declaración antes de salir de la página.

Fuentes

Cifras y texto revisados por última vez el martes, 10 de noviembre de 2026.

Resultado

Desarrollo