The music of typography

And God made the beast of the earth after his kind, and cattle after their kind, and every thing that creepeth upon the earth after his kind: and God saw that it was good.

Genesis 1:25, The Bible

Recently I have been studying a lot about web design and how it affects the user experience. One topic that has proven to be important is the typography of a website.

If your website is a theater for your site visitors, then typography is the usher. It greets every visitor and makes them feel comfortable and welcome. Conversely, a poorly comported usher can set the wrong tone and ruin the whole show for the night.

In this blog post, I will be talking about how music is related to typography and how it's used to create a euphonious ambiance in web design.

What's typography?

According to Wikipedia, typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

Right from the definition, it is pretty obvious how typography can affect a web user's experience. Text that is difficult to read due to arbitrary sizing or weird fonts could be very frustrating and could lead to visitors leaving a website.

Perhaps, what's even stranger is the fact that irregular typography could do similar damage to a user's experience as well. It's very similar to how we perceive sound: if a musician plays a wrong note or a singer sings off-key, the music's flow is disrupted.

To remedy the dissonance, web designers turn to typographic scales. But what are scales?

What's a scale?

The word scale originates from the Latin word scala, which means ladder or staircase. These ladders appear everywhere.

We find scales on rulers:

We find scales on the color spectrum:

We find scales in music, like the C major scale:

That same C major scale can be represented in music notation:

That same C major scale can be played on the piano 🎹:

Typography is no different; it follows the ladder pattern.

Musical scales

In music, intervals are used to build scales. An interval is the distance between two notes.

For example, the interval between C and D on the piano has a distance of 2 notes, because you have to step through 2 piano keys (C to C♯, C♯ to D) to get from one to the other:

However, the interval between E and F has a distance of 1 key (E to F):

Each interval has a name:

Interval	Key distance	Example
unison	0	C
minor second	1	C to D♭
major second	2	C to D
minor third	3	C to E♭
major third	4	C to E
perfect fourth	5	C to F
augmented fourth	6	C to F♯
perfect fifth	7	C to G
minor sixth	8	C to A♭
major sixth	9	C to A
minor seventh	10	C to B♭
major seventh	11	C to B
octave	12	C to C

It's obvious that these intervals can be played on a piano or any musical instrument, but did you know that the same scales are used in typography? Let me explain.

Each interval listed above has a ratio called the just interval, which is the tuning of musical intervals as whole number ratios (such as 3:2 or 4:3) of frequencies.

Interval	Just interval
unison	1:1
minor second	16:15
major second	9:8
minor third	6:5
major third	5:4
perfect fourth	4:3
augmented fourth	45:32
perfect fifth	3:2
minor sixth	8:5
major sixth	5:3
minor seventh	16:9
major seventh	15:8
octave	2:1

Using a little math magic, we can build typographic scales right from music intervals!

Scale math

Mathematics is a method we use to abstract phenomena that occur in reality, so it's no surprise that mathematicians have cooked up a formula for scales. Scales follow a mathematical sequence called the geometric sequence:

$$a_{\mathrm{n}}=a{r}^{n-1}$$

Where $a$ is the first term, $n$ is the number of terms, and $r$ is the common ratio.

In layman's terms, you have to multiply each result by a common ratio to get the next result.

$$a_{\mathrm{n}}=a,ar,a{r}^2,a{r}^3...$$

For instance, if my scale starts from 1 and my common ratio is 1.5, then the next value on my scale would be:

$$1\times 1.5=1.5$$

The next value on the scale would be:

$$1.5\times 1.5=2.25$$

The third value:

$$2.25\times 1.5=3.375$$

And so on.

Let's build typographic scales 🛠️

Time for a music and math mixture! First, let's build a typographic scale from the minor third interval.

According to the table of just intervals above, the ratio for the minor third interval is 6:5, which is 1.2 in decimal.

Let's start our typographic scale from 1rem. In the CSS world, this indicates an element's font size relative to the size of the root element. In reality, this usually defaults to 16 pixels in most browsers, but it may vary.

Using the common ratio of 1.2, let's build the minor third scale:

Voila, our first typographic scale! Visual harmony at its finest!¹

Now that we know how the scale looks like, let's hear how it sounds.

Remember, the minor third interval has a key distance of 3 notes. The musical notation 🎼 for our constructed scale (C - E♭ - G♭ - A - C) would look like this:

The newly constructed scale sounds like this:

This is what site visitors hear 👂 when they see 👁️ this typography.

The minor third scale sounds a little dark. The dark tone is prominent because the notes of the scale are close to each other and therefore cause more tension. Because the distance between the octaves is short (i.e. from C to C), the scale sounds more dissonant and solemn.

An example of a wider interval is the perfect fifth, with an just interval of 3:2 and a common ratio of 1.5. Let's take a look at the first five notes of the scale (C - G - D - A - E):

With this interval (following the circle of fifths), you get a much higher contrast:

What does it sound like?

Beautiful and melodious!

Notice as the interval widens, the intervals become more happy, spaced out and fewer within an octave; there is more room to breathe.

In fact, there is so much space that the original note (C) does not repeat until 7 octaves later! Talk about space!

Scale	Span
minor third	C - E♭ - G♭ - A - C
perfect fifth	C - G - D - A - E - B - G♭ - D♭ - A♭ - E♭ - B♭ - F - C

Bottom line

• Music and typography share interesting traits.
• The concept of scale appears across microcosms in the universe.
• Every typographic scale that can be seen, can be heard.
• Typography sets the visual ambiance:
  • High-contrast typographic scales (like the perfect fifth scale) set a bright, happy tone (as it does in music) and are louder.
  • Medium-contrast typographic scales (like the minor third scale) are a little softer in tone and amplitude.
  • Low-contrast typograhic scales (like the minor second scale) set a more solemn tone.
• I use medium-contrast typography for this website.²

Don't forget to listen to your typography. How does it sound visually?

Further reading

• Typescale
• The typographic scale by Spencer Mortensen
• Utopia