Fluid typography without media queries
The old way used several media queries with different font-sizes. clamp() scales smoothly between a min and max.
Code Comparison
✕ Old
10 lines
1h1 {
2 font-size: 1rem;
3}
4
5@media (min-width: 600px) {
6 h1 { font-size: 1.5rem; }
7}
8@media (min-width: 900px) {
9 h1 { font-size: 2rem; }
10}
2 font-size: 1rem;
3}
4
5@media (min-width: 600px) {
6 h1 { font-size: 1.5rem; }
7}
8@media (min-width: 900px) {
9 h1 { font-size: 2rem; }
10}
✓ Modern
2 lines
1h1 {
2 font-size: clamp(1rem, 2.5vw, 2rem);
3}
2 font-size: clamp(1rem, 2.5vw, 2rem);
3}
Why the modern way wins
No breakpoint ladder
One declaration. Size scales with viewport instead of jumping at breakpoints.
Smooth scaling
clamp(min, preferred, max) keeps size between bounds. No sudden jumps.
Any unit
Use rem, em, vw, or a mix. Same pattern for line-height or spacing.
Browser Support
96%
Lines Saved
10 → 2
80% less code
Old Approach
Multiple @media
Stepwise font sizes
Modern Approach
One clamp()
Fluid between min and max
How it works
The old approach was a base font-size plus several media queries: at 600px switch to 1.5rem, at 900px to 2rem, and so on. Size jumped at each breakpoint and you had to maintain the ladder.
clamp(1rem, 2.5vw, 2rem) means: never smaller than 1rem, never larger than 2rem, and in between use 2.5vw. One rule, smooth scaling, no media queries.