Type scale
A size ramp from a base and a ratio
The quick brown fox jumps over the lazy dog. A body sample to judge reading rhythm and line spacing.
Build a coherent typographic scale from a base size and a ratio. Rather than picking each heading size by eye, a scale derives them from one another and gives a hierarchy that holds together.
How it works
Each step comes from the previous one multiplied by the chosen ratio. A small ratio gives a quiet hierarchy, suited to dense interfaces; a large one produces sharp contrast, better for editorial pages.
size(n) = base × ratio^n e.g. 16px, ratio 1.25: 16 → 20 → 25 → 31.25 → 39.06
Frequently asked questions
Which ratio should I choose?
1.125 (major second) and 1.2 (minor third) suit interfaces where many levels have to coexist. 1.25 and 1.333 give clearly detached headings, better for content pages. Past 1.5, the largest headings quickly become unmanageable on mobile.
Should the scale be the same on mobile and desktop?
Rarely. A ratio that works on a wide screen crushes the layout on a phone. Common practice is to keep the same base and lower the ratio on small screens, or to cap the highest steps.