This whole idea started after the launch of my new site. At first, I ignored to see it, but weeks later I started to notice that the textual content of the site is actually pretty harsh for the eyes and the reading experience isn’t that great. You can read it – I’m quite sure of that-but the longer you browse the content, the more your eyes start to hurt. Literally. One reason for this is the contrast between the text and the background, but there’s also more to it than just that, so I started wondering:

• How could I improve it?
• How to make building of responsive typography easier?
• Can typography look good and be readable on so wide range of devices?
• Are there any patterns where I could base my decisions on?

The foundation

At the time I were thinking about the subject, I had a Skype chat open with Joni Korpi and we were discussing about similar problems in Responsive Design. Later on the evening, when I had already went to sleep, Joni pasted me a link to 24 Ways article about Music, Harmony and Proportion in Web Design. The idea didn’t hit me instantly after I read it, but about a week or two later I was hooked and started studying how Musical Scales could help me to make the perfect Typographic Scale for the Web.

I have been intrigued by the idea of making a typographic scale out of a musical scale that would not only be very readable, but also aesthetically pleasing.

Since I’ve been following close-by music producers and artists-who compose their tracks with the help of a scale-for most of my youth, I felt pretty confident to base the rhythm and proportions on the chromatic scale. There are different versions of the scale and I decided to go with the Pythagorean one. That decision was mostly based on the information I could find from the Web.

The Chromatic Scale

The chromatic scale is a musical scale with twelve pitches, each a semitone apart. On a modern piano or other equal-tempered instrument, all the half steps are the same size. An equal tempered chromatic scale is a non-diatonic scale having no tonic because of the symmetry of its equally spaced tones.

The most common conception of the chromatic scale before the 13th century was the Pythagorean chromatic scale. Due to a different tuning technique, the twelve semitones in this scale have two slightly different sizes. Thus, the scale is not perfectly symmetric. Many other tuning systems, developed in the ensuing centuries, share a similar asymmetry.