Musical scales for web typography

MasaKudamatsu
Towards More Beautiful Web Typography
2 min readMay 31, 2019

I was initially skeptical of the use of musical scales for web typography. For example, Scott Kellum and Tim Brown have created Modularscale.com in which most of the scales come from musical scales such as octave, perfect 5th and major 3rd.

A 17-minute talk on the topic given by James Steinbach, however, has convinced me of its merit, at least potentially.

Based on the octave (1:2), the title is twice as large as the body text:

A screenshot from James Steinbach: Using Musical Scales to Build Harmonious Typography

The visual impression I get from this typesetting is the stability and boldness. That’s the same as the sound impression I get from the octave.

Based on the major 3rd (4:5), the title is 1.25 times as large as the body text:

A screenshot from James Steinbach: Using Musical Scales to Build Harmonious Typography

It looks stable but a bit timid. That’s the impression I get from the major 3rd.

For the perfect 5th (2:3), the title is 1.5 times bigger than the body text:

A screenshot from James Steinbach: Using Musical Scales to Build Harmonious Typography

This looks stable and just right, as the perfect 5th sounds to me in a similar way.

Am I crazy to feel this way? If we have a design concept that conveys a certain feeling (excited, calm, impasse, etc.), we can pick the musical scale that gives the same type of feeling, and use it to pick numbers for typesetting. If we’re not familiar with musical scales, a website like daveconservatoire.org can help us learn about them.

--

--

MasaKudamatsu
Towards More Beautiful Web Typography

Self-taught web developer (currently in search of a job) whose portfolio is available at masakudamatsu.dev