CSS clamp() Calculator
Generate fluid typography that scales with the viewport
The CSS clamp() Calculator generates fluid typography code: a single font-size declaration that scales smoothly between a minimum and maximum size as the viewport grows — no media queries needed.
Tell it your smallest font size (at your smallest supported viewport) and your largest (at your widest layout), and it computes the linear-interpolation formula in accessible rem units combined with vw, ready to paste into your stylesheet.
How the math works
clamp() takes three values: clamp(minimum, preferred, maximum). The preferred value is a line through your two points: slope = (maxSize − minSize) ÷ (maxViewport − minViewport), and the rem intercept anchors it. The browser then clips the result so it never leaves your min–max range.
We output the fixed part in rem (not px) so text still scales when users change their browser's default font size — important for accessibility and often flagged in audits. Converting other px values to rem? Use our px to rem calculator.
Example
You want body text to be 16px at a 360px viewport, growing to 24px at 1200px.
Slope = (24 − 16) ÷ (1200 − 360) = 0.00952 → 0.9524vw. Intercept = 16 − 0.00952 × 360 = 12.57px → 0.7857rem.
Result: font-size: clamp(1rem, 0.7857rem + 0.9524vw, 1.5rem);
Frequently Asked Questions
What does CSS clamp() do?
clamp(min, preferred, max) returns the preferred value, but never lets it go below min or above max. For font sizes, the preferred value is usually a vw-based expression, so text scales fluidly with the viewport within your chosen bounds — replacing multiple media queries with one line.
How do I calculate the values inside clamp() for fluid typography?
Pick two points: your minimum font size at your smallest viewport, and maximum size at your largest. The slope is (maxFont − minFont) ÷ (maxViewport − minViewport), expressed in vw by multiplying by 100. The intercept is minFont − slope × minViewport, expressed in rem. This calculator does all of it for you.
Why use rem instead of px inside clamp()?
If the whole expression is in px and vw, text won't respond when a user increases their browser's default font size — an accessibility failure. Putting the fixed portion in rem keeps the formula anchored to the user's preferred text size. WCAG audits specifically check that text can scale to 200%.
What is fluid typography?
Typography that scales continuously with the viewport width instead of jumping at breakpoints. Instead of 16px on mobile and 24px on desktop with a hard switch at 768px, the size interpolates smoothly through every width in between — one clamp() declaration replaces several media queries.
What browsers support clamp()?
All modern browsers: Chrome/Edge 79+, Firefox 75+, Safari 13.1+ (since early 2020). Global support is above 96%. For legacy browsers, provide a plain font-size fallback on the line before the clamp() declaration — old browsers ignore the clamp line and use the fallback.
Can clamp() be used for things other than font-size?
Yes — padding, margin, gap, width, border-radius, almost any length property. Fluid spacing (e.g. section padding that grows from 2rem to 6rem) is one of the most popular uses, keeping vertical rhythm proportional across screen sizes.
What is the difference between clamp() and min()/max()?
min() picks the smallest of its arguments, max() the largest, and clamp(a, b, c) is shorthand for max(a, min(b, c)) — it bounds a preferred value on both sides. For fluid type you almost always want clamp(), since you need both a floor and a ceiling.
Why does my clamp() font size not change when I resize the browser?
Usually one of three things: the vw coefficient is so small the change is invisible; the preferred value is already outside the min–max range so it's clamped flat; or the expression accidentally uses only rem/px with no vw term, making it constant. Check that the middle value contains a vw unit.
What viewport range should I use for fluid typography?
A common choice is 320–360px for the minimum (small phones) and 1200–1440px for the maximum (where most layouts stop growing). Below and above the range, the font simply sticks to your min and max sizes, so nothing breaks on extreme screens.
Does clamp() work with zoom and accessibility settings?
Browser zoom (Ctrl/Cmd +) works fine with any units. Changing the browser's default font size only affects your clamp() if the expression includes rem — which is exactly why this calculator outputs the intercept in rem rather than px.
Is clamp() better than media queries?
For scaling values continuously, yes — it's less code and covers every viewport, not just breakpoints. Media queries remain the right tool for layout changes (stacking columns, hiding elements). Most modern sites combine both: clamp() for sizes and spacing, media queries for structure.
What is the safe fallback for browsers without clamp()?
Declare a static size first: 'font-size: 1.125rem; font-size: clamp(1rem, 0.79rem + 0.95vw, 1.5rem);'. Browsers that don't understand clamp() keep the first declaration; modern browsers override it with the second.