Designing a Complete Typographic Scale

A typographic scale is a predetermined set of type sizes that work together harmoniously. Rather than choosing type sizes intuitively for each element on each page, a scale establishes a limited set of sizes upfront. All type in the system uses sizes from that scale. The result is visual consistency that would be difficult to achieve through intuitive size selection alone.

Why Scales Work

Type sizes chosen intuitively tend to cluster. A designer building a page layout without a scale might use 48pt for a headline, 30pt for a subhead, 22pt for a pull quote, 20pt for a secondary subhead, 18pt for intro text, 16pt for body text, 14pt for captions. The differences between adjacent levels (48-30, 22-20, 18-16) are inconsistent and sometimes too small to create clear visual hierarchy.

A scale with a consistent ratio between levels produces size relationships that feel orderly. The viewer doesn't need to consciously notice the mathematical logic; they feel the visual order it creates.

Common Scale Ratios

Major third (1.25). Produces closely spaced sizes: 16, 20, 25, 31, 39, 49. Good for information-dense content where many type levels need to be distinct but not dramatically different.

Perfect fourth (1.333). Produces moderate spacing: 16, 21, 28, 37, 49, 65. The most commonly used scale in contemporary design systems.

Perfect fifth (1.5). Produces more dramatically different levels: 16, 24, 36, 54, 81. Good for posters and display-heavy work where strong scale contrast is desired.

Golden ratio (1.618). Similar to the major sixth but with theoretical underpinning: 16, 26, 42, 68, 110. Creates dramatic hierarchy. Works for editorial design with very distinct content levels.

Octave (2). The most dramatic: each size is double the previous. 16, 32, 64, 128. Creates extreme contrast. Practical for two or three-level systems, unwieldy for more.

Building a Practical Scale

For most brand systems, I use a four to six step scale derived from the base body text size. The base is usually 16pt for screen or 10–12pt for print.

For a screen-focused system at 16pt base with a perfect fourth ratio:

• Caption: 12pt (below the scale, fixed small size)
• Body: 16pt (base)
• Level 3 subhead: 21pt
• Level 2 subhead: 28pt
• Level 1 headline: 37pt
• Display: 49pt

Not every project uses every step. For a simple blog layout, I might only use body, subhead, and headline. The full scale exists for complex layouts that need more levels.

Adjusting for Leading

Each scale step needs a corresponding leading specification. Leading that's proportional to type size: roughly 1.3-1.5x the type size for body text, tighter (1.1-1.2x) for headlines.

Type size and leading together define the visual space each level occupies. Two typefaces at the same size but different leading look completely different on a page. Specifying both as part of the scale definition produces consistent results.

When to Break the Scale

Scales are tools, not laws. There are legitimate reasons to use a size outside the scale: a specific application that needs precise sizing for technical reasons, a design element where the scale size creates an awkward proportion, a typographic solution that requires a size the scale doesn't provide.

When I break the scale, I do it deliberately and document why. Breaking the scale because it felt right is how you end up with the same inconsistent size distribution you were trying to avoid.

The scale should make you slightly uncomfortable sometimes. That slight discomfort is the scale working. It's telling you that your intuitive choice falls outside the system, and making you justify whether the exception is warranted.