Fluid Type clamp() Generator

about this tool

Two sizes, two viewport widths, one line of CSS that slides between them. The maths is shown because once you have seen it you can change the numbers without coming back.

It is a straight line

You want a size to be one thing at a narrow screen and another at a wide one, and to move smoothly between. That is two points, which is one line:

slope     = (max size − min size) ÷ (max viewport − min viewport)
intercept = min size − min viewport × slope

CSS writes that line as intercept + slope × 100vw, converts the intercept to rem, and wraps the whole thing in clamp() so it stops at both ends. There is no lookup table and no magic number.

The rem is not optional

A preferred value made only of vw — clamp(1rem, 2.5vw, 2rem) — looks tidier and is broken. Viewport units take no notice of the reader's browser font-size setting, so somebody who has set their default to 24px because they need it gets your text at the size you chose.

That is a WCAG 1.4.4 failure, and it is the most common mistake in hand-written fluid type. Any sensible pair of viewport widths produces a rem term on its own, and this page says so when one does not.

Check the middle, not the ends

The two sizes you typed are the two you are least likely to see. The table shows what the size actually is at the widths people browse at, and marks where clamp() is holding rather than the line running — because a range that is too narrow makes text jump between two sizes instead of sliding, and that only shows up in the middle.

A whole scale

One pair gives you one size. A type system needs a set of them in proportion, so there is an option to build the scale from the base pair using a ratio.

Two ratios rather than one, because a scale that works on a desktop is often too wide on a phone: a 1.125 step at the small end and 1.333 at the large end keeps headings readable on a narrow screen and still gives them presence on a wide one. One ratio cannot do that.

Nothing is sent

It is arithmetic, and it happens in your browser.

For static conversion between the units rather than fluid scaling, px ↔ rem ↔ em ↔ pt does that, and the contrast checker covers the other half of readable text.

questions

How does the clamp() formula work?

It is the equation of a straight line through two points. The slope is the size difference divided by the viewport difference, and the intercept is where that line crosses a viewport of zero. CSS writes the line as rem + vw, and clamp holds it between the two ends.

Why does the middle value need a rem in it?

Because a preferred value made only of vw ignores the reader’s browser font-size setting, so text cannot be enlarged. That fails WCAG 1.4.4. Any sensible pair of viewport widths produces a rem term automatically, and the page warns you when one does not.

What min and max viewport should I use?

320px and 1280px cover most cases: the narrowest phone still in use and a common desktop content width. What matters more is that they are far enough apart, since a narrow range makes the size jump rather than slide.

Can I generate a whole type scale?

Yes. Pick a ratio for the small end and another for the large end, and each step is multiplied from the base at both ends. Two ratios lets a scale stay tight on a phone and open up on a desktop, which one ratio cannot do.

Does clamp() work everywhere?

Yes, in every current browser — it has been supported since 2020. Nothing on this page is sent anywhere; the arithmetic runs in your browser.