A Type Scale Is a Set of Decisions, Not a Formula

Type scale generators are useful. You pick a base size, choose a ratio like 1.25 or 1.333, and get a neat list of sizes that relate to each other mathematically. It looks rigorous. It's a fine place to start and a poor place to stop.

The ratio is a convenience. What makes a type scale work is the set of decisions about where each size gets used, which steps you actually need, and where the maths should be ignored.

Where formulas fall short

A pure modular scale grows quickly. With a ratio of 1.333 and a 16px base, you're at 28px by the second step up and around 67px by the fifth. That might be right for a headline on a large screen, but the jumps between sizes become so large that you run out of useful steps in the middle, exactly where most interface text lives.

At the small end, the opposite happens. Steps below the base size come out at 12px and then 9px, and 9px is too small for almost anything. So you end up with sizes you'll never use and gaps where you need something.

A formula also knows nothing about your content. It doesn't know your headlines are long, that your product names wrap awkwardly, or that the client's audience skews older and reads on phones held at arm's length.

Starting from the content

We start with the text that will actually appear. What's the longest headline? How much body copy is on a typical page? Are there tables, captions, form labels, prices? Each of those needs a size, and the list of needs tells us how many steps the scale should have.

For most websites, that's somewhere between six and eight sizes: a body size, one or two smaller sizes for captions and labels, and three or four heading sizes. If we find ourselves wanting a ninth, it usually means two existing styles should merge.

Deciding where to break it

This is where the judgement comes in. We often use a gentler ratio for the small sizes and a steeper one for headings. The difference between a 14px label and 16px body text is meaningful; the difference between a 40px and a 44px headline barely registers. So the scale tightens where precision matters and opens up where impact matters.

We also round to whole pixels and check each size on screen rather than trusting the numbers. Some typefaces look larger than others at the same size because of their x-height, so a size that's correct on paper may need nudging.

Line height is part of the same decision. Large headings need tighter line spacing, often around 1.1 or 1.2, while body text needs more room, usually about 1.5. A scale without line heights is only half finished.

Scales that respond

The biggest headline on a desktop is usually far too big on a phone. Rather than one fixed scale, we set the larger steps to shrink on small screens while the body size stays steady. Modern CSS lets sizes scale smoothly between two limits, which avoids sudden jumps at breakpoints. The small sizes rarely change, because readable text on a phone needs to be about the same size as readable text on a laptop.

Writing it down

Once the scale is settled, we name each step by its job, such as body, caption or page title, rather than by its size. That way, when someone building a page later reaches for a style, they choose by purpose. It's one of the simplest parts of the system we hand over with every website design and build, and one of the most useful.

A good type scale is invisible. Pages feel calm and organised, and nobody can quite say why. That feeling comes from dozens of small calls, not a ratio. If yours has grown to a dozen sizes nobody can tell apart, we'd be glad to help you trim it back.