Fluid typography without media queries
The old way used several media queries with different font-sizes. clamp() scales smoothly between a min and max.
2 font-size: clamp(1rem, 2.5vw, 2rem);
3}
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}
Browser Support for min(), max(), clamp()
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.
Your first month is free
Managed WordPress hosting for faster sites.
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.
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.