Design / Responsive
CSS Clamp() Generator for Fluid Typography and Spacing
Enter the smallest and largest size and the viewport widths where each applies, and get a clamp() expression in rem that scales smoothly between them, with a table of the size at common screen widths.
CSS Clamp() Generator for Fluid Typography and Spacing: The tool draws a straight line through the two points: from 16 px at a 320 px viewport to 24 px at 1280 px, the size grows 0.8333 px for every 100 px of width. The line is written as a fixed rem part plus a vw part, 0.8333rem + 0.8333vw, and clamp() holds it between 1rem and 1.5rem outside that range. Runs 100% locally in your browser with zero server file uploads.
- Category
- Developer tools
- Runs
- In your browser
- Cost
- Free · no sign-up
- Availability
- Ready to use
Runs entirely in your browser
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| Viewport width | Size |
|---|---|
| 320 px | 16 px |
| 375 px | 16.46 px |
| 768 px | 19.73 px |
| 800 px | 20 px |
| 1024 px | 21.87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
The middle value of clamp() is a straight line through the two points you give: it adds a fixed rem amount to a share of the viewport width, so the size scales smoothly between the two widths and stops at the limits outside them. Using rem for the fixed part keeps the size responsive to the reader's own font-size setting. It works for any length: font sizes, padding, gaps, or margins.
Worked example
For a heading that is 32 px on a 375 px phone and 48 px on a 1440 px desktop, the slope is 16 ÷ 1065 = 1.5023 px per 100 px, and the expression is clamp(2rem, 1.6479rem + 1.5023vw, 3rem). On an 800 px tablet the heading is 38.38 px.
Accessibility
WCAG asks that text can be zoomed to 200%. Because part of a fluid size depends on the viewport, very steep slopes can stop zoom from making text much bigger; keep the largest size no more than about 2.5 times the smallest, and use the type scale generator to pick consistent steps.
How to use it
- Enter the smallest and largest size in px.
- Enter the viewport widths where they should apply.
- Copy the clamp() value and check the sizes in the table.
Privacy & limitations
Calculated in your browser.
Related tools
Frequently asked questions
Why not just use vw?
A size in vw alone ignores the reader's font-size setting and can become tiny on phones or huge on wide screens. The rem part and the limits in clamp() fix both.
Does clamp() work everywhere?
Yes: every current browser has supported clamp() since 2020.
Can the size get smaller on wider screens?
Yes: enter a larger smallest-width size and the expression subtracts the vw part instead.
Free tool · runs in your browser · no account required