Choosing Type Sizes And Building A Type Scale

The Problem With Picking Sizes By Eye

Many designs start with sizes chosen one at a time: a heading that looks about right, a subheading that is a bit smaller, a caption somewhere below. The result can work, but it often drifts. Across many pages, you end up with a dozen slightly different sizes, and the differences between levels are inconsistent. Some steps are so small that two levels look like a mistake, and others are so large they feel disconnected.

A type scale solves this by choosing a base size and a multiplier, then generating every other size from them. Because each step relates to the last by the same proportion, the hierarchy feels deliberate even when the reader cannot say why.

The Idea Behind A Ratio

A type scale works like a musical scale in one respect: each step is a fixed relationship to the one before it. You choose:

1. A base size, usually the size of your body text.
2. A ratio, the number you multiply by to move up one step (and divide by to move down).

Sizes above the base are used for headings, and sizes below it are used for captions and small print. Some ratios are named after musical intervals, and a few designers use the golden ratio, which is about 1.618. Others use plain values like 1.2, 1.25 or 1.5. There is no single correct choice. Smaller ratios produce gentle steps and suit dense, text-heavy pages. Larger ratios produce dramatic contrast and suit posters or landing pages with few levels.

A Worked Example

The numbers below are hypothetical, for illustration. Suppose body text is 16 pixels and the ratio is 1.25.

• Step 0 (body): 16
• Step 1: 16 × 1.25 = 20
• Step 2: 20 × 1.25 = 25
• Step 3: 25 × 1.25 = 31.25
• Step 4: 31.25 × 1.25 = 39.0625
• Step −1: 16 ÷ 1.25 = 12.8

Rounding to whole or half pixels is usually fine, giving roughly 13, 16, 20, 25, 31 and 39. The steps are noticeable but not extreme, which suits an article or documentation page.

Now try a larger ratio of 1.5 with the same base:

• Step 1: 16 × 1.5 = 24
• Step 2: 24 × 1.5 = 36
• Step 3: 36 × 1.5 = 54
• Step −1: 16 ÷ 1.5 ≈ 10.7

The jumps are much bigger. That can look striking for a hero headline, but the small step below the base may be too small to read comfortably, so many designers stop the scale downward early or set a minimum size by hand.

Choosing A Base Size

The base is the foundation, so it deserves the most thought. Body text needs to be comfortable at the typical viewing distance of the medium. Printed books and magazines are held at a close, steady distance, and screens vary widely. As a loose guide, body text on the web is often around 16 pixels or a little larger, but this depends on the typeface, because faces with a larger x-height look bigger at the same nominal size. Always judge the size by looking at real paragraphs in the actual typeface, not by the number alone.

Matching The Scale To The Job

You rarely need every step. A simple page may only use four or five:

• one for the main title
• one or two for headings
• one for body text
• one for captions, labels or fine print

Using fewer sizes strengthens visual hierarchy because each level has a clear role. If two levels look too similar, skip a step instead of adding an in-between size. Pairing size with weight can also help: a medium-weight subheading at a modest size can stand out from body text without growing much.

Remember that size is only one tool. Space around a heading, its weight and its color contrast with the background all affect how prominent it is. A scale gives you a consistent base for size, and the other properties refine it. Related ideas such as scale and contrast and emphasis and focal point apply to type as much as to images.

Adapting To Different Screens

A scale that looks good on a wide desktop display can overwhelm a phone. Large headings may wrap onto many lines, push content down and leave little room for the message. There are a few common responses:

• Use a smaller ratio on narrow screens, so that headings shrink more than body text.
• Let sizes adjust smoothly with the viewport within a minimum and maximum, rather than jumping only at fixed breakpoints.
• Keep the body size stable and reduce only the top steps.

This fits naturally with responsive layout work, where text, grids and images all adapt together. If you are designing for mobile design, test headlines with real, long titles, not placeholder words, since real content often breaks tidy examples.

Keeping The Scale Alive In A Team

A scale is most useful when it is written down and reused. Many teams record sizes as named styles, such as “heading 1” or “caption”, and attach them to a design system or a brand style guide. The names carry intent: a person using “caption” does not need to remember the pixel value, and changing the scale later updates everything at once. Consistent text styles also support design consistency across pages made by different people.

Common Mistakes

• Too many steps. A scale with ten sizes invites clutter. Use only what the content needs.
• Ignoring line spacing. Larger text typically needs tighter proportional spacing and smaller text a bit looser. Adjust leading per size instead of using one value everywhere.
• Trusting math over eyes. The numbers are a starting point. If a computed size looks wrong with your chosen typeface, adjust it and note the exception.
• Forgetting the smallest size. Text that is technically in the scale but too small to read is still a problem, especially for people with weaker vision.

Putting It Together

Start with the body size that reads well, choose a ratio that matches how dramatic the hierarchy should be, generate a handful of steps and round them sensibly. Test them on real content, adjust for small screens, and write the result down as named styles. The scale does not make the design for you, but it removes a lot of guesswork and makes the page feel more orderly.