Type scale
Choose a base text size and a ratio. All headings are calculated to work together, and you can copy the sizes to CSS.
A universal ratio for most websites. Clear hierarchy without overdoing it.
Sizes above 96 px are scaled down in the preview; the export contains the real values.
Export to CSS
:root {
--fs-display: 3.815rem;
--fs-h1: 3.052rem;
--fs-h2: 2.441rem;
--fs-h3: 1.953rem;
--fs-h4: 1.563rem;
--fs-h5: 1.250rem;
--fs-body: 1.000rem;
--fs-small: 0.800rem;
--lh-heading: 1.1;
--lh-body: 1.5;
}
/* base 16 px, ratio 1.25 */
Why use a type scale
Clear hierarchy
In a second the reader can tell what the main heading is, what the subheading is and what the text is. When sizes are random, the differences between levels get lost.
Harmony and rhythm
Every size comes from the same ratio, so the levels work together. The page feels calm and considered, even when it has a lot of content.
Fewer decisions
Instead of twenty random sizes you have eight named ones. Designers and developers use the same values and the site stays consistent even after years of changes.
Readable for everyone
A large enough base and sizes in rem respect the browser’s font setting. People with weaker eyesight can enlarge the text and the hierarchy stays intact.
Why the ratios are named like in music
The names come from music theory. Two notes sound harmonious when their frequencies are in a simple ratio. Typography borrowed the idea: sizes in the same ratio “harmonise” like notes.
- Major second · 9 : 8 = 1.125
- Minor third · 6 : 5 = 1.2
- Major third · 5 : 4 = 1.25
- Perfect fourth · 4 : 3 ≈ 1.333
- Perfect fifth · 3 : 2 = 1.5
Why the golden ratio is “golden”
The golden ratio (φ ≈ 1.618) arises when you divide a line so that the whole relates to the longer part as the longer part relates to the shorter. It is the only ratio with this property.
It appears in the geometry of the pentagon and in the Fibonacci sequence (1, 1, 2, 3, 5, 8, 13…), where the quotient of two neighbouring numbers gets ever closer to φ. Since the Renaissance it has been linked with beauty and harmony, hence the name.
The truth is that its “perfect beauty” is largely a myth and studies do not confirm a clear preference. In typography it makes big jumps, so it suits posters and bold hero sections with few levels. On an ordinary website with many headings a smaller ratio is usually better.