Summary - Responsive typography
Build responsive typography using units.
Combine the units
Responsive typography lets the font size flow with the screen. To do this, rem, vw and calc() are used together.
The idea: rem gives a floor, vw adds screen-based growth, and calc() blends them. The heading stays readable on a narrow screen and impressive on a wide one.
Exercise clamp() for a responsive heading
Write an h1 selector. Set its font size to clamp(1.5rem, 4vw, 3rem). clamp() takes the minimum, preferred and maximum values in order.
Show example solution
/* add the fluid heading */
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}Exercise calc() for a fluid paragraph
Write a p selector. Set its font size to calc(1rem + 0.5vw) and its line height to 1.6.
Show example solution
/* add the fluid paragraph */
p {
font-size: calc(1rem + 0.5vw);
line-height: 1.6;
}Test yourself
-
What is handy for fluid typography?
/* a fixed unit plus a viewport unit */- Only px
- rem and vw together
- Only em
- Only pt
Show answer
rem and vw together — Correct. rem gives a floor, vw adds screen-based growth; together they stay fluid.
-
Fluid heading with calc
h1 { font-size: calc(1rem + ____vw); }Show answer
h1 { font-size: calc(1rem + 2vw); }