/* ❌ Rigid, breaks at breakpoints */
h1 {
font-size: 24px;
}
@media (min-width: 768px) {
h1 { font-size: 32px; }
}
@media (min-width: 1024px) {
h1 { font-size: 48px; }
}
/* ✅ Soft, flows like water */
h1 {
font-size: clamp(1.5rem, 4cqw + 1rem, 3rem);
}
.container {
gap: clamp(0.5rem, 2cqw, 2rem);
}
The softest thing in the universe overcomes the hardest. Text flows smoothly between sizes.
(no code yet)