Generador de CSS clamp()

Un generador de clamp() que solo necesita dos tamaños de pantalla

Este generador de CSS clamp() recibe un tamaño para una pantalla pequeña y otro para una pantalla grande, y crea una expresión clamp() que los une sin saltos. Por ejemplo, un texto de cuerpo que mide 16px con un ancho de pantalla de 360px y 20px con 1280px da como resultado font-size: clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem);. Por debajo de 360px el texto se queda en 16px, por encima de 1280px se queda en 20px, y entre ambos crece en proporción al ancho de pantalla.

Si arrastras los dos puntos del gráfico de la rampa de tamaño que tienes arriba, la expresión cambia al instante. Si mueves el cursor vertical, ves cuántos px resultan con ese ancho de pantalla. La vista previa de la derecha muestra una pantalla reducida con ese ancho y dibuja, como muestra a tamaño real, el valor que ha calculado el propio navegador. Puedes elegir la salida en rem o px y tomar como base el ancho de pantalla (vw) o el ancho del contenedor (cqi). Si el valor es un tamaño de fuente, la comprobación de zoom indica si el texto sigue llegando a 2× al ampliar la página, y la escala tipográfica crea una serie de pasos de título con una razón constante.

Por qué unir tamaños con clamp()

Cuando cambias un tamaño con una media query, el valor da un salto en el ancho que hayas fijado. Un título de 16px con 767px pasa de golpe a 28px con 768px. Los dispositivos que quedan justo a un lado y otro de esa frontera suelen mostrar un texto demasiado grande o demasiado pequeño para su pantalla, y cada punto de corte nuevo añade una regla más que mantener. clamp() traza una recta entre un mínimo y un máximo, de modo que una sola regla cubre todos los anchos.

• Títulos que deben ser pequeños en el móvil y grandes en el escritorio: sirve para textos con mucha diferencia de tamaño, como el título principal de una página. Si el máximo supera 2,5 veces el mínimo, revisa siempre la comprobación de zoom (véase «Zoom y accesibilidad» más abajo).
• Espacios que respiran según la pantalla: el gap entre tarjetas o el margen entre secciones puede reducirse en pantallas estrechas y ampliarse en las anchas.
• Ancho del texto y relleno interior: permite que el width o el padding de una caja de texto crezca con la pantalla y se detenga en el tamaño que fijes.
• Cuando el diseño solo tiene dos maquetas: si tienes los valores de la maqueta móvil y de la de escritorio, pero nada intermedio, escribe ambos valores y deja que la fórmula rellene el tramo que falta.
• Cuando un componente aparece en sitios de distinto ancho: si la misma tarjeta se usa en una barra lateral y en la columna principal, conviene tomar como base el ancho de la tarjeta y no el de la pantalla. En ese caso cambia la base a contenedor (cqi).

Cómo se usa

1. Pulsa en la franja de arriba el ejemplo más parecido a tu caso, o escribe el ancho de pantalla y el tamaño de la pantalla pequeña y de la grande. Si arrastras los dos puntos del gráfico, cambian los mismos campos.
2. Elige la propiedad (font-size, gap, padding, width), la unidad de salida (rem o px) y la base (pantalla vw o contenedor cqi). Para tamaños de fuente es mejor la salida en rem.
3. Arrastra el cursor vertical del gráfico o pulsa un valor de la lista de anchos de pantalla para ver el tamaño en un móvil, una tableta, un portátil y un monitor. «Recorrer el ancho» mueve la muestra como si ensancharas y estrecharas la ventana.
4. Si es un tamaño de fuente, mira en la comprobación de zoom si el texto llega a 2× dentro del zoom del 500%. Si no llega, cambia el máximo o el mínimo según lo que se indica.
5. «Copiar declaración» te da una línea de CSS, «Copiar expresión» solo la parte de clamp() y «Copiar variables» toda la escala tipográfica. «Copiar enlace» guarda los ajustes actuales en la dirección.

Cómo se calcula: pendiente, ordenada y coeficiente de vw

