Skip to content
Technologydesign

Font Size and Modular Scale Calculator

A modular type scale from a base size and ratio. Sizes multiply rather than add, which is why the jumps look even to the eye despite growing in absolute terms.

Also called: type scale calculator, typographic scale.

px
The scale
10.24, 12.8, 16, 20, 25, 31.25, 39.06, 48.83 px

Base 16px on a ratio of 1.25: 10.24, 12.8, 16, 20, 25, 31.25, 39.06, 48.83 px. Each step multiplies by 1.25, so the largest is 48.83px and the smallest 10.24px.

Largest size
48.83
Smallest size
10.24
One step up
20
Two steps up
25
One step down
12.8
This ratio is called
the major third
How this is calculated
Method and background

How this is calculated

Each step multiplies the previous size by a fixed ratio, producing a geometric sequence. Perception of size is roughly logarithmic, so a constant ratio reads as evenly spaced while a constant increment does not: 16, 20, 24, 28 looks increasingly cramped at the top, while 16, 20, 25, 31 does not. Common ratios have musical names because they were borrowed from interval ratios.

a geometric sequence, so the ratio between adjacent sizes is constant
b
Base size
r
Ratio

Worked examples

Each of these is asserted on every build. If a change to the engine ever moved one of these answers, the build would fail before the page could print it.

a major third scale

Base size
16 px
Scale ratio
1.25
Steps up
5
Steps down
2

The scale10.24, 12.8, 16, 20, 25, 31.25, 39.06, 48.83 px

16 x 1.25^n

Open this example

the golden ratio is named

Base size
16 px
Scale ratio
1.62
Steps up
3
Steps down
1

The scale9.89, 16, 25.89, 41.89, 67.77 px

boundary

Open this example

Method and limits

What it assumes

  • Sizes in pixels, rounded for display but exact in the sequence.

What it deliberately does not model

  • A scale is a starting point. Optical adjustment at very large and very small sizes is still needed.

Formula version 1.0.0 · definition 1.0.0 · India · Report a problem with this calculator

Frequently asked questions

Which ratio should I use?
Smaller ratios around 1.2 suit dense interfaces; 1.333 or higher suits editorial layouts where headings should dominate. Anything above 1.5 gets hard to use for body text.