Typographic Scale Calculator

About the Typographic Scale Calculator

Generates a harmonious set of font sizes (a modular scale) by repeatedly multiplying a base size by a chosen ratio such as 1.25 (major third) or 1.618 (golden ratio).

How to use

Enter the base font size and a scale ratio, then click Generate.

Worked example

16px base × 1.25 ratio → 16, 20, 25, 31.25, 39 px …

How to use this calculator

1. Enter your base font size.
2. Choose a scale ratio such as 1.2, 1.25, or 1.333.
3. Pick how many steps up and down you want in the scale.
4. Generate the scale and copy the sizes you need.

The formula explained

• \(\text{size}_n\) = the font size at step n
• \(\text{base}\) = the starting font size
• \(\text{ratio}\) = the multiplier applied each step
• \(n\) = the step number, where 0 is the base size

Step by step method

1. Start with the base size as step 0.
2. Multiply the base by the ratio for each step above the base.
3. Divide by the ratio for each step below the base, or use negative step numbers in the formula.
4. Round the results only if you need cleaner values for design work.

Worked example

For a design system with a 16 px base size and a 1.25 ratio, here is a short modular scale around the base.

1. Use \(\text{size}_0 = 16 \cdot 1.25^0 = 16\).
2. One step up is \(\text{size}_1 = 16 \cdot 1.25^1 = 20\).
3. Two steps up is \(\text{size}_2 = 16 \cdot 1.25^2 = 25\).
4. One step down is \(\text{size}_{-1} = 16 \cdot 1.25^{-1} = 12.8\).

Tips and common mistakes

• Choose a ratio that matches the tone of the design. Smaller ratios feel subtle, while larger ratios create stronger contrast.
• Keep the base size tied to your body text, since that is usually the most readable starting point.
• Generate a few steps in both directions so you have sizes for captions, headings, and display text.
• If the numbers feel awkward, round them carefully, but check that the overall scale still looks balanced.

Frequently asked questions