How to set a type scale for the web

What a type scale does

Without a scale, sizes accumulate: 15px here, 17px there, a 22px subheading someone needed once. Each choice looks fine alone, but readers stop being able to tell a section heading from a card title. A type scale for web pages replaces those one-off decisions with a few named steps, so every heading of the same rank looks the same and the gaps between ranks are big enough to see.

The idea comes from print, where typefounders cast metal type in a traditional series of sizes rather than any size at all. Web designers adapted it as the modular scale: pick a base size and a ratio, multiply up for headings and divide down for small print. Many of the common ratios are named after musical intervals, which is why you'll see a scale described as a major third or a perfect fourth.

Choosing a ratio

The ratio sets how loud the page feels. A small ratio keeps everything close together, so hierarchy depends more on weight and spacing. A large ratio makes headings shout, which works when there are only a few of them. A useful check: work out your largest step at the ratio you like, then ask whether a six-word headline at that size still fits on a 375px-wide phone without breaking mid-word. If it doesn't, the ratio is too large for small screens, or the scale needs to change with width (below).

Setting the steps

Start from the body size, because that's the text people spend the most time reading. 16px is the browser default and the practical minimum; 17 or 18px reads better with faces that have a small x-height. Then multiply. At 16px and 1.25, the steps are roughly 12.8, 16, 20, 25, 31, 39 and 49px.

1. Small: captions, labels and legal lines, one step below body. Don't go further down than that for anything people need to read.
2. Body: paragraphs, form fields and buttons.
3. h3: card titles and sub-sections, one or two steps up.
4. h2: section headings.
5. h1: the page title.
6. Display: an optional hero size, used once per page.

Most small sites need no more than these six. If you find yourself wanting a size between two steps, that's usually a sign the element should change weight or colour instead. Pair each step with its own line height and letter spacing: body text around 1.5 to 1.6, headings tighter (1.1 to 1.2), display type tighter still, often with slightly negative tracking because large letters look loosely spaced at their default settings.

Making the scale fluid

A single ratio rarely works at every width. A practical approach is two ratios: a smaller one on phones (say 1.2) and a larger one on wide screens (1.333), with the browser interpolating between them. The clamp() function in CSS does this per step, taking a minimum, a preferred value tied to the viewport, and a maximum.

For example, font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem) gives an h1 that is 32px on a small phone and grows to 56px on a laptop. Keep a rem part in the middle value. A size made only of vw units doesn't respond to browser zoom, which works against the WCAG requirement that text can be resized to 200% without loss of content. Body text usually shouldn't be fluid at all, or only by a pixel or two: its job is to stay comfortable, not to fill space.

Write the steps once as custom properties (--step-0 for body, --step-1, --step-2 and so on) and refer to them everywhere. Then changing the ratio later is a few edits, not a hunt through every stylesheet. The design tokens guide covers naming in more detail.

Mistakes that break a scale

• Choosing heading levels for their size. An h2 that looks too big becomes an h4, and the page outline stops making sense to screen readers. Keep the HTML levels in order and change the size in CSS.
• Too many steps. Ten sizes is a scale nobody can hold in their head. Fewer steps with more contrast between them read faster.
• Tiny meta text. Dates, prices and form hints are often set at 11 or 12px. People read those too; keep them at your small step or larger.

How Anticode handles type scale

Each of Anticode's seven design systems carries its own scale rather than sharing one. Body text sits between 16.5px and 19.5px depending on the typeface, section headings run from 30px on a phone to 52px on a wide screen, and the hero headline is sized with a clamp so it grows with the viewport between a set minimum and maximum. Brutalist and Swiss push the top of the scale furthest; Technical keeps it the most restrained.

In the visual editor, the headline scale control makes the hero headline larger or smaller within the system, which is the step people most often want to change. The Critic also checks that body text never drops below 16px. What you can't do in the visual editor is set your own ratio: the scale belongs to the design system, which is what keeps every section consistent.

Questions people ask

What is the best ratio for a website type scale?

There isn't one answer, but 1.2 to 1.25 suits most text-heavy sites and 1.333 suits landing pages with short copy. Anything above 1.5 usually needs a smaller ratio on phones.

Should I set font sizes in px or rem?

Use rem in the CSS so sizes follow the reader's browser setting, and think in pixels while designing. At the default setting 1rem is 16px.

How many font sizes should a website use?

Five or six steps cover nearly every small site: small, body, three heading levels and an optional display size. More than that usually signals a hierarchy problem.