📏 Fluid Typography That Just Works
Writing 5 media queries for font sizes? clamp() does it in one line. Responsive typography perfected.
The Old Way (Painful)
h1 { font-size: 24px; }
@media (min-width: 640px) { h1 { font-size: 32px; } }
@media (min-width: 768px) { h1 { font-size: 40px; } }
@media (min-width: 1024px) { h1 { font-size: 48px; } }
@media (min-width: 1280px) { h1 { font-size: 56px; } }
The New Way (Elegant)
h1 {
font-size: clamp(24px, 5vw, 56px);
}
/* Syntax: clamp(minimum, preferred, maximum) */
/* Font size:
- Never smaller than 24px (mobile)
- Scales with viewport (5vw = 5% of viewport width)
- Never larger than 56px (desktop)
*/
🎯 Real-World Examples
/* Hero heading */
h1 { font-size: clamp(2rem, 6vw, 5rem); }
/* Body text */
p { font-size: clamp(1rem, 2vw, 1.25rem); }
/* Spacing */
.container { padding: clamp(1rem, 5vw, 3rem); }
/* Width */
.article { max-width: clamp(320px, 90vw, 800px); }
🧮 Calculate Perfect Values
Use clamp calculator: utopia.fyi/type/calculator
Input min/max viewport sizes + desired font sizes → Get perfect clamp() values with fallbacks
“Deleted 47 media queries, replaced with clamp(). Typography scales perfectly on all devices. Code is 70% smaller and easier to maintain.”
Browser Support: 96% (all modern browsers). Fallback: font-size: 2rem; font-size: clamp(1.5rem, 4vw, 3rem);