UX Design and Development course

Modular Scale Typography

What does it mean to use typography with modular scale? With all the blog posts out there, you'd think that you need a masters degree in mathematics to get this to work.

Cutting to the chase, let's simply use the Golden Ratio to discuss this concept, 1.618. The breakdown is that you take each number and multiply it by the Golden Ratio. When sizing typography, the simplest solution is to use ems.

For example, let's lets say that we set our base type at 12px. This equates 0.75em. Now, we can use the Golden Ratio to go up and down the scale to determine the font sizes we want to work with. The math looks like the following:

0.618em / 1.618    = 0.382em
1em / 1.618        = 0.618em

1em

1em * 1.618        = 1.618em
1.618em * 1.618    = 2.618em
2.618em * 1.618    = 4.236em
4.236em * 1.618    = 6.854em

The beauty of this is that we can apply these em scales to any base font size and you basically get identical scale.

Example CSS could be the following:

html {font-size: 0.75em;}

body {
  font-family: serif;
  line-height: 1.45em;
  color: #333;
}

h1, h2, h3, h4 {
  margin: 1.414em 0 0.5em;
  font-weight: inherit;
  line-height: 1.2em;
}

h1 {
  margin-top: 0;
  font-size: 6.854em;
}

h2 {font-size: 4.236em;}

h3 {font-size: 2.618em;}

h4 {font-size: 1.618em;}

small, .font_small {font-size: 0.618em;}

To watch your type choices come to life, be sure to give type-scale.com a try.