05
Weight
Weight is hierarchy without size. When everything is bold, nothing is. When only headings carry weight, structure appears instantly.
4 min read
You reach for bold when you want emphasis. That's correct instinct, wrong default. On most interfaces, bold is the only weight variation, and it's applied everywhere: nav links, labels, card titles, inline highlights, fake headings in <div> tags.
Compare
Everything bold
When every element fights for attention, none of them win. Weight stops signaling hierarchy and starts signaling panic.
Heading at 600
Body at 400. Same color. Same size family. The heading announces itself through weight alone, not gray, no underline, no uppercase.
Font weight is a hierarchy tool: a single axis, like size in a type scale. Applied consistently, it creates structure the eye reads before the brain parses words.
Weight
Section heading
Body paragraph with the same color as the heading. Weight, not gray, carries the hierarchy.
Drag the slider. At 400/400, heading and body collapse into one voice. You must read both to tell them apart. At 400/600, hierarchy appears without changing color or size. At 400/700, the heading pushes harder, useful for short labels, heavy for long headings.
The mistake is treating bold as decoration. <strong> inside a sentence? Correct. Bold on every second line in a settings panel? That's not emphasis. That's noise.
The Rule
Headings at 600. Body at 400. Bold inline only for genuine emphasis inside a sentence.
When weight variation is consistent, the reader builds a model: heavier means structural, lighter means content. When weight is random, every page section renegotiates the rules.
h1, h2, h3 {
font-weight: 600;
}
p, li {
font-weight: 400;
}
strong {
font-weight: 600;
}h1, h2, h3 {
font-weight: 600;
}
p, li {
font-weight: 400;
}
strong {
font-weight: 600;
}Common Mistake
Setting font-weight: 700 on headings and 600 on subheadings and 500 on labels. Three weights in one card, none of them meaning anything consistent.