Reach for font-weight 500

Label in 500: regular reads thin in UI, bold shouts when everywhere.

Brian Lovin@brian_lovin
Would it be really annoying if I started tweeting tiny CSS tweaks to make random websites better? Something like this: font-weight: 500;
May 3, 2019View on X ↗

The rule for labels vs body text is our reading of his tweak.

1 · 400 reads thin

Pick a few items in each sidebar.

Regular labelsBad
font-weight: 400
Medium labelsGood
font-weight: 500

2 · 700 everywhere shouts

Find the setting you would change first.

Bold everythingBad
700on every line
500 labels, 400 bodyGood
600heading500labels400body

3 · Find the weight yourself

Drag the weight until the labels feel settled.

Label weightThin
Labels fade into the icons. 
body       { font-weight: 400; } /* reading text */
.nav-item,
.btn,
th, label  { font-weight: 500; } /* things you scan and press */
h2         { font-weight: 600; } /* one step up, not three */

Why it matters, pros and cons

Why it matters

Short labels are scanned, not read. At 13–14px, a little more stroke makes them hold up next to icons and borders.

Pros

  • One line of CSS; nothing else changes size or color.
  • Leaves 600–700 free for the rare thing that must stand out.
  • Holds up better on low-contrast and dark surfaces.

Cons

  • Needs a font with a real 500; faux weights look smeared.
  • Long paragraphs should stay at 400.
  • Some typefaces run heavy; their 400 may already be enough.