Clamp calculatorFluid type · spacing
CSS clamp() calculator
Pick a size for small screens and one for large screens; get a clamp() that grows smoothly in between, with every step of the maths.
Sizes and viewports
rem output scales with the visitor's browser font size; px does not.
Result
clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem)
The maths
- slope = (20px − 16px) ÷ (1280px − 360px) = 0.004348
- intercept = 16px − 0.004348 × 360px = 14.4348px = 0.9022rem
- preferred = intercept + slope × 100vw = 0.9022rem + 0.4348vw
- clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem) → 16px at 360px, 20px at 1280px
The large size is more than 2.5 times the small one. Text sized mainly in vw may not reach 200% when visitors zoom (WCAG 1.4.4). Narrow the range or raise the small size.
Live preview
Drag the box's corner or use the sliderFluid type grows with the viewport, never below its minimum and never past its maximum.
820px widefont-size 18px
Fluid type scale
Step 0 uses the two sizes above. Each step up multiplies by a ratio that itself grows from the small to the large screen.
| Step | Min px | Max px | Value |
|---|---|---|---|
--step-5 | 39.81 | 61.04 | clamp(2.4883rem, 1.9693rem + 2.3067vw, 3.8147rem) |
--step-4 | 33.18 | 48.83 | clamp(2.0736rem, 1.6908rem + 1.7011vw, 3.0518rem) |
--step-3 | 27.65 | 39.06 | clamp(1.728rem, 1.4488rem + 1.2407vw, 2.4414rem) |
--step-2 | 23.04 | 31.25 | clamp(1.44rem, 1.2392rem + 0.8924vw, 1.9531rem) |
--step-1 | 19.2 | 25 | clamp(1.2rem, 1.0582rem + 0.6304vw, 1.5625rem) |
--step-0 | 16 | 20 | clamp(1rem, 0.9022rem + 0.4348vw, 1.25rem) |
--step--1 | 13.33 | 16 | clamp(0.8333rem, 0.7681rem + 0.2899vw, 1rem) |
--step--2 | 11.11 | 12.8 | clamp(0.6944rem, 0.6531rem + 0.1836vw, 0.8rem) |
How the clamp() value is built
A fluid size is a straight line between two points: the small size at the small viewport and the large size at the large viewport. The slope is how many pixels the size grows per pixel of viewport width; multiplied by 100 it becomes the vw coefficient. The intercept is where that line would be at a 0px viewport, expressed in rem so the value still follows the visitor's font-size setting. clamp() then stops the line at the two sizes, so text never gets smaller or larger than you chose.
- Root font size only changes how px are written as rem; 16px is the browser default.
- Decimal places: four are plenty; the maths shows the size the rounded value really produces at both ends.
- Shrinking sizes work too: make the large-screen size smaller and the slope turns negative.
Clamp questions
Why rem plus vw instead of vw alone?
vw alone ignores the visitor's font-size preference and barely responds to zoom. The rem part keeps a share of the size tied to the root font size, so text still scales when people enlarge it.
Can I use clamp() for spacing?
Yes. The same value works for padding, margins, gaps and widths. Enter the spacing you want at each viewport width instead of font sizes.
Does it work in container queries?
Replace vw with cqi in the result and the size follows the nearest container's width instead of the viewport. The live preview above uses the same maths with the box as the viewport.