Type Scale Step
Calculator
Results
- Size at that step (px)
- 31.25
- One step up (px)
- 20
- One step down (px)
- 12.8
- Increase per step (%)
- 25
Design and print results
| Size at that step (px) | 31.25 |
| One step up (px) | 20 |
| One step down (px) | 12.8 |
| Increase per step (%) | 25 |
formula-map diagram
- Size at that step (px)
- 31.25
- One step up (px)
- 20
- One step down (px)
- 12.8
- Increase per step (%)
- 25
Formula breakdown
Formula
size = base × ratio^step= 31.25
Note
Simplified model: these are standard prepress and typographic relationships computed on nominal values. Real press bulk, paper caliper and shrinkage, ink limits for a given profile, font metrics and binding allowances vary by supplier and by job, so confirm with your printer and a proof before going to press.
More in Design and printing
See all →Frequently asked questions
What is a type scale, and what does 'step' mean?+
A type scale is a set of font sizes that grow or shrink by a consistent ratio, and a 'step' is one position in that sequence — step 0 is usually your base size, step 1 is the next size up, and negative steps go smaller (for captions, footnotes, etc.).
How does the calculator get from a base size to a specific step's size?+
It multiplies the base font size by the chosen ratio raised to the power of the step number. For a base of 16px and a ratio of 1.25, step 2 is 16 x 1.25^2 = 25px.
What ratio should I pick for my type scale?+
Smaller ratios (1.125-1.2) give subtle, closely-spaced sizes suited to dense interfaces, while larger ratios (1.333-1.618) create more dramatic jumps suited to editorial or marketing headlines. There's no single correct ratio — it's a design choice tied to your content density.
Why do my headings look like they're jumping too much in size?+
You likely picked a large ratio (like 1.5 or higher) across many steps, which compounds quickly since each step multiplies rather than adds. Try a smaller ratio, or skip fewer steps between your heading levels.
Do I need to round the calculated pixel sizes?+
Yes, in practice — raw calculated values are rarely whole numbers, so round to the nearest pixel (or to a value that divides cleanly, like the nearest even number) for cleaner CSS and to avoid sub-pixel rendering inconsistencies across browsers.