How to Create Fluid Typography with CSS Clamp: Step-by-Step Guide

Step-by-Step

1. Set your minimum font size — how small the text should get on the narrowest screen you support.
2. Set your maximum font size — how large it should get on the widest screen you're designing for.
3. Set your minimum and maximum viewport widths — the screen widths at which those minimum and maximum sizes should apply (320px and 1200-1440px are common defaults).
4. Copy the generated clamp() declaration into your CSS.

The Output

h1 {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);
}

Below the minimum viewport width, the font size stays fixed at 1.5rem. Above the maximum viewport width, it stays fixed at 3rem. In between, it scales smoothly and continuously, following the calculated vw + rem formula.

Applying It to More Than One Element

A complete type scale — body text, headings at various levels, captions — typically uses several different clamp() declarations, one per size step, but sharing the same minimum and maximum viewport widths across all of them. This keeps every text size reaching its maximum at the same screen width, preserving consistent visual proportions as the layout grows.

Testing It

Resize your browser window slowly from narrow to wide while watching the text — it should grow smoothly with no visible jump, unlike a media-query-based approach where sizes snap abruptly at specific breakpoints.