Atelier

Weight

Weight is the loudest instrument on the page and the only one with a running cost. Every time you use it, it works slightly less well than it did the time before.

Source Serif 4 publishes wght 200 to 900. Weight is a currency: emphasis works because it is scarce, so the second bold phrase devalues the first and the fourth bankrupts all of them.

Emphasis

  • 200Emphasisa caption that does not expect to be read
  • 300Emphasisquiet, and slightly unsure of itself
  • 400Emphasisthe default, which is to say no claim at all
  • 500Emphasisa nudge — most readers will not consciously notice
  • 700Emphasisemphasis, spent once
  • 900Emphasisshouting, and it can only be done once per page

Weight is the loudest tool available, and the only one that costs something. A bold phrase is read first because it is the only bold phrase. Add a second and the eye now has two places to start. Add a third and it has no idea where to begin, which is the same as having no emphasis at all.

400

Clamped to the face's real range. There is no 100 in Source Serif 4 — the axis starts at 200.

1 of 5

Read the paragraph at each setting. Notice where your eye lands first, and when it stops landing anywhere.

Emphasis is a currency

A bold phrase is read first for one reason: it is the only bold phrase. The mechanism is contrast, not weight. Nothing about 700 intrinsically means important — it means different, and the eye is a difference detector. This is why the second emphasis in a paragraph is worth less than the first, the third is worth almost nothing, and by the fourth the reader has stopped treating boldness as a signal and started treating it as texture.

The instrument above lets you spend the budget and watch it deflate. Set the emphasis count to one and notice where your eye lands. Set it to five and notice that it lands at the top left, exactly where it would have landed on completely unstyled text. You have not added emphasis five times. You have removed it once.

Why the axis does not start at 100

Most weight scales in CSS are written as though every face runs from 100 to 900, because that is what the specification allows. Very few faces actually do. Source Serif 4 publishes wght 200 to 900, and a slider offering 100 would be offering something the file cannot produce. The browser would not error. It would clamp silently, so the control would appear to work while doing nothing for the first eighth of its travel, and the reader would conclude the site was broken.

Every axis range on this site is read out of the font binary at build time rather than typed from documentation, precisely because this class of bug is invisible until someone drags a slider to the end. Of the nine faces here, four had ranges that differed from what the published notes claimed. That is not unusual. It is normal.

What to use instead

When you find yourself wanting a second emphasis, the honest answer is usually that the sentence is carrying too much. Split it. If it really does contain two separate important things, they probably want different treatments rather than the same one twice: one in weight and one in italic, or one in weight and one promoted out of the paragraph entirely into a subhead. Two different signals stay legible as two signals. Two identical signals collapse into noise.

There is also a structural version of this rule. If a page has bold body text, bold subheads, a bold navigation item and a bold button, none of those elements is emphasised — the page simply has a heavier overall colour. Weight used everywhere is not emphasis, it is a typeface choice made by accident, and it is usually worse than the one you would have made on purpose.

Emphasis works because it is scarce. Spend it once per paragraph and never twice in a sentence.