Instead of setting a font size and overriding it at several breakpoints, you can let text scale smoothly with the viewport. CSS clamp() makes this a one-line declaration, with a floor and a ceiling so the text never becomes too small or too large.
How clamp() works
h1 {
font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
}clamp(min, preferred, max) returns the preferred value, but never lower than min or higher than max. Here the heading is never smaller than 1.75rem (28px at the default size) or larger than 3rem (48px), and in between it grows with the viewport width.
Where the numbers come from
To scale from a minimum size at a minimum viewport width to a maximum size at a maximum viewport width, the preferred value is a rem offset plus a vw slope. With size in px and viewport in px:
slope = (maxSize - minSize) / (maxViewport - minViewport)
intercept = minSize - slope * minViewport
preferred = intercept (in rem) + slope * 100 (in vw)
Example: 16px at 320px to 24px at 1200px
slope = 8 / 880 = 0.00909 -> 0.909vw
intercept = 16 - 0.00909 * 320 = 13.09px = 0.818rem
font-size: clamp(1rem, 0.818rem + 0.909vw, 1.5rem);A generator does this arithmetic for you.
Keep it accessible
- Use rem (not px) for the minimum and maximum so the text still respects the user's browser font-size setting.
- Mix a rem term into the preferred value. A pure vw value ignores browser zoom, and WCAG requires text to be resizable up to 200%.
- Test by zooming to 200% and confirm the text gets larger.
Beyond font sizes
- Fluid spacing: padding: clamp(1rem, 4vw, 3rem).
- Fluid widths: width: clamp(280px, 90%, 720px).
- Fluid line length and gaps in card grids.
Frequently asked questions
+What does clamp() do in CSS?
It returns a value that scales with a preferred expression but stays between a minimum and maximum you define.
+Should I use vw for font sizes?
Not on its own, because it ignores browser zoom. Combine vw with a rem value inside clamp() so text remains resizable.
+Is clamp() supported in browsers?
Yes, all modern browsers support it.
+How do I calculate clamp values?
Use the linear-interpolation formula between your minimum and maximum sizes and viewport widths, or use a fluid typography generator.
Fluid Typography
Free, runs in your browser — nothing you enter is uploaded.