La herramienta halla la recta que pasa por dos puntos, (ancho de pantalla pequeña w₁, tamaño s₁) y (ancho de pantalla grande w₂, tamaño s₂), y después expresa esa recta en unidades que CSS entiende.

• Pendiente = (s₂ − s₁) ÷ (w₂ − w₁). Indica cuánto cambia el tamaño por cada 1px de ancho de pantalla.
• Coeficiente de vw = pendiente × 100. Como 1vw es el 1% del ancho de pantalla, hay que multiplicar por 100 para obtener un valor en vw.
• Ordenada = s₁ − pendiente × w₁. Es el valor con un ancho de pantalla de 0, la parte fija de la expresión. Para la salida en rem se divide entre el tamaño de fuente raíz (normalmente 16px).

Con 16px a 360px y 20px a 1280px, la pendiente es 4 ÷ 920 = 0.004348, el coeficiente de vw es 0.4348vw y la ordenada en el origen es 16 − 0.004348 × 360 = 14.4348px = 0.9022rem. Si pones el mínimo y el máximo a los lados, resulta clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem). Estos son los valores que da esa expresión con cada ancho de pantalla.

La especificación define clamp(MIN, VAL, MAX) como equivalente a max(MIN, min(VAL, MAX)). Por eso, en cuanto la expresión central se sale del rango, el valor del extremo ocupa su lugar. La línea de puntos del gráfico es la expresión central antes de cortarse, y la línea gruesa es el valor que se usa de verdad. Si escribes un tamaño de pantalla grande menor que el de pantalla pequeña, el valor disminuye al ensancharse la pantalla, y esta herramienta intercambia los límites para poner primero el menor.

Valores habituales

Son las expresiones de los ejemplos de la franja, calculadas para 360px → 1280px con un tamaño de fuente raíz de 16px. Úsalas como punto de partida y ajústalas a tu diseño.

px o rem: qué salida elegir

El navegador ofrece dos maneras de agrandar el texto. El zoom de página (Ctrl o ⌘ y +) agranda todo, y lo hace reduciendo el ancho de pantalla que ve CSS. El tamaño de fuente de los ajustes del navegador cambia solo el tamaño de fuente raíz, que es la base de rem. Un límite escrito en px ignora el ajuste de tamaño de fuente, y la parte de vw se queda igual en ambos casos. Con el ejemplo del texto de cuerpo (16 → 20px, 360 → 1280px), los resultados son estos.

Con salida en rem, el ajuste de tamaño de fuente agranda el texto exactamente en la misma proporción que el zoom de página. Los límites y la ordenada se duplican a la vez, y solo la parte de vw se queda como está. Con salida en px, cambiar el ajuste no tiene ningún efecto, de modo que un usuario que depende de una fuente grande no nota ningún cambio. Una pauta razonable es usar rem para los tamaños de fuente y px para los valores que no deben seguir el ajuste, como los bordes. Si un sitio cambia la raíz a 10px con html { font-size: 62.5%; }, escribe 10 en el campo del tamaño de fuente raíz para que los valores en rem salgan bien.

Ancho de pantalla (vw) o ancho del contenedor (cqi)

vw toma como base el ancho de la pantalla del navegador, así que el valor no cambia aunque una tarjeta pase a una barra lateral estrecha dentro de la misma pantalla. La unidad de contenedor cqi es el 1% del ancho interior (en escritura horizontal, la anchura) del contenedor más cercano. Si das al elemento padre container-type: inline-size; y cambias la base de esta herramienta a contenedor, el eje horizontal del gráfico pasa a ser el ancho del contenedor y cqi ocupa en la expresión el lugar de vw.

• CSS Containment 3 establece que, si no se encuentra un contenedor adecuado, cqi se calcula con el tamaño del viewport pequeño. Si olvidas container-type en el elemento padre, el valor se comporta de forma parecida a uno basado en la pantalla, y el error cuesta notarlo.
• Según CSS Values 4, las unidades de viewport se calculan como si no hubiera barra de desplazamiento (una excepción es un caso como overflow: scroll, donde la barra siempre está presente). En entornos donde la barra de desplazamiento ocupa espacio, 100vw puede ser más ancho que el área real del contenido y provocar desbordamiento horizontal. Para anchos, cqi o % es más seguro.
• Las unidades de contenedor se admiten desde Chrome 105, Firefox 110 y Safari 16 (véase la tabla de compatibilidad más abajo).

