Diseño / Adaptable
Generador de CSS clamp() para tipografía y espaciado fluidos
Introduce el tamaño mínimo y máximo y los anchos de viewport en los que se aplica cada uno. Obtén una expresión clamp() en rem que escale gradualmente entre ambos, con una tabla de tamaños para anchos de pantalla habituales.
Generador de CSS clamp() para tipografía y espaciado fluidos: La herramienta traza una línea recta entre dos puntos: desde 16 px en un viewport de 320 px hasta 24 px en 1280 px, el tamaño aumenta 0,8333 px por cada 100 px de ancho. La línea se expresa como una parte fija en rem más una parte en vw, 0.8333rem + 0.8333vw, y clamp() la mantiene entre 1rem y 1.5rem fuera de ese intervalo. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.
- Categoría
- Herramientas de desarrollo
- Se ejecuta
- En tu navegador
- Coste
- Gratis · sin registro
- Disponibilidad
- Lista para usar
Funciona por completo en tu navegador
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| Ancho de la ventana gráfica | Tamaño |
|---|---|
| 320 px | 16 px |
| 375 px | 16,46 px |
| 768 px | 19,73 px |
| 800 px | 20 px |
| 1024 px | 21,87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
El valor central de clamp() es una línea recta que pasa por los dos puntos que indicas: suma una cantidad fija en rem a una parte del ancho de la ventana gráfica, de modo que el tamaño cambia gradualmente entre los dos anchos y se detiene en los límites fuera de ellos. Usar rem para la parte fija hace que el tamaño responda a la configuración del tamaño de fuente del lector. Funciona con cualquier longitud: tamaños de fuente, relleno, espacios o márgenes.
Ejemplo resuelto
Para un encabezado de 32 px en un teléfono de 375 px y de 48 px en un equipo de escritorio de 1440 px, la pendiente es 16 ÷ 1065 = 1,5023 px por cada 100 px, y la expresión es clamp(2rem, 1.6479rem + 1.5023vw, 3rem). En una tablet de 800 px, el encabezado mide 38,38 px.
Accesibilidad
Las WCAG exigen que el texto se pueda ampliar hasta un 200 %. Como parte de un tamaño fluido depende de la ventana gráfica, las pendientes muy pronunciadas pueden impedir que el zoom haga que el texto aumente mucho; mantén el tamaño máximo en no más de aproximadamente 2,5 veces el mínimo y usa el generador de escalas tipográficas para elegir pasos coherentes.
Cómo se usa
- Introduce el tamaño mínimo y máximo en px.
- Introduce los anchos de viewport en los que deben aplicarse.
- Copia el valor de clamp() y comprueba los tamaños en la tabla.
Privacidad y límites
El cálculo se realiza en tu navegador.
Herramientas relacionadas
Preguntas frecuentes
¿Por qué no usar solo vw?
Un tamaño expresado únicamente en vw ignora la configuración del tamaño de fuente del lector y puede ser diminuto en los teléfonos o enorme en pantallas anchas. La parte en rem y los límites de clamp() solucionan ambos problemas.
¿Funciona clamp() en todos los navegadores?
Sí: todos los navegadores actuales admiten clamp() desde 2020.
¿El tamaño puede reducirse en pantallas más anchas?
Sí: introduce un tamaño mayor para el ancho mínimo y la expresión restará la parte en vw.
Herramienta gratuita · se ejecuta en tu navegador · sin cuenta