Fluid values
Set a minimum and maximum size and viewport range and get one clamp() value.
CSS clamp() Fluid Type Calculator
Generate fluid font sizes and spacing that scale smoothly between breakpoints.
- Free
- No sign-up
- Runs in your browser
- Design
Loading tool…
Was this tool useful?
Why use it
clamp() lets a font size or spacing value grow smoothly with the viewport, with a minimum and a maximum, and no media queries. Enter the sizes you want at your smallest and largest layouts to get the exact clamp() expression.
Live preview
See the text scale as you change the numbers.
rem-based output
Respects the visitor's font-size settings, which helps accessibility.
How to use it
4 quick steps. Going deeper? Read Core Web Vitals for WordPress: fixing LCP, INP and CLS without guesswork.
- 01
Enter the minimum and maximum size in pixels.
- 02
Enter the viewport widths where scaling should start and stop.
- 03
Copy the clamp() value; it uses rem so it respects users' font-size settings.
- 04
Resize the preview slider to see the size at any viewport width.
Who it’s for
Typical situations where this tool saves time.
- Frontend developersReplace stacks of media queries with one fluid font size.
- Theme developersGenerate a type scale for theme.json or a design system.
- DesignersHand over exact fluid values instead of breakpoint tables.
Questions
Short answers about privacy, limits and how the tool works.
Why use rem in clamp()?
rem values scale with the user's browser font-size setting, which keeps fluid text accessible. Pure vw values ignore that setting.
Does fluid type cause layout shift?
No. The size is calculated from the viewport width before rendering, so it doesn't jump the way breakpoint-based sizes can.
Is clamp() supported in all browsers?
Yes, all current browsers support clamp().
Need a tool like this inside your product?
I build custom calculators, admin utilities and integrations for WordPress, Laravel and Next.js teams.