Tools
Fluid clamp() Calculator
One declaration that grows smoothly between two screen widths and stops at both ends.
No breakpoints, no media queries. The output keeps a rem term, so text still responds when
someone zooms.
Widely availablesince Jan 2023
Almost before we knew it, we had left the ground.
| Width | Computed |
|---|
Build a whole type scale
How the number is made
clamp(min, preferred, max) returns the preferred value, held between the other two. For a
fluid size the preferred value is a straight line: it equals your min size at the "from" width and your
max size at the "to" width. Two points fix a line, so the slope is the size change divided by the width
change, and the rest follows. The table beside the preview is that formula evaluated at each width, and
the preview is rendered with the very declaration you copy.
Why the output has a rem in it
A size written only in vw ignores the reader’s zoom and their browser font setting, because
neither changes the viewport’s width. That fails WCAG 1.4.4, and it is easy to ship without noticing.
Writing the fixed part of the line in rem keeps it tied to the reader’s settings, so zooming
still makes the text bigger. If the slope is steep enough that zooming to 200% cannot double the text, this
tool says so rather than letting it through.
Viewport or container
Switch the basis to Container and the line is measured against the element’s own
container in cqi units, so a card’s heading scales with the card and not with the window.
The parent needs container-type: inline-size. See
container queries on the modern CSS page for browser status.
Pair it with the colour studio for a palette that is derived the same way, or read what is safe to ship.