Build a fluid type scale with clamp(), from body text to headings, for two screen widths
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 17 Oct 2026.A fluid type scale makes every heading grow with the screen while keeping the same proportions. Choose a base size and a ratio for small screens, such as 1.2, and a larger ratio for wide screens, such as 1.25, and each step from small print to the largest heading gets its own clamp() value, ready to paste as CSS custom properties.
Set the options you need, or start from the example.
The result is made again every time you change something.
Copy it or download it. Nothing was sent anywhere.
Fluid sizing replaces a stack of media queries with one value: text, spacing or a gap that grows smoothly with the screen and stops at the sizes you choose. The arithmetic is simple but fiddly, which is why most people copy it from a calculator.
How the value is built. Give the size at a small screen width and at a large one. The line through those two points has a slope, in px per px of screen width, and an intercept, the size it would have on a 0px screen:
Type scale. Pick a ratio for small screens and one for large screens, and every step from small print to the largest heading gets its own clamp(), copied as CSS custom properties.
The rest of the article, and all 6 questions about CSS Clamp Generator, are on the CSS Clamp Generator page.
clamp(MIN, VAL, MAX) gives VAL, unless VAL is smaller than MIN or larger than MAX, in which case it gives the limit. For fluid text VAL grows with the screen width, such as 0.8043rem + 0.8696vw, so the font scales smoothly and stops at the minimum and maximum sizes you chose.
A rem value scales with the root font size, which follows the reader's browser setting, so people who enlarge their default text still get larger text. Pixels and vw ignore that setting. Writing the minimum, maximum and intercept in rem keeps fluid type accessible while the vw part adds the growth.
A set of text sizes, from small print to the largest heading, where each step is the previous one multiplied by a ratio, and each size is fluid. Using a smaller ratio on phones and a larger one on desktops, such as 1.2 and 1.25, keeps headings readable on narrow screens and striking on wide ones.
Yes. When the size on the large screen is smaller than on the small screen, the slope is negative and the value reads like 2.5rem - 2vw. The minimum and maximum are swapped into the right order automatically, so the value still stays between the two sizes you entered.
Rates and rules change; check the source before you rely on a figure.
Still stuck? Ask about CSS Clamp Generator and anybody who knows can answer. No account needed.
On the related tools: Cron Expression Generator – Generate a cron expression by choosing when the job should run · Sitemap Index Generator – Split a large site into numbered sitemaps with an index file · Google Analytics URL Builder – The five utm parameters GA4 reads, with the naming traps flagged.