Typographic Scaling

An experiment in making modular typographic scales for responsive web design.

Desktop Typographic Scale @ 1:1.25

Desktops have large margins

and lots of whitespace,

which can be balanced

with an aggresive

typographic scale.

This scale is set to a ratio of 6:5, which is the same as the a Minor Third scale in music. This makes the first header about 3 times larger than that of the paragraph. Every header in between is scaled proportionally, which takes the guess work out of picking the sizes.

● -------

Mobile Typographic Scale @ 1:1.125

Mobile devices are

narrow and tight.

They require

a more subtle

gradation.

I have used a scale of 9:8 for mobile. This is also a scale found in music, known as a Major Second. The decision to use music scales was mainly done because it sounds nice, but also because their value on the fifth step was close to what I wanted for the font size of my first header.

Also note that the paragraphs are the same size for both viewports.