Type Scale Generator
Choose a base size and a ratio to generate a consistent modular type scale, with every step shown in both px and rem.
Your modular type scale (ratio 1.2)
| Step | px | rem | Preview |
|---|---|---|---|
| +5 | 39.81px | 2.488rem | Ag |
| +4 | 33.18px | 2.074rem | Ag |
| +3 | 27.65px | 1.728rem | Ag |
| +2 | 23.04px | 1.44rem | Ag |
| +1 | 19.2px | 1.2rem | Ag |
| 0 | 16px | 1rem | Ag |
| -1 | 13.33px | 0.833rem | Ag |
| -2 | 11.11px | 0.694rem | Ag |
Why a ratio beats hand-picked sizes
When font sizes are chosen one at a time, they tend to drift — a 22px heading here, a 23px one there — and the type never quite feels like a system. A modular scale fixes that by deriving every size from a single base and ratio, the same way musical intervals derive from a root note. The result is a set of sizes with a visible, repeating relationship that reads as deliberate.
Pick the base your body text will use, choose a ratio that matches the mood you want, and take only the steps you need. Then wire the rem values into your design tokens so every heading level maps to a rung on the same ladder.
Frequently Asked Questions
What is a modular type scale?
It is a set of font sizes generated by repeatedly multiplying a base size by a fixed ratio. Step 0 is the base; each step up multiplies by the ratio and each step down divides by it. At a 16px base with a 1.25 ratio you get 20px, 25px, 31.25px going up, and 12.8px, 10.24px going down.
Which ratio should I choose?
Smaller ratios like the minor third (1.2) or major third (1.25) keep headings close in size and suit dense, information-rich interfaces. Larger ratios like the perfect fourth (1.333) or golden ratio (1.618) create dramatic jumps that work well for marketing and editorial layouts. This tool includes the common musical intervals from the minor second (1.067) up to the golden ratio.
How is each size calculated?
size = base × ratio^step. For a base of 16px and the minor third (1.2), step +1 is 16 × 1.2 = 19.2px, step +2 is 16 × 1.2² = 23.04px, and step −1 is 16 ÷ 1.2 = 13.33px. The rem column simply divides each px value by a 16px root.
Why express the scale in rem as well as px?
px is handy for reading the exact values, but rem is what you usually ship, because it scales with the user's browser font-size for accessibility. Having both means you can design in pixels and implement in rem without a second conversion step.
How many steps do I actually need?
Most interfaces use five to seven sizes total: body text, one or two smaller sizes for captions and labels, and three or four larger sizes for headings. Generating a few extra steps up and down gives you room to choose, but resist using every size — a small, consistent set reads as more intentional.
This is a helper that gives estimates — verify against your design system and how the type actually renders in your product before locking the scale in.