Tool · type-scale generator
What font sizes should my headings be?
Multiply a base size by a fixed ratio for each step up (and divide for each step down). With a 16 px base and a 1.25 ratio the steps are 20, 25, 31.25, 39.06 and 48.83 px. The generator also turns each step into a fluid clamp() value.
| Step | Small (px) | Large (px) | Fluid size | Preview |
|---|---|---|---|---|
| +5 | 48.83 | 54.93 | clamp(3.0519rem, 2.9103rem + 0.581vw, 3.4331rem) | Ag |
| +4 | 39.06 | 43.95 | clamp(2.4413rem, 2.3277rem + 0.4657vw, 2.7469rem) | Ag |
| +3 | 31.25 | 35.16 | clamp(1.9531rem, 1.8624rem + 0.3724vw, 2.1975rem) | Ag |
| +2 | 25 | 28.13 | clamp(1.5625rem, 1.4898rem + 0.2981vw, 1.7581rem) | Ag |
| +1 | 20 | 22.5 | clamp(1.25rem, 1.192rem + 0.2381vw, 1.4063rem) | Ag |
| base | 16 | 18 | clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem) | Ag |
| -1 | 12.8 | 14.4 | clamp(0.8rem, 0.7629rem + 0.1524vw, 0.9rem) | Ag |
| -2 | 10.24 | 11.52 | clamp(0.64rem, 0.6103rem + 0.1219vw, 0.72rem) | Ag |
:root {
--step-5: clamp(3.0519rem, 2.9103rem + 0.581vw, 3.4331rem);
--step-4: clamp(2.4413rem, 2.3277rem + 0.4657vw, 2.7469rem);
--step-3: clamp(1.9531rem, 1.8624rem + 0.3724vw, 2.1975rem);
--step-2: clamp(1.5625rem, 1.4898rem + 0.2981vw, 1.7581rem);
--step-1: clamp(1.25rem, 1.192rem + 0.2381vw, 1.4063rem);
--step-0: clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem);
--step-m1: clamp(0.8rem, 0.7629rem + 0.1524vw, 0.9rem);
--step-m2: clamp(0.64rem, 0.6103rem + 0.1219vw, 0.72rem);
}How the numbers are computed
Each step is size = base × ratiostep, rounded to two decimals for display. For the fluid value, the generator draws a straight line between the small-screen size at the small viewport and the large-screen size at the large viewport: the slope is (large − small) ÷ (large viewport − small viewport), expressed in vw, and the intercept is converted to rem assuming a 16 px root. clamp() then holds the size within the two endpoints outside that range.
Worked check for step +2 with the defaults: small = 16 × 1.25² = 25 px, large = 18 × 1.25² = 28.125 px; slope = 3.125 ÷ 1050 = 0.2976 vw; intercept = 25 − 0.002976 × 390 = 23.84 px = 1.49 rem. The tool prints clamp(1.5625rem, 1.49rem + 0.2976vw, 1.7578rem).
Ratios below 1.2 suit dense interfaces with many heading levels; 1.25 to 1.333 is a common middle ground for articles; larger ratios create dramatic headlines but run out of room after three or four steps on small screens. Users can still zoom: clamp() with a rem component keeps text resizable. Pair the scale with a family that has enough weights, as explained in choosing a UI font, and see variable fonts for in-between weights.