Type Scale

When text sizes got eyeballed screen by screen, the values drifted. A subheading is 17 pixels here and the same kind of subheading is 18 pixels there. Seen separately, nobody notices the difference.

The problem shows up once the drift accumulates. With twenty different values in play, nobody can say which size means which level of importance, and on some screen a heading ends up smaller than body text elsewhere. People read size as a signal of what matters, and that signal now means something different on every screen.

When it came out in review that Noa and Theo had used different values for the same kind of heading, neither of them was wrong. There was no list to choose from, so each picked whatever looked right. A type scale is the work of making that list first.

Pick one base size and multiply it by a constant ratio to generate the steps. Set body text at 16 pixels with a ratio of 1.25 and you get 16, 20, 25, 31, 39, which gets rounded to readable whole numbers: 16, 20, 24, 32, 40.

The ratio is what keeps the gaps between steps even. Sizes as close as 16 and 18 fail to communicate a hierarchy, while a jump from 16 straight to 40 leaves the middle empty with no usable step. Most teams pick a ratio somewhere between 1.2 and 1.33.

The steps only get used if each one carries a role name. Faced with bare numbers, people deliberate over 24 versus 32 every time, so the steps get called things like body, subheading, heading, and display, and that name is what people choose by.

Size alone isn't enough, so each step bundles a line height and a font weight with it. Line height is the space between lines; font weight is the thickness of the strokes. Large text wants tighter line height while body copy wants it generous, so a scale that fixes only the sizes still leaves the same 24-pixel heading looking different from screen to screen.

"That number isn't in the type scale. You need to pick either 20 or 24."

An arbitrary value came in; stay inside the defined steps.

"On mobile we're dropping just the display step by one level."

Keep a separate top of the scale depending on screen width.

"There are nine steps and I can't tell which to use. Should we cut it to five?"

Too many options turned choosing into work.

Pagedeck keeps six steps. Noa started with nine, then counted the values actually in use six months later and found only six; the remaining three each appeared on a single screen. Those three came out and the screens using them moved to the nearest step. Letter spacing stayed out of the scale, set only on the display step. Letter spacing is the space between individual characters.