CSS Clamp
Free CSS Clamp calculator with clear step-by-step results.
About CSS Clamp
Fluid typography is a straight line between two points: minimum size at the small viewport and maximum size at the large one. Solving for the slope gives the vw coefficient and the intercept gives the fixed rem term, which is what makes the value scale smoothly while remaining clamped at both ends.
Formulas
Slope
vw coefficient = (max font - min font) / (max viewport - min viewport) x 100
Intercept
rem intercept = (min font - slope x min viewport) / root font size
Worked example
With the default values below, CSS Clamp returns CSS clamp() expression of clamp(1rem, 0.6667rem + 1.6667vw, 2rem). Change any input above and every figure here is recalculated in your browser.
Inputs used
- Minimum font sizeminimum 1 px
- 16 px
- Maximum font sizeminimum 1 px
- 32 px
- Viewport where scaling startsminimum 100 px
- 320 px
- Viewport where scaling stopsminimum 100 px
- 1,280 px
- Root font sizeminimum 1 px
- 16 px
Results
- CSS clamp() expression
- clamp(1rem, 0.6667rem + 1.6667vw, 2rem)
- Viewport width coefficient
- 1.6667 vw
- Fixed rem intercept
- 0.6667 rem
- Growth per 100 px of viewport
- 1.6667 px
Step by step
- 1Values used
- 2Slope
- 3Intercept
- 4CSS clamp() expression= clamp(1rem, 0.6667rem + 1.6667vw, 2rem)
- 5Viewport width coefficient= 1.6667 vw
- 6Fixed rem intercept= 0.6667 rem
- 7Growth per 100 px of viewport= 1.6667 px
Assumptions and limits
- The result is derived only from the 5 inputs listed above. Anything not among them is not part of the calculation.
- In particular, this calculator does not take inflation, tax, fees or charges or compounding frequency into account.
- Figures are rounded for display to 4 decimal places, so totals built from several rounded parts can differ slightly from the unrounded arithmetic.
How these calculators are built and tested is described on the Methodology page. If a figure looks wrong, please report it.
Frequently Asked Questions
Why express the intercept in rem rather than px?
A rem intercept keeps the text responsive to the user's browser font-size preference. A pure px and vw combination ignores that setting and is an accessibility failure.
Does clamp() need media queries?
No. The clamp itself pins the value at both ends, so the same declaration covers every viewport without breakpoints.