CSS clamp() / Fluid Typography Calculator
Enter a min and max font size across a viewport range, get a ready-to-use
clamp() value with the underlying
linear-interpolation math shown, plus a live preview and a full heading scale.
font-size: clamp(16px, 13.2174px + 0.8696vw, 24px);
The math
slope = (max − min) / (maxVw − minVw) = 0.0087 px/px
intercept = min − slope × minVw = 13.2174px
preferred = 13.2174px + 0.8696vw
Font size: 20.1739px
The quick brown fox jumps
Full type scale
Generates Small through H1 by raising a ratio to each step's power, applied separately to the min and max end so headings can grow faster on wide viewports than on narrow ones. Uses the same viewport range and unit as above.
| Level | Min | Max | clamp() | |
|---|---|---|---|---|
| Small | 14.2222px | 14.4px | clamp(14.2222px, 14.1604px + 0.0193vw, 14.4px) | |
| Body | 16px | 18px | clamp(16px, 15.3043px + 0.2174vw, 18px) | |
| H6 | 18px | 22.5px | clamp(18px, 16.4348px + 0.4891vw, 22.5px) | |
| H5 | 20.25px | 28.125px | clamp(20.25px, 17.5109px + 0.856vw, 28.125px) | |
| H4 | 22.7812px | 35.1562px | clamp(22.7812px, 18.4769px + 1.3451vw, 35.1562px) | |
| H3 | 25.6289px | 43.9453px | clamp(25.6289px, 19.258px + 1.9909vw, 43.9453px) | |
| H2 | 28.8325px | 54.9316px | clamp(28.8325px, 19.7546px + 2.8369vw, 54.9316px) | |
| H1 | 32.4366px | 68.6646px | clamp(32.4366px, 19.8356px + 3.9378vw, 68.6646px) |