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. Bringhust in The Elements of Typographic Style:

 specimen pt 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 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 r * x 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 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, and 48 pt are all present in the typographic scale. Consequently, the ratio of the classic typographic scale is two. The classic musical scales also have a ratio of two. Each C note on a piano, for example, vibrates twice as quickly as the previous C note. The classic typographic scale is very much like a musical scale.

The second defining property of a scale is the number of notes, n, in the scale. 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, f_0. On a piano, this is the frequency of the “middle C” note. 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 ith note of any scale is:

Using this formula, we can go back and recalculate the font sizes for the classic typographic scale, and compare them to the “rule of thumb” values guessed by the original human 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 6 7 8 9 10 11 12 14 16 18 21 24 28 32 36 42 48 55 60 72 84 96

The intuition of the human typographers was extremely close! However, 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 were not listed in the original typographic charts, despite being perfectly in tune with the rest of the scale. These notes are necessary to complete other notes that were listed in the original typographic charts. For example, the 16 pt font size is completed by the 32 pt font size—which is one of the lost notes.

The second issue is that two of the notes are flat. The 60 pt and 72 pt sizes are off by a total of 4 pt. These two font sizes were rounded down to the nearest multiple of the pica, so this may have been a practical concession for early printing processes, rather than a true error. However, the result is that modern typographers have inherited two notes that are not quite in tune.

The final discrepancy is that 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. The 11 pt font size doesn’t belong in the scale. It would sound sharp or flat if played by a musical instrument.

## Applications in design

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

In addition, we know from music that the scale chosen for a musical composition can change its feel: It would be interesting to see if there are any other typographic scales that might be useful in design.

There are three possible 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 n in an interval, you can change the number of font sizes that are available in a typographical composition. In general, a musical typographical scale with n notes provides n + 2 useful font sizes. The classic typographic scale has a high value of n. But 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 @A2 = 2.6179em
• 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 = φ, n = 2)

In some cases, however, a custom solution may be the most appropriate. For example, a website with consistent short, punchy titles may be better suited to a typographic scale with a high ratio (e.g. r = 4). This custom scale would add impact to the page titles, while remaining in harmony with the other elements on the page.