What is a modular scale used for?

Choosing font sizes across a design (headings, body text, captions) that relate to each other by a consistent ratio, instead of picking arbitrary numbers.

Which ratio should I use?

There is no single right answer - a smaller ratio (e.g. 1.125) gives subtler size steps, a larger one (e.g. 1.618, the Golden Ratio) gives more dramatic contrast between sizes.

Modular Scale Calculator

Generate a consistent type scale from a base size and a ratio.

Base size (px)

Ratio

Steps each way

Step -4 6.55px
Step -3 8.19px
Step -2 10.24px
Step -1 12.80px
Step 0 16.00px
Step 1 20.00px
Step 2 25.00px
Step 3 31.25px
Step 4 39.06px

Related tools

CSS Unit Converter (px, rem, em)
Line Height Calculator
Fancy Text Generator
Zalgo Text Remover

How it works

1
Enter a base font size

The size everything else scales from.
2
Pick a ratio

A named musical/design ratio, e.g. Major Third (1.25).
3
See the generated scale

Sizes above and below the base, each one step apart.

FAQ

What is a modular scale used for?: Choosing font sizes across a design (headings, body text, captions) that relate to each other by a consistent ratio, instead of picking arbitrary numbers.
Which ratio should I use?: There is no single right answer - a smaller ratio (e.g. 1.125) gives subtler size steps, a larger one (e.g. 1.618, the Golden Ratio) gives more dramatic contrast between sizes.