clamp() es una función matemática CSS que fija un valor entre un mínimo y un máximo: clamp(MIN, VAL, MAX). Devuelve VAL mientras se mantenga entre MIN y MAX — cuando VAL baja de MIN devuelve MIN, y cuando sube de MAX devuelve MAX. Esto hace posible la tipografía fluida sin media queries.
Define tus tamaños de fuente mínimo y máximo, más el rango de viewport donde ocurre el escalado. La herramienta calcula la fórmula perfecta basada en vw y muestra una vista previa del tamaño de fuente en seis anchos de viewport, más una curva de cómo cambia el tamaño en todo el rango.
Frequently Asked Questions
Q: ¿Qué hace clamp() en CSS?
¿Qué hace clamp() en CSS? clamp(MIN, VAL, MAX) elige un valor entre MIN y MAX. Si VAL es menor que MIN devuelve MIN, si es mayor que MAX devuelve MAX, y en caso contrario devuelve VAL. Perfecto para tamaños fluidos que nunca quedan demasiado pequeños ni grandes.
Q: ¿En qué se diferencia clamp() de min() y max()?
¿En qué se diferencia clamp() de min() y max()? min() elige el valor más pequeño, max() el más grande, y clamp() combina ambos: limita el valor medio entre un límite inferior y uno superior. clamp() es el caballo de batalla de la tipografía fluida.
Q: ¿clamp() está soportado en todos los navegadores?
¿clamp() está soportado en todos los navegadores? Sí. clamp(), min() y max() están soportados en todos los navegadores modernos desde 2020 (Chrome 79+, Firefox 75+, Safari 13.1+).
Q: ¿Qué tamaños de viewport debo usar para tipografía fluida?
¿Qué tamaños de viewport debo usar para tipografía fluida? Rangos comunes son 320px-1200px para sitios generales, o 360px-768px para proyectos mobile-first. Más allá de vmax el tamaño se fija en el máximo — es intencional.
Q: ¿Puedo usar clamp() también para espaciado?
¿Puedo usar clamp() también para espaciado? Sí. El padding y los gaps fluidos usan la misma fórmula: clamp(16px, 4vw, 48px). El espaciado fluido mantiene el ritmo entre dispositivos sin media queries extra.
Colores del Mundo Hispano
Del añil guatemalteco al rosa mexicano, el mundo hispanohablante tiene una rica tradición cromática. Estos colores nacen de textiles indígenas, arquitectura colonial y festividades, y hoy inspiran paletas llenas de carácter.
Rosa Mexicano #E4007CColor icónico del diseño mexicano, creado por Ramón Valdiosera
Azul Añil #4B0082Tinte tradicional de los textiles mayas de Guatemala
Rojo Bermellón #E34234El rojo intenso de los toros y la cerámica española
Amarillo Maíz #F4B41AEl oro del maíz, base de la alimentación mesoamericana
Verde Jade #00A86BLa piedra sagrada de mayas y aztecas
Azul Celeste #A5C8E1El azul de la bandera argentina y el cielo porteño
Terracota #E2725BArcilla cocida — el color de los tejados coloniales
Vino Tinto #722F37El burdeos de las bodegas de La Rioja
Oro Colonial #D4AF37El dorado de los retablos barrocos americanos
Turquesa Caribe #40E0D0El color de las playas del Caribe
Q: ¿Qué es el rosa mexicano?
¿Qué es el rosa mexicano? El rosa mexicano (#E4007C) es un color vibrante promovido por el diseñador Ramón Valdiosera en los años 40 como símbolo de identidad nacional, usado hoy en artesanías, textiles y diseño contemporáneo.
Q: ¿Qué es el azul añil?
¿Qué es el azul añil? El añil es un tinte natural azul extraído de la planta del índigo, usado en los textiles mayas de Guatemala y en los huipiles tradicionales desde tiempos prehispánicos.