Font Weight

A screen has to say what to read first. The easiest instrument is size, and using size alone runs out quickly. Enlarge a heading, then find something more important above it and enlarge again, and eventually the screen is nothing but large text — at which point nothing arrives first.

Plenty of places can't change size at all. A document list card has to hold a title, an author, and a date, and with the card height fixed all three sit at 14 pixels. They still need different weights. The title has to be read first and the date last.

Stroke thickness takes that job. At the same size, a difference in weight is enough to set the reading order. It's also why bold started as one button and turned into a scale: a single step of emphasis can't build three levels.

The scale usually runs from 100 to 900 in nine steps, and one product typically uses three or four of them. Body at 400, subheads at 600, emphasis at 700, and nothing outside that. Fixing the set in advance removes the decision from every new screen. It speeds up review as well, since a weight outside the set is a mistake rather than a judgment call.

Two lines are worth holding.

The first is keeping steps at least two apart. Place 400 next to 500 and the difference doesn't read, which wastes the emphasis. 400 against 600 separates at a glance. The second is not going below 300. Thin strokes look clean in a design file and disappear against the background on a phone in bright daylight.

Check that the typeface actually contains the step. Specify 300 on a typeface that has no 300 and the browser stretches 400 to fake it, which produces uneven strokes. Weights usually mean one file each, so four steps means four downloads. Korean typefaces are large files, and every added step delays the first render. A variable font, which adjusts weight continuously from one file, is the way around that cost.

"Let's separate the heading by weight instead of size."

There's no room to go bigger, so hierarchy comes from thickness.

"400 and 500 next to each other don't read as different."

The steps need to be further apart to register.

"This typeface has no 300, so the browser invented that weight."

The specified step isn't in the file and the strokes came out mushy.

At Pagedeck, Noa cut the weights in use down to three: 400 for body, 600 for card titles and subheads, 700 for amounts and warnings. Before that, 500 and 800 were also in circulation and which one meant emphasis varied by screen.

Theo matched the font files to those three. Dropping one step removed one font file from the first render, and with a Korean typeface that file wasn't small.