Also available in: Español · Português · Français · العربية
CSS Clamp Generator
Build a fluid font size from a minimum, a maximum and the viewport range between them — and check what it gives a reader who has turned their text up.
What is a CSS clamp?
The CSS clamp() function takes three values — a minimum, a preferred value and a maximum — and returns the preferred one unless it falls outside the other two. For typography that means a font size that grows with the window and then stops: small on a phone, larger on a desktop, never absurd on an ultra-wide monitor. It replaced a stack of media queries with one declaration, which is why fluid type became common the moment browsers supported it.
The interesting part is the middle value. To be fluid it has to depend on the viewport, so it is written with vw units, and a straight line through two anchors is what everybody uses: this size at this width, that size at that width, interpolate between them. That line is arithmetic rather than a rule of thumb, and this generator computes it exactly.
It also does something most generators do not, which is show you what your clamp gives to somebody whose browser font size is not the default. That turns out to matter more than the arithmetic.
How to use it
- Set your two anchors. The font size you want at your narrowest supported viewport and at your widest. The defaults are 16px at 320px and 24px at 1280px, which is a common starting point.
- Copy the declaration. The middle term comes out as a rem plus a vw. That rem is not decoration — the next panel is about what happens without it.
- Change the reader's font size. The table compares your clamp against the same anchors written in viewport units alone, across four widths, for whatever default font size you type. Try 24px.
Why the middle term needs a rem in it
A fluid clamp is normally written with rem bounds and a viewport-only middle: something like clamp(1rem, 1.875vw, 1.5rem). The bounds are relative to the reader's font size and the middle is relative to the window, and that mismatch is the problem. When somebody turns their browser's default text size up, the floor and the ceiling both rise. The thing between them does not move at all, because nothing in it is measured in the reader's units.
The consequence is worse than the size simply being wrong. Take that clamp and a reader whose default is 24px. At a 320px viewport they get 24.00px. At 600px they get 24.00px. At 900px, and at 1280px, they still get 24.00px. The middle term never rises above the floor, so the clamp is pinned to its minimum across the entire design range and the type has stopped being fluid at all. Written with a rem in the middle term, the same reader gets 24.00px at the narrow end rising to 30.67px at the wide one.
That collapse is not a quirk of those numbers. The viewport-only middle term reaches its largest value at the wide anchor, and by construction that value is the maximum you asked for — so any reader whose 1rem has reached your maximum is held at the floor everywhere. It is exact, and it is why the threshold this page shows is always equal to your maximum size.
There is a grim symmetry to it: the readers for whom the clamp silently stops working are precisely the ones who enlarged their text because they needed it to respond. Nothing warns you, because on your machine at 16px everything behaves.
How this was checked, and what it does not cover
The arithmetic is an identity, so it is verified as one. A line through two points hits both of them, and that was checked against 576 generated combinations of sizes, viewports and root font sizes rather than against a single worked example — an identity that holds for one case and not the rest is exactly what a worked example cannot tell you. Every one of them lands on both anchors, within the rounding the four decimal places in a stylesheet permit.
The comparison table is a measurement rather than an illustration. Both forms were evaluated the way a browser evaluates clamp — take the preferred value, then bound it — across a range of reader font sizes and viewport widths, before any of this was written. The figures quoted above are that measurement.
One correction worth passing on from building it. CSS defines clamp(MIN, VAL, MAX) as max(MIN, min(VAL, MAX)), which means that if you put a minimum larger than your maximum, the minimum wins at every width and a browser will not helpfully swap them. This generator reproduces that rather than tidying it, because the tidying is what would surprise you later.
What is not covered: this models font-size, and while clamp() works for any length, the accessibility argument here is specifically about text. It also assumes the reader's font size is the only thing they have changed — page zoom scales the viewport too, and behaves differently from a font-size preference. And a preferred term with a rem in it is not automatically sufficient; it makes the clamp respond to the reader, which is necessary rather than the whole of accessible typography.
Why is it free?
It is a line through two points, computed in your browser. There is nothing to run on a server, so there is nothing to charge for and no account to create.
Nothing you type is uploaded, stored or logged. It would not be interesting if it were, and that is rather the point — a tool this small has no business collecting anything.