You don’t build a fire by tossing random sticks in a pile and hoping it works. You use a system: kindling first, then medium logs, then the big ones. That structure is what reliable creates a warm and lasting fire.
Typography works the same way.
If your headings and body text don’t relate to each other in a predictable pattern, the page feels chaotic, even if everything else looks great. But when type sizes scale consistently, your site feels clean, calm, and easy to read.
What is a modular type scale?
A modular scale is a simple setup:
- pick a base font size
- pick a scaling ratio
- let that ratio generate every other size
So instead of choosing values like you’re roasting marshmallows blindfolded, each size step follows the same multiplier.
Example with a ratio of 1.33:
- One step up = base × 1.33
- Two steps up = base × 1.33²
- One step down = base ÷ 1.33
Everything stays in the same “family,” visually.
How this calculator works
This tool keeps your scale tidy and practical:
Headings
- H4 is your base heading
- H1–H3 scale up from H4
- H5–H6 scale down from H4
Body text
- M is your base body size
- XXS–XXL scale around M
You can pick a standard ratio (like Perfect Fourth or Golden Ratio), or toss in your own custom number.
Why Designers Should Care
A consistent scale means:
- faster decisions (no more “is 34px weird here?”)
- hierarchy that just works
- designs that stay consistent as pages multiply
- cleaner handoff to devs (your dev team will have one less complaint!)
Basically: fewer burnt marshmallows, more golden-brown perfection.
Why Clients Should Care
It might feel like a small detail, but it’s the kind of detail that makes a site feel polished. It’s also the kind of care we put into every decision we make for our website design clients. Because the best websites are built from a thousand smart choices like this.
