How to Build a Modular Type Scale for Your Site

Open your stylesheet and count the distinct font sizes. If a site has been worked on by more than one person for more than a few months, the answer is usually somewhere between eleven and twenty — 14px here, 15px there, a 13px that exists because someone needed something slightly smaller than 14 one afternoon.

None of those choices were wrong on their own. Collectively they’re why the site looks slightly unresolved and why every new component starts with a five-minute argument about heading size.

What a modular type scale actually is

A modular scale is a set of sizes generated from a base size and a ratio. Pick 16px as your base and 1.25 as your ratio, and each step up multiplies by 1.25: 16, 20, 25, 31.25, 39, 48.8. Each step down divides: 12.8, 10.24.

The ratio is the whole design decision. Small ratios like 1.125 produce gentle scales where the largest heading isn’t dramatically bigger than body text — good for dense, information-heavy interfaces. Larger ratios like 1.5 produce dramatic scales with real contrast between levels — good for marketing pages where the headline should dominate.

The benefit isn’t mathematical elegance. It’s that you now have six or seven sizes instead of nineteen, and every new component picks from the existing set rather than inventing a size.

Why people get stuck here

• The generated numbers are ugly. 25.6288px is a correct scale value and an unpleasant thing to write. Most teams round, and then argue about how much.
• One scale doesn’t fit both mobile and desktop. A 48px heading that works on a wide screen is overwhelming on a phone.
• Line height gets forgotten. A size scale without matching line heights only solves half the problem — larger text needs proportionally tighter leading.
• The scale isn’t enforced. Generating it is easy; getting everyone to use it requires it to be in the codebase as tokens, not in a design file as a reference.
• Too many steps. A twelve-step scale reintroduces exactly the decision fatigue you were trying to remove.

What a good type scale looks like

A ratio matched to the content

Editorial and marketing pages benefit from contrast; dashboards and admin interfaces benefit from restraint. There’s no universally correct ratio, only one that suits what you’re building.

Rounded, memorable values

Round to whole pixels or clean rem values. A scale of 12, 14, 16, 20, 24, 32, 40 is close enough to a 1.25 ratio to look intentional and far easier to work with than the exact numbers.

Line heights that scale inversely

Body text at 16px might want a 1.6 line height; a 40px heading wants something closer to 1.15. Bake this into the scale rather than leaving it to each component.

Common mistakes to avoid

• Setting a base size below 16px. It’s the browser default for a reason, and smaller body text is a readability cost you pay on every page.
• Using the scale for spacing too. Spacing usually wants its own scale; forcing both through one ratio produces awkward gaps.
• Generating in px only. Relative units respect the user’s browser font size setting; fixed pixels ignore it.
• Adding a size “just this once.” That’s how you got nineteen sizes last time.
• Ignoring the smallest steps. Captions and labels are where accessibility problems concentrate, so check them first rather than last.

How to do it with Typography Scale Generator

Online Tool Store’s Typography Scale Generator builds modular scales with CSS output, running entirely in your browser.

1. Set your base size — 16px is the sensible default unless you have a specific reason otherwise.
2. Try three ratios in sequence and look at the largest and smallest steps each produces, not just the middle.
3. Pick the number of steps you actually need. Five to seven covers most sites.
4. Round the generated values to clean numbers, keeping the proportions roughly intact.
5. Copy the CSS output into your stylesheet as custom properties, named by role rather than by size.
6. Delete the old sizes from your codebase in the same pass — a scale that coexists with the old values isn’t a scale.

The Line Height Calculator, the Font Size Converter, and the Google Fonts Pairing Previewer round out the typography set.

Frequently asked questions

Should I use px or rem for a type scale?

Rem, in almost all cases. It’s relative to the root font size, so it respects a user’s browser text-size preference, which px does not. Generate in px if it’s easier to reason about, then divide by 16 to convert.

Do I need a separate scale for mobile?

Not a separate scale, but the larger steps usually need to shrink on small screens. The common approach is to keep the same set of names and reduce the top two or three sizes at narrow widths, either with media queries or fluid sizing.

How many steps should a scale have?

Five to seven is the sweet spot: a caption, body, a lead paragraph, and three or four heading levels. Beyond that you start getting steps too close together to distinguish, which defeats the purpose.

Final thought

The value of a type scale is subtraction. It replaces a dozen ad hoc decisions with one considered one — so generate it, round it, put it in the codebase, and let every future component pick from the list.

Try the free Typography Scale Generator