16 px to 24 px between 320 and 1280 px
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem). On an 800 px wide screen the size is 20 px.
CSS Clamp Calculator
Make font sizes and spacing scale smoothly between two screen widths with CSS clamp().
Where the smallest size applies
Where the largest size is reached
| Viewport | Size |
|---|---|
| 320 px | 16 px |
| 375 px | 16.46 px |
| 768 px | 19.73 px |
| 1024 px | 21.87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);Runs in your browser — nothing you enter is sent to a server.
How the CSS Clamp Calculator works
Fluid sizes grow smoothly with the screen instead of jumping at breakpoints. Enter the size you want on a small screen and on a large one, and the screen widths where each applies. The calculator writes a clamp() value: below the small width the size stays at the minimum, above the large width at the maximum, and in between it grows in a straight line.
Sizes are written in rem, so text still follows a visitor's browser font-size setting — a pure vw value would ignore it, which is an accessibility problem.
Formulas
Slope and intercept
slope = (max size − min size) ÷ (max width − min width); intercept = min size − slope × min width
The clamp() value
clamp(min, intercept + slope × 100vw, max)
With every px value divided by the root font size to get rem.
Examples
Outside the range
The same value gives 16 px on a 200 px screen and 24 px on a 2000 px screen: it never goes past the minimum or maximum.
Frequently asked questions
Can I use it for spacing too?
Yes. Change the CSS property to padding, gap or anything that takes a length.
Does zooming still work?
Because the value mixes rem and vw, zoom and the font-size setting still change the size. Keep the maximum no more than about 2.5 times the minimum so zooming stays effective (WCAG 1.4.4).
Do all browsers support clamp()?
Yes, every current browser has supported it since 2020.
Related tools
PX to REM Converter
Convert pixels to rem and back for any root font size, with a table of common sizes.
Design Tools
Type Scale Generator
Create a harmonious set of font sizes from a base size and a ratio, with CSS variables.
Design Tools
Aspect Ratio Calculator
Find the aspect ratio of any size (1920 × 1080 is 16:9) and resize while keeping it.
Design Tools