What is a modular scale?

A modular scale is a sequence of sizes derived by repeatedly multiplying a base value by a fixed ratio. It produces font sizes that feel harmonious because each step shares the same proportional relationship.

Which ratio should I choose?

Smaller ratios like the minor third (1.2) give subtle, dense scales suited to dense UIs; larger ratios like the perfect fifth (1.5) or golden ratio (1.618) give dramatic contrast for editorial layouts.

What rem values does it output?

Each step's rem value is its px size divided by the base. With a 16px base, step 0 is 1rem, and a 20px step is 1.25rem — handy for accessible, scalable CSS.

What does a negative step mean?

Negative steps are smaller than the base, for captions and fine print. Step -1 with a 1.25 ratio gives 16 ÷ 1.25 = 12.8px.

Is anything uploaded?

No — the scale is generated entirely in your browser and nothing is sent anywhere.

Modular Scale Generator

A modular scale is a sequence of font sizes built by repeatedly multiplying a base size by a fixed ratio, so every step shares the same proportion and the typography feels coherent. This generator outputs the full scale in both px and rem, for designers and front-end developers setting up a type system.

How it works

Step 0 is the base size; each step is the base multiplied by the ratio raised to the step number:

size at step n = base × ratioⁿ

Positive steps grow larger, negative steps shrink below the base. The rem value is each size divided by the base. Pick a base, choose a named ratio (minor second 1.067 through the golden ratio 1.618), and set how many steps up and down you need.

Example

With a 16px base and the major third ratio (1.25):

Step 0: 16 × 1.25⁰ = 16px (1rem)
Step 1: 16 × 1.25¹ = 20px (1.25rem)
Step 2: 16 × 1.25² = 25px (1.5625rem)

Step	px	rem
2	25	1.5625
1	20	1.25
0	16	1
-1	12.8	0.8

The full scale is generated instantly, all in your browser.