Design Modular scale

How exactly do we decide on what a big heading should be? Is it 3em, or 3.5em? We usually decide on these arbitrarily based on whatever seems to work right. Doing it this way can cause a lot of inconsistencies. You may be using 3.2em at some place, but 3.3em at another.

Instead, set up your font sizes as relative percentages of other sizes. This is called a modular scale.

Why percentages?

Some designers rely on linear increments of font size. This isn't an ideal, and here's an example of why.


In 14pt and 18pt text, a difference of 4pt makes for a noticeable difference in size.


However, at 32pt, this small 4pts difference is almost unnoticeable.


Think in percentages to achieve the same effect. Since 18pt is `129%` the size of 14pt, we can scale 32pt up the same percentage.

Modular scale

This system on relying on percentages is called a modular scale. Using the formula ms(n) = base × ration, you will be able to generate a list of font sizes you can use throughout your project.

In this example below, we use 12pt, as the base font size, and 1.2 as the ratio.

Also see

This article was adapted from Rico's design notes.