Zoom y accesibilidad: ¿llega a 2×?

El criterio de éxito 1.4.4 (Cambio de tamaño del texto) de WCAG 2.2 establece que el texto debe poder ampliarse hasta el 200% sin tecnologías de apoyo y sin perder contenido ni funciones. W3C recoge aparte el fallo F94 para el texto dimensionado solo con unidades de viewport, que no crece al ampliar. Al hacer zoom, el ancho CSS de la pantalla se reduce y la parte de vw disminuye, de modo que el texto creado con clamp() crece menos que el factor de zoom.

Maxwell Barvian (Smashing Magazine, 2023) señaló que los navegadores modernos amplían hasta el 500% y resumió que, si el tamaño máximo no supera 2,5 veces el tamaño mínimo, el texto llega a 2× dentro del 500% con cualquier ancho de ventana. Además de esa regla, esta herramienta calcula los anchos de ventana de 320 a 3840px y busca el más desfavorable. Con una pantalla pequeña de 360px y 16px, una pantalla grande de 1280px y solo el tamaño máximo variable, los resultados son estos.

Si solo se mira el zoom del 200%, incluso el ejemplo del texto de cuerpo, con un máx. ÷ mín. de 1,25, queda en 1,72× en una ventana de 1280px. Para llegar a 2× con ese ancho habría que ampliar al 239%. Si necesitas superar una comprobación que exige exactamente 2× con zoom del 200%, reduce más la parte de vw, o deja los tamaños de fuente en rem puro y usa clamp() solo para espacios y rellenos. Con una pendiente tan fuerte como la de la fila de 64px, hay incluso anchos de ventana en los que el texto se hace más pequeño con zoom del 200%.

Escala tipográfica: pasos de título con una sola razón

Una escala tipográfica crea los pasos de título multiplicando el tamaño del cuerpo, una y otra vez, por una razón constante. Utopia (James Gilyead y Trys Mudford, 2020) presentó un método con razones distintas para la pantalla pequeña y la grande, uniendo cada paso con clamp(). Con una razón mayor en la pantalla grande, las diferencias entre los pasos de título aumentan en pantallas anchas, mientras que en las estrechas los pasos quedan más juntos. Esta herramienta toma el valor creado arriba como paso 0 y genera variables CSS como --step-1 y --step--1.

Cuanto mayor es la diferencia entre la razón de la pantalla pequeña y la de la grande, más rápido crece el máx. ÷ mín. de los pasos superiores. Para un cuerpo de 16 → 20px con 1,2 y 1,25, el paso 5 es 39.81 → 61.04px, una relación de 1,53 que queda dentro del criterio de zoom. Con 1,2 y 1,5, el paso 5 pasa a ser 39.81 → 151.88px, una relación de 3,8, que lo supera. La marca que aparece a la derecha de la lista de pasos es la comprobación de zoom recalculada para cada paso.

Compatibilidad con navegadores

MDN clasifica clamp() como Baseline Widely available, es decir, que funciona en los principales navegadores desde julio de 2020. El borrador de CSS Values 4 define también una sintaxis que pone none en el lugar del mínimo o del máximo, pero los datos de compatibilidad de MDN todavía no tienen una entrada de soporte para ella, así que esta herramienta no la usa.

Errores frecuentes

