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.

Next lesson: Responsive images

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies