CSS Tools
CSS clamp() Calculator
Generate fluid typography clamp() values from a min/max font and viewport range.
Min / Max font sizes (px)
Output unit
clamp() value
font-size: clamp(1rem, 0.8333vw + 0.8333rem, 1.5rem);
Preview
The quick brown fox jumps over the lazy dog
Resize the browser to see fluid scaling between 320px and 1280px.
About this tool
Enter a minimum font-size at a small viewport and a maximum font-size at a large viewport. The tool computes the linear interpolation and produces a single clamp() expression of the form clamp(min, slope * 100vw + intercept, max). Text scales smoothly between breakpoints without media queries.
FAQs
What does clamp() do exactly?
clamp(min, preferred, max) returns the preferred value, but never less than min and never more than max. Below the small viewport it pegs to min; above the large viewport it pegs to max; in between it scales linearly.
Why not just use media queries?
Media queries create stepped jumps at each breakpoint. clamp() interpolates linearly between two viewport widths, so the type grows smoothly and you only write one declaration per element.
Should I use rem or px?
Use rem for accessibility - users who increase their browser font size still see the scaling. The output offers both modes; px is fine for one-off decorative type.
How is the slope computed?
slope = (maxFont - minFont) / (maxVw - minVw). The intercept is minFont - slope * minVw. Both are emitted in the middle argument as `(slope * 100vw + intercept)`.
Browser support?
Supported in every modern browser since 2020 (Chrome 79+, Firefox 75+, Safari 13.1+). For older browsers, ship a media-query fallback before the clamp() rule.