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:

6a7a8a9a10a11a12a14a16a18a21a24a30a36a48a60a72a
Classic typographic scale, from The Elements of Typographic Style.

The classic typographic scale is a collection of font sizes that are in visual harmony. A typographer chooses sizes from a typographic scale in the same way that a musician chooses notes from a musical scale.

Like a musical scale, a 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.

6a
aaaa12a
aaaa24a
aaaa48a
aaaa96a
Classic typographic scale, with the whitespace removed to show the scaling property.

The font sizes 6, 12, 24, …, all appear in the scale. Each size is twice as big as the last, so the ratio of the classic typographic scale is two. The ratio in classical typography is the same as the ratio in classical music.

The second defining property of any scale is the number of notes, n. In classical music, there are twelve notes in an octave. In the classical typography, there are five sizes in an interval. (We rarely nest content deeper than one or two levels, so it makes sense that a typographic scale would have only a few notes.)

The third and final property of any scale is its fundamental frequency, f0. 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.

And here is the formula for the frequency fi of the ith note in the scale:

\\huge{f_i = f_0 r^\\frac{i}{n}}

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

6a7a8a9a10a12a14a16a18a21a24a28a32a36a42a48a55a63a73a84a96a
Classic typographical scale. These are the exact mathematical values.

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

6aaaaa
11a12a
aaaa24a28a
30a32a
36a42a48a55a
60a63a
72a73a
84a96a
Classic typographical scale. These are the historical values. Deviations from the mathematical values are marked in red.

The human intuition was very close, but there are discrepancies:

A note is missing. There is no 42 pt font size, despite it being perfectly in tune with the other font sizes. It is necessary to complete the progression 10 , 21 pt, _, 84 pt, but it is simply not there.

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 size doesn’t belong in the scale.

There is a semitone. The 30 pt font size is midway between two notes, 28 pt and 32 pt, which makes it a semitone. The first two intervals are correct, then the mistake appears, and then it gets doubled up into the next interval as well (60 pt).

And there is a rounding error: The 72 pt font size got rounded down to the nearest pica, which puts it slightly 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 you can change a scale:

By changing 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 changing the number of notes, n, you change the quantity of font sizes in your palette. In general, it’s better to have the least number of unused font sizes. When a scale contains font sizes that aren’t present anywhere in your work, the viewer knows it, somehow.

By changing the ratio, r, you change the impact of your headings. When averaged over many websites, the title is almost exactly twice the size of the body. So there is one value for r that is particularly interesting: the musical ratio, r = 2. If you set your typography in a musical ratio, your copy will have a beautiful property: the title and body 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; }

The classic typographic scale is a musical scale.

But there are alternatives. For example, some designs are based on the golden ratio (r = ϕ ≈ 1.618034); those 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 higher ratio (such as r = 3). This would add impact to the headings, while remaining in harmony with the rest of the page.

And here is a calculator, so you can try out your ideas!

  • 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; }

And here is a full version of the calculator. You should use this version if you have Google Fonts on your website:

Screenshot of the Type Scale Calculator.