Are you looking for the Type Scale Calculator?

# The typographic scale

The typographic scale is the bedrock of modern typography, used for centuries to choose harmonious font sizes. But there are *flaws* in those historical values.

This is the classic typographic scale, as recorded by Mr. Bringhurst in The Elements of Typographic Style:

**6**

*a*

**7**

*a*

**8**

*a*

**9**

*a*

**10**

*a*

**11**

*a*

**12**

*a*

**14**

*a*

**16**

*a*

**18**

*a*

**21**

*a*

**24**

*a*

**30**

*a*

**36**

*a*

**48**

*a*

**60**

*a*

**72**

*a*

The classic typographic scale is a collection of font sizes chosen for their visual appeal—as in a *musical* scale, where every note is proportional and in harmony with the others.
A musical composition only uses notes that appear in the chromatic musical scale, and a typographical composition only uses font sizes that appear in the classic typographic scale.

The classic typographic scale is a *scale*, so it must obey the scaling property:
if *f* is a size in the scale, then *rf* must also be a size in the scale, where *r* is the ratio of the scale.

**6**

*a*

*a*

*a*

*a*

*a*

**12**

*a*

*a*

*a*

*a*

*a*

**24**

*a*

*a*

*a*

*a*

*a*

**48**

*a*

*a*

*a*

*a*

*a*

**96**

*a*

The font sizes 6, 12, 24, …, all appear in the scale.
Each font size is twice as big as the last: the ratio of the classic typographic scale is *two*.
In music, each C note vibrates twice as fast as the previous C note, so the ratio of the chromatic musical scale is *also two*.
Classic typography has the same ratio as music.

The second defining property of any scale is the number of notes, *n*.
In music, there are *twelve* notes in an octave.
In the classic typographic scale, there are *five* font sizes in an interval—after which, the interval repeats, and every font size is doubled.

The third, and final, property of any scale is its fundamental frequency, *f*_{0}.
In the chromatic scale, this is the Stuttgart pitch.
In the classic typographic scale, the fundamental frequency is the *pica*.
This value, 1 pica = 12 pt, is the baseline font size used in print typography.

The general formula for the frequency *f _{i}* of the

*i*th note of a scale is:

Using this formula, we can generate every font size in the classic typographic scale:

**6**

*a*

**7**

*a*

**8**

*a*

**9**

*a*

**10**

*a*

**12**

*a*

**14**

*a*

**16**

*a*

**18**

*a*

**21**

*a*

**24**

*a*

**28**

*a*

**32**

*a*

**36**

*a*

**42**

*a*

**48**

*a*

**55**

*a*

**63**

*a*

**73**

*a*

**84**

*a*

**96**

*a*

And now we can compare the exact mathematical values against the original historical values guessed by the early human typographers:

**6**

*a*

*a*

*a*

*a*

*a*

**11**

*a*

**12**

*a*

*a*

*a*

*a*

*a*

**24**

*a*

**28**

*a*

**30**

*a*

**32**

*a*

**36**

*a*

**42**

*a*

**48**

*a*

**55**

*a*

**60**

*a*

**63**

*a*

**72**

*a*

**73**

*a*

**84**

*a*

**96**

*a*

The human intuition was almost exactly right, except for three huge issues:

First, there is a *lost note*.
The 42 pt font size is *missing*, despite being perfectly in tune with the rest of the scale.
The lost note is necessary to complete the 10 , 21 pt, _, 84 pt font progression—but it is simply not there.

Second, there is an *extra note*.
Every interval of the classic typographic scale has five notes, but the original typographic charts have *six* notes in the first interval.
There is an extra note!
The 11 pt font size doesn’t belong with the other notes.

Third, one of the notes (30 pt) is actually a *semitone*: it’s midway between two notes (28 pt and 32 pt).
The first two intervals are correct, then the mistake appears, and then it gets doubled up into the next interval as well (60 pt).

Finally, there is one tiny mistake that is almost too small to notice: a note is ever so slightly flat. The 72 pt font size got rounded down to the nearest pica, which puts it out of tune by 1 pt.

## Applications in design

The point (pt) is the standard unit of print typography.
However, some media are better suited to other units of measure—such as web typography, with its em and px units.
It would be helpful if we could adapt the classic typographic scale to *all* media.

We know from music that changing the scale can change the “feel” of a composition: Perhaps something similar would be possible in a typographic composition?

There are three ways to alter a scale: you can change the fundamental frequency *f*_{0}, the number of notes *n* in an interval, or the ratio *r* of the scale.

By altering the **fundamental frequency**, *f*_{0}, you can adapt an existing scale to a new medium.
For example, *f*_{0} = 12 pt generates the font sizes for print typography,
whereas *f*_{0} = 1 em generates the font sizes for web typography.

By altering the **number of notes** in an interval, *n*, you can change the number of font sizes that are available.
For example, a musical typographical scale with *n* notes provides *n* + 2 useful font sizes:
the baseline body size, a “fine print” size, and a series of *n* header sizes.
The classic typographic scale has a high value of *n*, so it provides a large palette of font sizes.

By altering the **ratio**, *r*, you can change the rate at which the font sizes grow.
Two compelling choices are the musical ratio (*r* = 2) and the golden ratio (*r* = *ϕ* ≈ 1.618034).
When averaged over many websites, the primary header of a website is almost exactly twice the size of the body text.
This means that any design based on a musical scale has a beautiful property: the header and body copy are the same note, one interval apart.

Here are some of the most beautiful musical scales:

- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum

*n*= 3,

*r*= 2,

```
h1 { font-size: 2em; }
h2 { font-size: 1.5874em; }
h3 { font-size: 1.2599em; }
p { font-size: 1em; }
footer { font-size: .7937em; }
```

- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum

*n*= 4,

*r*= 2,

```
h1 { font-size: 2em; }
h2 { font-size: 1.6818em; }
h3 { font-size: 1.4142em; }
h4 { font-size: 1.1892em; }
p { font-size: 1em; }
footer { font-size: .8409em; }
```

- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum

*n*= 5,

*r*= 2,

```
h1 { font-size: 2em; }
h2 { font-size: 1.7411em; }
h3 { font-size: 1.5157em; }
h4 { font-size: 1.3195em; }
h5 { font-size: 1.1487em; }
p { font-size: 1em; }
footer { font-size: .8706em; }
```

However, there *are* alternatives to the musical typographic scales: some designs are based instead on the *golden ratio*.
These designs will be most beautiful when set in a golden typographic scale:

- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum

*n*= 2,

*r*=

*ϕ*,

```
h1 { font-size: 2.0582em; }
h2 { font-size: 1.618em; }
h3 { font-size: 1.272em; }
p { font-size: 1em; }
footer { font-size: .7862em; }
```

In other cases, a custom solution may be the most appropriate.
For example, a website with consistently short, punchy titles may be well suited to a scale with a high ratio (such as *r* = 3).
This would add impact to the titles, while remaining in harmony with the other elements of the page.

To help you visualize your ideas, I’ve created a Type Scale Calculator:

And here is a light-weight version, in case you’d rather have simplicity:

- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum

```
h1 { font-size: 2em; }
h2 { font-size: 1.7411em; }
h3 { font-size: 1.5157em; }
h4 { font-size: 1.3195em; }
h5 { font-size: 1.1487em; }
p { font-size: 1em; }
footer { font-size: .8706em; }
```

Either way, let me know what you prefer.