• No multiplicar por 100 el coeficiente de vw: si escribes la pendiente 0,004348 como 0.004348vw, el cambio se reduce a la centésima parte y el valor queda casi fijo.
• Creer que clamp() debe ir dentro de calc(): los tres huecos de clamp() ya admiten sumas y restas, así que clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem) basta. Si lo envuelves en calc(), el resultado es el mismo.
• Pegar una expresión en rem en un sitio con otra raíz: en un sitio cuya raíz es 10px, 1rem equivale a 10px. Cambia el campo del tamaño de fuente raíz al valor de ese sitio y vuelve a generar la expresión.
• Intercambiar el mínimo y el máximo: cuando el mínimo es mayor que el máximo, clamp() usa el mínimo. Si al editar a mano intercambias los dos valores, el resultado se queda fijo en un valor con cualquier ancho.
• Dar tamaño al texto solo con vw: font-size: 5vw no crece al ampliar, y eso es el fallo F94 de WCAG. Cámbialo por un clamp() con ordenada en rem y mira la comprobación de zoom.
• Usar 100vw para un ancho: donde la barra de desplazamiento ocupa espacio, provoca desplazamiento horizontal. Para el máximo o la expresión central de un ancho, valora % o cqi.
• Fijar el interlineado en px: solo crece el texto y el interlineado se queda igual, así que las líneas se solapan. Usa un valor sin unidad, como line-height: 1.5.

Límites y precauciones

• Solo crea una recta que pasa por dos puntos. Para cambiar la pendiente en varios tramos hacen falta varias reglas clamp() combinadas con media queries o container queries.
• La comprobación de zoom calcula según el comportamiento de Chrome y Firefox, donde al ampliar el ancho CSS de la pantalla se reduce según el factor de zoom. El artículo de Smashing Magazine señala también que Safari puede ampliar de otra manera. La decisión final debe tomarse ampliando la página real.
• El cálculo del ajuste de tamaño de fuente supone que el tamaño de fuente de html no está definido o está en % o rem. En un sitio que fija en px el tamaño de fuente de html, rem tampoco sigue el ajuste.
• Si eliges la base de contenedor, se trata toda la pantalla de la vista previa como contenedor. El valor cambia según el relleno y el borde del contenedor real.
• Los números de la expresión se redondean a cuatro decimales. Incluso en una pantalla de 1920px, la diferencia es menor que 0.01px.
• La vista previa usa la fuente predeterminada de este dispositivo. Si el ajuste de tamaño mínimo de fuente del navegador está activado, un valor pequeño puede subir hasta ese tamaño.

Fecha de referencia W3C CSS Values and Units Level 4 (Working Draft 2024-03-12), CSS Containment Level 3 (Working Draft 2022-08-18), WCAG 2.2 Understanding 1.4.4 y F94, y los datos de compatibilidad de MDN (browser-compat-data 8.1.6, 2026-10-15) se comprobaron en los textos originales el 2026-10-21. Las cifras de las tablas se obtuvieron con el núcleo de cálculo de esta herramienta.

Fuentes

• 01W3C: CSS Values and Units Module Level 4Working Draft 2024-03-12. clamp(MIN, VAL, MAX) = max(MIN, min(VAL, MAX)); si el mínimo choca con el máximo, prevalece el mínimo; las unidades de viewport se calculan como si no hubiera barra de desplazamiento
• 02MDN: clamp()Baseline Widely available (julio de 2020), nota de accesibilidad, compatibilidad Chrome 79, Firefox 75, Safari 13.1
• 03W3C: CSS Containment Module Level 3Working Draft 2022-08-18. §6 unidades de contenedor cqw, cqh, cqi, cqb; sin contenedor adecuado, se toma como base el tamaño del viewport pequeño
• 04MDN: Using container size and style queriesUso de container-type y de las unidades de contenedor; datos de compatibilidad de las unidades de contenedor: Chrome 105, Firefox 110, Safari 16
• 05W3C WAI: Understanding Success Criterion 1.4.4 Resize TextEl texto debe poder ampliarse hasta el 200% sin tecnologías de apoyo (AA)
• 06W3C WAI: F94 Failure due to incorrect use of viewport units to resize textEl texto dimensionado solo con unidades de viewport no crece con el zoom ni con el ajuste de tamaño de fuente
• 07Smashing Magazine: Addressing Accessibility Concerns With Using Fluid TypeMaxwell Barvian, 2023-11-07. Criterio del zoom del 500%; cumple si el tamaño máximo es como mucho el tamaño mínimo × 2,5
• 08Utopia: Designing with fluid type scalesJames Gilyead, 2020-02-01. Escala tipográfica fluida con razones distintas para la pantalla pequeña y la grande

Preguntas frecuentes

Herramientas relacionadas