The Typographic Scale – Harmony in Fonts

Date: 6/1/2020, Author: G.P.

The classic typographic scale is a method that refers to the way font sizes are progressing. Typography, from print media to the web, has always needed a way to present text in a consistent manner. Text should always be presentable and easy to read. So, that’s where typographic scales come into play. They offer us a system that allows us to use text harmonically. They actually resemble the way musical notes and musical scales are working.

Here is the classic typographic scale that can be found in many, commonly used, applications:

6 7 8 9 10 12 14 16 18 21 24 28 32 36 42 48 55 63 73 84 96

You will notice that some numbers are in bold. You can also easily notice that every one of those bold numbers is a multiple of the previous number and the number 2. So, the number 2 is the ratio of our scale. As you can see, there are always exactly 5 numbers from the first bold number to the next one. This is the interval of the scale.

Golden Ratio

So, lets summarize:

A typographic scale consists of 2 basic properties:

  1. A ratio (r). Every size must be multiplied by the ratio to find the next harmonic size. For example, the classic typographic scale has a ratio of 2. A ratio of 1.5 (which is called a perfect fifth in music), means that any font size is exactly 1.5 times bigger than the one before it. We call it a perfect fifth because in a musical scale with a ratio 1.5, there are always 5 notes in the sequence. In the same way we can also use the Golden Ratio (1.618) to create harmonic typographic scales.
  2. An interval (s). The number of sizes from the first element to the last element of a sequence. For example, if we have this scale:

12, ..., …, …, …, 24, ..., …, …, …, 48 ..., …, …, …,

we have a ratio r=2 and a number of sizes s=5.

So, if i is the ith element of the scale and n is the size number from which we want to know the ith harmonic size, we can use the basic formula for the frequencies of the notes of the equal tempered scale (a scale with the same ratio):

xi = n*ri/s

Thus, if we want to know the 2nd size from 12 we can find it using the previous formula:

x2 = 12*22/5 = 12*20,4 = 12*1,319 = 15,82 ≈ 16

Similarly, the 3rd size from 12 is:

x3 = 12*23/5 = 12*20,6 = 12*1,515 = 18,18 ≈ 18

Our scale now is:

12, 16, 18, …, …, 24, ..., …, …, …, 48 ..., …, …, …,

We can continue to fill all the elements in the same way we found the 2nd and the 3rd size.

This will give as a harmonic size scale.

How to use typographic scales on the web

A simple way to use a typographic scale on the web is to find the basic size of the body. You can use either pixels or ems (there is a difference that we will analyze in a next article about Responsive Typography). After that you can assign the next harmonic size to the smaller header (h6, h5, h4, h3, h2, h1). You could also revert the process and start with the largest size.

Finally, some ratios have been proven more harmonious than others. Here is a list of some scales you could experiment with:

Minor Second
Major Second
Minor Third
Major Third
Perfect Fourth
Perfect Fifth
Golden Ratio

You can find the full scales here - https://type-scale.com/

Of course, you can always experiment using your own values.

References:

The Typographic Scale by Spencer Mortensen

Equal Temperament - https://en.wikipedia.org/wiki/Equal_temperament

The Golden Ratio - https://en.wikipedia.org/wiki/Golden_ratio

Perfect Fifth - https://en.wikipedia.org/wiki/Perfect_fifth