clamp & viewport units

Let typography grow within limits

Lesson 17 of 20 · 12 min · Module 6: Responsive systems & a second project

Text can respond to available space while staying inside a readable range. A fluid value is most useful when its lower and upper limits are intentional.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Read the three arguments of clamp
Predict viewport-based sizes

The idea

clamp(minimum, preferred, maximum) bounds a preferred value. For clamp(18px, 3vw, 30px), the middle value is three percent of the viewport width, constrained to the given limits.

.title { font-size: clamp(18px, 3vw, 30px); }

01Calculate the preferred value

One vw equals one percent of the viewport width. Multiply the viewport by 0.03 to predict 3vw before applying the limits.

02Apply the boundaries

At narrow widths, the preferred value falls below the minimum. At wide widths, it exceeds the maximum. clamp chooses the appropriate bound.

03Leave room for readable content

Fluid type does not guarantee a good page. Also inspect line length, wrapping, spacing, and text zoom. This exercise focuses on one bounded size rule.

Your turn

Create h1.title with text A little progress, every day. Use clamp(18px, 3vw, 30px) for its font size and a unitless line-height of 1.4. The checks measure font size at 390px, 900px, and 1200px viewport widths.

What the checks look for

Heading has the required text
Small screens use the 18px minimum
A 900px viewport uses 27px type
Large screens stop at 30px
Line height scales with the text

Try it in the editor →

Take this with you

Fluid design works best with explicit limits and real viewport checks.

Go a little further

Use rem-based bounds in a separate experiment and compare the behavior when the browser’s default font size changes.