Clamp Calculator for Fluid Font Sizes
Work out a fluid font size with clamp(): enter the size at a small viewport, the size at a large viewport, and the two widths. The calculator returns a single declaration that grows smoothly between them and stops at both ends.
Preview text sits under the controls and follows the same formula, so you can resize the browser window and watch the size change. The output is a regular CSS value you can copy.
Fluid heading sample
Resize the window to see the size change.
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);How to use it
- Set the font size you want at the smallest viewport, in pixels (for example 16).
- Set the font size at the largest viewport (for example 24).
- Set the viewport width where the small size starts and where the large size ends.
- Copy the font-size declaration. Resize your browser to check the preview.
About the CSS behind it
clamp(MIN, VAL, MAX) returns VAL, bounded below by MIN and above by MAX. It is defined in the W3C CSS Values and Units Module Level 4. Fluid typography uses VAL as a linear function of the viewport: a rem offset plus a vw slope.
The slope is the change in size divided by the change in viewport width, and the offset is chosen so the line passes through both points. For 16px at 320px and 24px at 1280px the slope is 0.8333vw, so the middle term reads as 0.8333rem plus 0.8333vw. The formula is exact at the two endpoints and clamped outside them.
Keep the minimum and maximum sizes at readable values: body text rarely needs to go below 16px, and headings above about 3rem can overflow narrow screens. Check the output with browser zoom at 200 percent as well as with window resizing, because zoom changes the effective viewport width.
Frequently asked questions
- What inputs does the clamp calculator need?
- Four numbers: the font size at the smallest viewport, the font size at the largest viewport, and the two viewport widths where those sizes apply. The calculator fits a straight line between the two points and clamps it at both ends.
- Why does the output mix rem and vw?
- rem keeps the size tied to the user's font settings, so text still scales if someone changes their browser default. The vw term supplies the fluid growth between the two viewport widths. Using only vw would ignore user font preferences.
- Does the calculator assume a 16px root font size?
- Yes by default, and you can change it. Browsers default to 16px, and rem values are divided by the root size. Change the root value if your site sets html { font-size } to something else.
- Is clamp() supported in all browsers?
- clamp() is supported in all current evergreen browsers. Check caniuse or MDN for the versions you need, and keep a plain font-size declaration above it as a fallback for very old browsers.