CSS Clamp Calculator (Fluid Typography)
Turn a minimum and maximum size into a fluid CSS clamp() value between two viewport widths, in rem or px, with a size table and a WCAG zoom check.
vw is 1% of the viewport width, so 0.8333vw grows by 0.8333 px for every 100 px of width. rem values follow the user's browser font size; the vw part does not.
Browser zoom enlarges px and rem but not vw, which is why a very wide range between the smallest and largest size can stop text from scaling to 200%.
| Viewport width (px) | Size (px) | Size (rem) |
|---|---|---|
| 320 | 16 | 1 |
| 375 | 16.46 | 1.0286 |
| 768 | 19.73 | 1.2333 |
| 1,024 | 21.87 | 1.3667 |
| 1,280 | 24 | 1.5 |
| 1,440 | 24 | 1.5 |
| 1,920 | 24 | 1.5 |
CSS clamp(min, preferred, max) lets a size grow smoothly with the screen width and stop at a minimum and a maximum — no media queries needed. The hard part is the middle value, a mix of rem and vw that has to hit your smallest size at one viewport width and your largest at another. This calculator works it out from those four numbers, shows the size you get at common screen widths, and checks the WCAG text-zoom concern that comes with vw units.
How to use this tool
- Enter the smallest and largest size and whether they are px or rem.
- Enter the viewport widths where each size should apply.
- Choose rem (recommended) or px for the result and the property name.
- Copy the CSS line; add more lines under "More sizes" to get a set of CSS variables.
Formula
slope = (max − min) ÷ (vw₁ − vw₀) · intercept = min − slope × vw₀ · clamp(min, intercept + slope × 100vw, max)
Sizes are converted to px first (rem × root size), and the intercept is converted back to rem for the result. Between the two widths the size follows a straight line; outside them clamp() holds the minimum or maximum.
Example
From 16 px at 320 px to 24 px at 1280 px: slope = 8 ÷ 960 = 0.008333, so the vw part is 0.8333vw; intercept = 16 − 0.008333 × 320 = 13.33 px = 0.8333rem. The result is clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem). At a 768 px tablet width that gives 13.33 + 6.4 = 19.73 px.
Frequently asked questions
Should clamp() use rem or px?
Use rem for the minimum, maximum and intercept so text still follows the reader's browser font-size setting. Only the vw part ignores that setting.
Is fluid typography accessible?
It can fail WCAG 1.4.4 (resize text to 200%) because browser zoom does not enlarge vw. A widely cited rule of thumb: keep the largest size at no more than 2.5 times the smallest, and text can still double when zoomed.
Can I use clamp() for spacing?
Yes — padding, margin, gap and widths all accept clamp(). Put each step of your spacing scale under "More sizes" to get matching CSS variables.
Sources
Last updated:
Page address with these inputs: https://kakao.mobile/tools/css-clamp-generator/
Cite or embed this tool
kakaoCalc. (2026, November 8). CSS Clamp Calculator (Fluid Typography). https://kakao.mobile/tools/css-clamp-generator/
“CSS Clamp Calculator (Fluid Typography).” kakaoCalc, 8 Nov. 2026, kakao.mobile/tools/css-clamp-generator/.
Paste this code into your page. The widget runs in your visitors' browsers, shows no ads and keeps a link back to this page. Embedding terms