Categoría: Desarrollo
Generador de CSS clamp
Tamaños de fuente fluidos sin media queries
Indica un tamaño mínimo y otro máximo con los anchos de viewport a los que corresponden y obtén la declaración clamp() que escala entre ambos, con una tabla de lo que se renderiza en anchos habituales.
font-size: clamp(1.125rem, 0.7826rem + 1.5217vw, 2rem);
| Ancho del viewport | Tamaño renderizado |
|---|---|
| 360px | 18px |
| 768px | 24.21px |
| 1024px | 28.1px |
| 1280px | 32px |
| 1600px | 32px |
Vista previa
La tipografía fluida se lee bien en un móvil y guarda la proporción en el escritorio.
La declaración se construye en la página. No se sube nada.
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
clamp() sustituyó a la pila de media queries que antes hacía saltar un titular entre cuatro tamaños. La parte incómoda es el término central, que debe ser la recta que pasa por tus dos puntos: una pendiente por el viewport más una ordenada, escrita como un valor vw sumado a uno en rem. Aquí se hace esa aritmética por ti. Los dos límites se mantienen en rem para que quien haya ampliado el texto por defecto siga viendo letra más grande, y la tabla muestra el tamaño real a 360, 768, 1024, 1280 y 1600 píxeles. El mismo valor sirve para paddings, huecos y márgenes, no solo para tipografía.
Cómo se usa
- Introduce el tamaño más pequeño y el ancho de viewport donde debe aplicarse.
- Introduce el tamaño mayor y el ancho donde debe dejar de crecer.
- Copia la declaración clamp() y revisa la tabla de vista previa.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Por qué los límites van en rem y no en px?
- Un tamaño expresado solo en unidades de viewport ignora el ajuste de tamaño de texto del navegador, lo que es un fallo de accesibilidad. Los límites en rem escalan con la preferencia de cada persona.
- ¿Puedo usarlo también para espaciados?
- Sí. El valor es una longitud, así que sirve para padding, margin, gap, width y cualquier propiedad que acepte una.
- ¿Se envía algo a un servidor?
- No. La declaración se calcula en la página a partir de los números que escribes, por eso se actualiza al instante.