The type scale: sizes on a ladder, not by guesswork

A type scale is a set of font sizes where each step is the previous one multiplied by a single ratio: at 1.25 that gives 16, 20, 25, 31.

Sizes by eye and sizes from a scale

When sizes are chosen by eye, a page collects twenty almost identical sizes: 14, 15, 16, 17, 18 pixels. The look turns out “sloppy”, although nothing is wrong on its own. It is like music: a note sung slightly off grates on the ear, though no single note is false by itself.

A type scale (also called a modular scale) does the opposite. You take one base size for body text and one ratio, and each next size is got by multiplying by it. With a base of 16 pixels and a ratio of 1.25 the ladder looks like this: 16, 20, 25, 31, 39, 49. Between the steps there is always the same relation, and the eye feels it as order.

Ratios are often taken from music, because they are pleasant to hear and to see: 1.2 (a minor third), 1.25 (a major third), 1.333 (a perfect fourth), 1.5 (a perfect fifth), 1.618 (the golden ratio). A handy calculator is on the site modularscale.com, listed in the sources.

Try it yourself: choose a ratio and see how the ladder changes. The headings in it are set in your project’s name.

:root {
  --ratio: 1.25;
  --fs-sm: 0.8rem;
  --fs-base: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.563rem;
  --fs-2xl: 1.953rem;
  --fs-3xl: 2.441rem;
}

font-size: clamp(2rem, 1.413rem + 2.61vw, 3.5rem);

How many steps a site needs

An ordinary site needs six or seven: one step down (captions, small notes), body text, and four or five up (subheadings and headings of different levels). Systems with fifteen sizes are feared for good reason: the difference between them becomes invisible, and you have to choose every time.

Big design systems give the steps roles. In Material Design 3 there are fifteen styles: display, headline, title, body and label, each in three sizes (large, medium, small). IBM’s Carbon divides type into two sets: “productive” for dense working interfaces and “expressive” for editorial pages. Role names save you from remembering numbers: a developer writes headline-medium, not 28px.

We’ll name our steps by size: --fs-sm, --fs-base, --fs-lg, --fs-xl, --fs-2xl, --fs-3xl (fs for font-size). And we’ll give the roles by rule: h1 takes --fs-3xl, h2 takes --fs-xl.

Units: rem, not px

It is better to set font size in rem: one rem equals the font size of the root element, which a person can change in their browser settings. People with low vision often make it larger, and a page sized in pixels won’t notice. The WCAG accessibility rule requires that text can be enlarged to 200% without loss of content, and rem gives you that for free.

:root {
  --ratio: 1.25;
  --fs-base: 1rem;
  --fs-lg: calc(var(--fs-base) * var(--ratio));
  --fs-xl: calc(var(--fs-lg) * var(--ratio));
}

This way the whole scale can be shifted with one edit: change --ratio or --fs-base.

Fluid size

A heading of 49 pixels is fine on a laptop and enormous on a phone. People used to write several media queries for this. Today there is the function clamp(minimum, preferred, maximum): the size grows smoothly with the width of the screen, but doesn’t go past its limits.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3.5rem);
}

The unit vw equals one percent of the screen width. It is easier to find the numbers in a generator: the sources list Utopia, which builds a whole fluid scale from two width limits. The diagram above has a simple example: move the screen width.

Line height and character

Each step has its own spacing between lines. For body text, 1.4 to 1.6 suits: the lines don’t stick together, and the eye doesn’t lose its path. Large headings have tighter spacing, about 1.1 to 1.2, or the lines of a heading drift apart. Set the line height as a number without units (line-height: 1.55), and it is counted from the font size of the element.

And a little about fonts: one family is enough. For a heading and for text you can take two styles (bold and regular) of the same font, and create the contrast with size. Take a pair of different families only when you can explain why. In the CSS part you attached web fonts: remember that each costs bytes and loading time.

Practice

Your project’s page is now set in sizes of 29, 21, 15 and 11 pixels: numbers plucked from the air. Replace them with a scale: define a ratio and six steps on :root, give the steps to roles (h1, h2, section paragraphs, the caption) and fix the line height of the paragraphs. Then change --ratio to 1.333 and see how the page rearranges. That is how a scale works: one number, the whole look.

What was wrong with 2014

In 2014 sizes were set in pixels and fitted to every screen with media queries, and there were no “fluid” sizes. A page either didn’t fit on a phone or looked empty on a big screen. The function clamp() didn’t exist then: it appeared in browsers only in 2019 and 2020.