Fluid typography with clamp: readable from mobile to desktop

Goal: make a heading respond to viewport width while respecting a readable minimum and a defined maximum.

Prerequisite: a test HTML file or HTML block. Use the dedicated practice-title class to avoid changing other headings.

Run the code below. The three clamp arguments are the minimum, preferred value, and maximum.

Here, 1.5rem is the minimum and 3rem the maximum. A rem is relative to the root element’s font size.

The expression 1rem + 2vw supplies the fluid component. A vw equals one percent of viewport width.

With a 16-pixel root font, a 320-pixel viewport gives a preferred value of 22.4 pixels, so the 24-pixel minimum applies.

Under the same assumption, an 800-pixel viewport gives 32 pixels, while a 1600-pixel viewport reaches the 48-pixel cap.

Resize the window gradually. The heading should scale continuously instead of jumping between fixed sizes.

Replace the heading with a long sentence. Line height and wrapping should keep its lines from overlapping.

Test at 200% zoom. Combining rem and vw is a starting point; verify actual text enlargement and readability.

Read Computed font-size in developer tools at the three widths. Investigate root font size or theme overrides if values differ.

Success check: readable text, no overflow, and clear size limits. Apply the rule to a real page only after testing it there.

Complete example code

<h1 class="practice-title">A title that grows smoothly</h1>
<style>
.practice-title {
  font-size:clamp(1.5rem, 1rem + 2vw, 3rem);
  line-height:1.25;
  overflow-wrap:anywhere;
  color:#f4f7fb;
}
</style>

Official sources

• MDN — clamp()
• MDN — font-size