Type Scale Generator
Generate a harmonious typographic scale — a set of font sizes related by a ratio — with the common ratios explained.
Font sizes that belong together
A type scale is a set of font sizes generated from a base size and a ratio, so headings, body text and captions relate to each other by a consistent proportion rather than being picked arbitrarily. This builds the scale, giving you a harmonious set of sizes to use across a design.
How a scale is built
You choose a base size — usually your body text — and a ratio, then each step up multiplies by that ratio and each step down divides by it. So a base of 16 with a ratio of 1.25 gives 20, then 25, then about 31 going up. The ratio sets the character of the scale: a small ratio makes a gentle, subtle scale, a large one makes a dramatic, high-contrast scale with big headings. The common ratios are borrowed from musical intervals and classic proportions:
| Ratio | Name | Feel |
|---|---|---|
| 1.125 | Major second | Very subtle |
| 1.2 | Minor third | Gentle |
| 1.25 | Major third | Balanced, common |
| 1.333 | Perfect fourth | Clear contrast |
| 1.5 | Perfect fifth | Strong |
| 1.618 | Golden ratio | Dramatic |
A balanced ratio like 1.25 suits most interfaces; a larger one suits editorial or landing pages that want bold headings.
Why a scale beats picking sizes
The reason to use a scale rather than choosing sizes ad hoc is consistency and hierarchy. When every size relates to the others by the same ratio, the design feels ordered and the relationships between heading levels are clear, guiding the eye through the content. Randomly chosen sizes — a heading here, a slightly different one there — look subtly off even when nobody can say why. A scale also gives you a limited, deliberate set of sizes to use, which is itself good discipline. It is one of the foundations of typography that looks professional rather than assembled, and it costs nothing but choosing a ratio.
Questions & answers
How is a type scale generated?
From a base size and a ratio — each step up multiplies by the ratio, each step down divides by it, so all sizes relate proportionally.
Which ratio should I use?
A balanced ratio like 1.25 suits most interfaces; larger ratios like 1.5 or the golden ratio suit editorial pages that want bold, dramatic headings.
Why use a scale instead of picking sizes?
Because sizes related by one ratio create clear hierarchy and a sense of order, while ad hoc sizes look subtly off even when nobody can say why.
Is anything uploaded?
No. The scale is generated in your browser.