The Classic Typographic Scale

07 Jul 2019 | Berlin, DE

Through diverging branches of 2018 I started experimenting on new music that I was writing.

The experiment carried a simple question which led me to a fragment of discoveries. How can I compose a song with just a few notes? After unsuccessful tryouts I put the idea aside and moved on. But then one evening as I play music with other ThoughtWorkers, a melody came to us. To my surprise, this was in pentatonic: a musical scale with five notes per octave. The song is played only on black keys and has earned its title for that reason. It is in d-sharp minor pentatonic.

Black Keys (Pentatonic)

In music, a scale is a range of selected notes spanning a piano octave often used to compose or perform a song. Most songs and melodies are built from a single scale while other songs have multiple scales, e.g, modal jazz. The album Kind of Blue comes to mind as a fair example of multiple scales used in a song—but that’s a complex bouquet of thorned roses for another time. Musical scales help musicians communicate and understand music among themselves, e.g, in music composition; for performance matters; and so forth.

In typography, a scale is a sequence of values used to set type sizes as a means of creating harmony and rhythm to visual order on a layout. Today this scale is often found in most softwares as a list of values in a dropdown menu that one can choose from to alter font sizes in a document. Think Microsoft Word, Google Docs, Sketch App, and many more. Like music, type can be a form of expression and still be functional as intended, helping us navigate the journey of our lives. Most of us see and interact with type everyday and everywhere we go without being aware that it’s there—almost second nature. Think about that first moment when you wake up to an alarm clock in a day.

Piano keys
Black Keys (Pentatonic)

Around the sixteenth century, a new wave of setting type in various sizes developed amongst European typographers. The Classic Typographic Scale was born. Before that, early Renaissance typographers would set typefaces in one size on a page, except maybe for a drop cap. The Gutenberg Bible is a fair example of this.

In calculation, the classic typographic scale is somehow similar to the pentatonic scale with a few numbers missing or said to be inaccurate in the series. Missing: 28, 32, 42, 55, 63, 73; inaccurate: 11, 30, 60, 72, etc. But because it was somehow not based on a musical scale, we forgive its developers and choose to thank and stand on their shoulders by embracing and evolving it instead.

Here’s a general formula: fi = f0 * r^(i/n). Where f0 is the Fundamental Frequency, which is equals to 12pt because 1 pica is equals to 12 points in printing; r is the ratio of the scale. It is equals to 2. That means every time we play the same note on a higher octave the pitch increases and the tone vibrates as twice quicker than the same note in a lower octave, and so on; n is the number of notes or pitches within an octave, in this case we have 5 notes for pentatonic scale. This gives us a series of growing values we can use to set our type.

Typographic keys
Typographic Scale (Pentatonic)

While the figure above shows rounded values for pixels, we can choose to ignore rounding and multiplying r^(i/n) by 12. This gives us a sequence of numbers that we can use with EM units, for better responsive web typography. Here’s a series from similar scale for EM units: 1, 1.1487, 1.3195, etc. Therefore, because EM units are scalable unlike pixels which are fixed, we can write CSS in support of Media Queries, allowing the flexibility of font sizes to react and adapt accordingly to the viewport of the screen device estate.

In addition to pentatonic, there’s a fair amount of musical scales that designers can apply to typography. An interesting one is the chromatic scale which carries 12 notes for an octave. To think beyond musical scales, the Golden Ratio can be the perfect example of scales that work in typography: r = ø, n = 2. The typographic scale can also be used for other things such as sizing and spacing components and modular grids, as this very site does. Enabling our layouts to be much more harmonious, rhythmic, readable, and responsive.