CSS Clamp Calculator
Fluid type that scales between two viewport widths.
About CSS Clamp Calculator
CSS Clamp Calculator produces a fluid font-size that scales smoothly between two viewport widths, then locks at each end. It replaces a stack of media queries with one line, and removes the widths where a heading looked wrong because it was between breakpoints. Output is in rem, so it still respects a reader’s browser font-size setting.
How to use it
- Enter the minimum and maximum font sizes in pixels.
- Enter the viewport widths those should apply at — typically 320 and 1280.
- Copy the clamp() expression, and check the sample rendering underneath.
Questions
Why clamp() instead of media queries?
Media queries jump at breakpoints, so there is always a width where the type is too big or too small. clamp() scales continuously, and it is one line instead of several rules.
Why rem rather than px?
Because px ignores the reader’s browser font-size preference, which people with low vision rely on. rem scales with it.
What viewport range should I use?
320px to 1280px covers small phones to laptops. Going wider than your actual maximum content width just makes the scaling slower than it needs to be.
CSS Clamp Calculator is free and runs entirely in your browser. No account, no upload, no watermark, no limit on use.