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);
}

Next lesson: Display property

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies