Responsive typography
Learn responsive typography with clamp() and vw units.
What is the vw unit?
vw (viewport width) is one percent of the viewport width. 1vw = 1% of the viewport width. On a 1200px-wide screen, 1vw = 12px.
Used for font size, the text shrinks as the screen narrows:
h1 { font-size: 5vw; }Using vw alone is risky: on very narrow screens the text becomes unreadably small, and on very wide screens it grows too large.
The clamp() function
clamp() takes three values: clamp(min, preferred, max). The browser uses the preferred value, but it never goes below min or above max.
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}Here the font scales with 4vw but never drops below 1.5rem or grows above 3rem. It tames vw's edge cases.
A responsive font strategy
A common recipe for responsive typography is clamp(min, vw, max). Min is the readable floor on phones; max is the tasteful ceiling on wide screens; vw gives a fluid transition in between.
Example: clamp(1rem, 2.5vw, 1.5rem). 1rem on phones, 1.5rem on desktops, fluid in between. rem-based limits preserve accessibility (the user's browser font size setting).
Exercise A clamp-based responsive h1
Add font-size: clamp(2rem, 5vw, 4rem) to an h1 selector. The font should scale fluidly with 5vw, between 2rem and 4rem.
Show example solution
/* Fluid but bounded font size for h1 */
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}Test yourself
-
How many px is 5vw at 800px width?
- 5px
- 8px
- 40px
- 400px
Show answer
40px — Correct. 800 × 0.05 = 40px. 5vw is 5% of 800px.
-
Complete the clamp() call
h1 { font-size: clamp(1.5rem, ____, 3rem); }Show answer
h1 { font-size: clamp(1.5rem, 4vw, 3rem); } -
What does clamp() solve?
- It changes the font family
- It stops pure vw from shrinking or growing the text too far
- It disables page zoom
- It makes colors responsive
Show answer
It stops pure vw from shrinking or growing the text too far — Correct. clamp() bounds vw's extreme values with a min and a max.