font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
The size grows fluidly with the viewport — staying at the minimum below 320px and the maximum above 1280px, with the middle term (0.8333rem + 0.8333vw) interpolating linearly in between. No media queries needed.
About CSS clamp() Calculator — Fluid Typography
The CSS `clamp()` function lets a single value scale smoothly between a minimum and a maximum, making it the modern way to build fluid typography and spacing without stacking media queries. This CSS clamp() calculator does the math for you: give it a min and max size plus the viewport range you want them to apply across, and it generates a ready-to-paste `clamp(min, preferred, max)` value in `rem`.
Under the hood it interpolates linearly between your two breakpoints — solving for the slope (the `vw` term) and intercept (the `rem` term) so the size lands exactly on your min at the small viewport and your max at the large one. Pixel inputs are converted to `rem` using your root font size, keeping the result accessible and zoom-friendly.
Everything runs entirely in your browser. No inputs are uploaded, so the calculator works fully offline.
Features
- Fluid clamp() values for responsive type and spacing
- Linear interpolation between any two viewport widths
- px → rem conversion with a configurable root font size
- Copy-ready output; works completely offline
How to use
- Enter the min and max size (in px) you want the value to scale between.
- Set the min and max viewport widths where those sizes should apply.
- Adjust the root size if your :root font-size is not 16px.
- Copy the generated clamp() value into your CSS.
Frequently asked questions
What does clamp() do in CSS?
clamp(MIN, PREFERRED, MAX) returns the PREFERRED value but never lets it drop below MIN or rise above MAX. With a vw-based preferred term, the value scales fluidly with the viewport between two bounds — ideal for responsive font sizes and spacing.
Why is the output in rem instead of px?
rem units respect the user’s root font-size, so text scales with browser zoom and accessibility settings. The calculator converts your px inputs to rem using the root size you provide (16px by default).
What is the vw term in the result?
It is the slope of the linear interpolation — how much the size changes per 1% of viewport width. Combined with the rem intercept, it produces a line that passes exactly through your min size at the min viewport and your max size at the max viewport.
Do I still need media queries?
For fluid scaling of a single property, no — clamp() replaces the breakpoint juggling. You may still use media queries for layout changes, but font-size and spacing can scale continuously with one declaration.
Does this calculator send my data anywhere?
No. All calculations happen locally in your browser. Nothing you type is uploaded, and the tool works offline.
Related tools
Everything runs locally in your browser — your input is never uploaded.