Typographic Scale Calculator
Pick a base size and a ratio to generate a full scale of font sizes, shown in pixels and rem.
Inputs
Each step multiplies (or divides) the base size by the chosen ratio.
Results
| Step | px | rem | |
|---|---|---|---|
| -2 | 10.24 | 0.64 | Ag |
| -1 | 12.8 | 0.8 | Ag |
| 0 | 16 | 1 | Ag |
| 1 | 20 | 1.25 | Ag |
| 2 | 25 | 1.563 | Ag |
| 3 | 31.25 | 1.953 | Ag |
| 4 | 39.06 | 2.441 | Ag |
| 5 | 48.83 | 3.052 | Ag |
How to build a typographic scale
Pick a base size and a ratio to generate a full scale of font sizes, in both pixels and rem.
How it's calculated
Each step multiplies (for steps up) or divides (for steps down) the base size by the ratio once per step — the same geometric progression used by modular type scales in design tools.
Choosing a ratio
- Smaller ratios (1.067-1.2) suit dense interfaces with many text sizes.
- Larger ratios (1.333-1.618) suit headline-heavy, editorial layouts.
Worked example
A 16px base with a 1.25 (Major Third) ratio produces 20px, 25px, 31.25px, and so on going up, and 12.8px, 10.24px going down.
Calculation notes
All calculation runs in your browser; nothing you enter is sent anywhere.
FAQ
What root size should I use for rem?
Use your page's actual root font size — 16px is the browser default and the most common choice.
Can I use a custom ratio?
The ratio is chosen from a fixed list of well-known named ratios, from Minor Second to Golden Ratio, rather than freeform entry.
Do I have to use every step the scale generates?
No — most designs only use a handful of the generated sizes (for body text, a few heading levels, and captions), not every single step.