Articles

# The typographic scale

The typographic scale has been used for centuries as a means of creating balanced and harmonious font sizing. It is the bedrock of modern typography. This is the classic typographic scale, as recorded by Mr. Bringhurst in The Elements of Typographic Style:

 specimen pt a a a a a a a a a a a a a a a a a 6 7 8 9 10 11 12 14 16 18 21 24 30 36 48 60 72

The classic typographic scale is a harmonious progression of font sizes, like the notes of a musical scale. Because the classic typographic scale is a scale, it must obey the scaling property: if x is a size in the scale, then rx must also be a size in the scale, where r is the ratio of the scale. This ratio is a defining property of the scale. We can use this property to continue the classic typographic scale up to much larger font sizes.

 specimen pt a a a a a a a a a a a a a a a a a a a a a a a a a a 6 7 8 9 10 12 14 16 18 21 24 28 32 36 42 48 55 63 73 84 96 110 127 146 167 192

The sizes 6 pt, 12 pt, 24 pt, 48 pt, …, all appear in the scale: the ratio of the classic typographic scale is two. Likewise, each C note on a piano vibrates twice as quickly as the previous C note. The classic typographic scale has the same ratio as a musical scale.

The second defining property of a scale is the number of notes, n. There are five sizes in each interval of the classic typographic scale. As a result, the classic typographic scale is a pentatonic scale—like Jazz and much of the world’s traditional music.

The third, and final, property of a scale is its fundamental frequency, f0. On a piano, 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 fi of the ith note of any scale is:

Using this formula, we can generate every font size in the classic typographic scale, and we can compare these values against the “rule of thumb” values guessed by the original typographers:

 specimen pt a a a a a a a a a a a a a a a a a a a a a 6 7 8 9 10 12 14 16 18 21 24 28 32 36 42 48 55 63 73 84 96
 specimen pt a a a a a a a a a a a a a a a a a a a a a a a a a 6 7 8 9 10 11 12 14 16 18 21 24 28 30 32 36 42 48 55 60 63 72 73 84 96

The human initution was rather good! The historical values are very close. But there are a few discrepancies:

First, there are four lost notes: the 28 pt, 32 pt, 42 pt, and 55 pt font sizes. These lost notes are missing from the original typographic charts, despite being perfectly in tune with the rest of the scale. These lost sizes are scaled versions of existing sizes. For example, the 16 pt font size scales up to be the 32 pt font size—but that font size is missing.

Second, there is an extra note that doesn’t belong in the scale at all. Every interval of the classic typographic scale has five notes, but the original typographic charts have six notes in the first interval. There is no place for that 11 pt font size.

Finally, three of the font sizes are not quite right: The 60 pt and 72 pt sizes were rounded down to the nearest pica, by a total of 4 pt. And the 30 pt size is actually a semitone: it is exactly halfway between two notes.

## 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 design, with its em and px units. It would be helpful if we could adapt the classic typographic scale to all media.

In addition, we know from music that the scale chosen for a musical composition can change its feel: Are there any other typographic scales that could change the feel of our visual compositions?

There are three ways to alter a scale: you can change the fundamental frequency f0, the number of notes n in an interval, or the ratio r of the scale.

By altering the fundamental frequency, f0, you can adapt an existing scale to a new medium. For example, f0 = 12 pt generates the font sizes for print typography, whereas f0 = 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 at least 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. But some designs are much simpler than this. Sometimes less is more.

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 = phi ~ 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 typographic 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 @A1 = 2em
• Lorem Ipsum @C0 = 1.5874em
• Lorem Ipsum @B0 = 1.2599em
• Lorem Ipsum @A0 = 1em
• Lorem Ipsum @C-1 = .7937em
Musical tritonic scale (r = 2, n = 3)
• Lorem Ipsum @A1 = 2em
• Lorem Ipsum @D0 = 1.6818em
• Lorem Ipsum @C0 = 1.4142em
• Lorem Ipsum @B0 = 1.1892em
• Lorem Ipsum @A0 = 1em
• Lorem Ipsum @D-1 = .8409em
Musical tetratonic scale (r = 2, n = 4)
• Lorem Ipsum @A1 = 2em
• Lorem Ipsum @E0 = 1.7411em
• Lorem Ipsum @D0 = 1.5157em
• Lorem Ipsum @C0 = 1.3195em
• Lorem Ipsum @B0 = 1.1487em
• Lorem Ipsum @A0 = 1em
• Lorem Ipsum @E-1 = .8706em
Musical pentatonic scale (also known as the “classic typographic scale”) (r = 2, n = 5)

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 @B1 = 2.0581em
• Lorem Ipsum @A1 = 1.618em
• Lorem Ipsum @B0 = 1.272em
• Lorem Ipsum @A0 = 1em
• Lorem Ipsum @B-1 = .7862em
Golden ditonic scale (r = phi, n = 2)

In some 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 = 4). This would add impact to the titles, while remaining balanced with the other elements of the page.