CSS clamp() Calculator
font-size: clamp(1.00rem, 0.51rem + 2.17vw, 2.25rem);This heading uses the exact clamp() above. Resize your window to feel it flex.
| VIEWPORT | COMPUTED PX | REM | STATE |
|---|---|---|---|
| 360px | 16.0px | 1.00rem | at min |
| 768px | 24.9px | 1.55rem | fluid |
| 1024px | 30.4px | 1.90rem | fluid |
| 1440px | 36.0px | 2.25rem | at max |
| 1920px | 36.0px | 2.25rem | at max |
Sizes are computed from the linear slope between your two anchor viewports: pure math, no resizing required.
How it works
仕組みThis calculator builds a CSS clamp() expression for fluid typography: type that scales smoothly between a minimum and maximum size as the viewport widens, with no media queries. Enter your smallest font size, largest font size, and the two viewport widths where each should apply, and the tool computes the slope and rem-based intercept for you. A live sample heading renders with the exact value so you can resize your window and feel it flex, and a table shows the computed size at common breakpoints, worked out mathematically with no dragging required.
The vw part makes the size track the viewport, while the rem part anchors it to the user’s chosen root font size. Keeping the intercept in rem means the text still scales when someone raises their browser’s default font size, an accessibility win over pure px or pure vw values.
360px and 1280px cover most phones through laptops and are a solid default. If your layout has a max-width container, use that container’s width as the upper anchor instead, since the type stops needing to grow once the layout stops growing.
Yes. The math is identical for padding, margins, and gaps. Just copy the clamp() value into any length property. Many design systems define a small set of fluid spacing steps this way and reuse them everywhere.