Tools — 10
One value that knows how wide the window is.
This is the single-value tool: a container padding, a gutter, a hero that has to stop growing at 1440px. Set a floor, a ceiling and the two viewports they belong to, then drag the simulator and watch the number behave. For a whole set of sizes at once, the type and spacing scales emit clamp() per step.
Inputs
Preview as
Viewport simulator
At 768px wide the value resolves to 30px — interpolating. It stays at 18px below 320px, grows by 2.679px for every 100px of viewport, and stops at 48px from 1440px upwards.
Built for the quiet parts of the interface.
768px viewport — 30px resolved
Copy-ready value
clamp(1.125rem, 0.5893rem + 2.6786vw, 3rem)
font-size: clamp(1.125rem, 0.5893rem + 2.6786vw, 3rem);The preferred term is written in rem plus vw rather than vw alone, so the value still responds when a reader zooms the text. For a whole set of sizes at once, use the fluid type scale or the fluid spacing scale.
Reference
CSS clamp(min, preferred, max) returns the preferred value unless it falls outside the bounds, in which case it returns the nearer bound. For a fluid size, the preferred term is a linear equation: slope = (maxValue − minValue) / (maxViewport − minViewport), expressed as rem + vw.
What does CSS clamp() do?
clamp() takes three values — a minimum, a preferred value, and a maximum — and resolves to the preferred value clamped between the other two. It is equivalent to max(min, min(preferred, max)).
It is supported in all current browsers and can be used anywhere a length is valid: font-size, padding, width, gap, even inside a calc().
How do you calculate a fluid clamp() value?
Take the two sizes you want and the two viewport widths they belong to, then find the straight line between them. The slope is (maxValue − minValue) / (maxViewport − minViewport), and multiplying it by 100 gives the vw coefficient.
The intercept is minValue − slope × minViewport, converted to rem. For 18px at 320px growing to 48px at 1440px, the slope is 0.0268, giving 2.679vw, and the intercept is 9.43px or 0.5893rem.
The finished declaration is clamp(1.125rem, 0.5893rem + 2.679vw, 3rem). Below 320px it holds at 18px; above 1440px it holds at 48px.
Why must the preferred value include a rem term?
Because a preferred value expressed in vw alone ignores the user's font-size setting. A font-size of clamp(1.125rem, 3vw, 3rem) is fixed to viewport width, so zooming the text changes nothing until the value hits one of the bounds.
That is a WCAG 2.2 failure under success criterion 1.4.4 Resize Text, which requires text to reach 200% without loss of content. Adding the rem intercept restores the response to zoom, which is why this calculator never emits a bare vw preferred term.
When should you use clamp() instead of a media query?
Use clamp() when a value should change continuously — type sizes, gutters, section spacing. It removes the visible jump at each breakpoint and replaces several declarations with one.
Use a media query when something changes discretely: a two-column grid becoming one column, or an element being hidden. clamp() interpolates numbers, so it cannot express a layout that reorganises.
| Purpose | Declaration | At 320px | At 768px | At 1440px |
|---|---|---|---|---|
| Body text, 16→18px | clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem) | 16px | 16.8px | 18px |
| Heading, 32→64px | clamp(2rem, 1.4286rem + 2.8571vw, 4rem) | 32px | 44.8px | 64px |
| Section gap, 64→160px | clamp(4rem, 2.2857rem + 8.5714vw, 10rem) | 64px | 102.4px | 160px |
| Page gutter, 20→96px | clamp(1.25rem, -0.1071rem + 6.7857vw, 6rem) | 20px | 50.4px | 96px |
Common questions
- What is the CSS clamp() formula for fluid typography?
- clamp(minValue, intercept + slopevw, maxValue), where slope = (maxValue − minValue) / (maxViewport − minViewport) × 100 and intercept = minValue − slope × minViewport, both converted to rem. The rem term is required so the value still responds to browser text zoom.
- Is clamp() supported in all browsers?
- Yes. clamp(), min() and max() are supported in all current versions of Chrome, Edge, Firefox and Safari, and have been since 2020.
- Why should the preferred value not be vw alone?
- Because a value in vw alone does not respond to the user's browser font-size setting, so the text cannot be zoomed to 200%. That fails WCAG 2.2 success criterion 1.4.4. Always include a rem term alongside the vw term.
- Can clamp() be used for anything other than font-size?
- Yes. It is valid wherever a length is, including padding, margin, width, gap, border-radius and inside calc(). This calculator can preview a value as either a font-size or a padding.
- What is the difference between clamp() and a fluid type scale?
- clamp() produces one fluid value. A fluid type scale produces a whole set of them, applying a ratio at each end of the viewport range so every step interpolates. Use this calculator for a one-off size and the type scale for a system.