Font Weight

Your nav links are 600. Your card titles are 600. Your labels are 600. Bold stopped meaning emphasis three components ago.

The Principle

Font weightFont weight is the stroke thickness of a typeface, specified in CSS from 100 (thin) to 900 (black). 400 is regular body text; 600–700 is typical for headings and emphasis. is the thickness of a typeface's strokes. Most families run from Thin to Black. Variable fontsA font format that stores weight (and other axes) as continuous values instead of fixed named steps. can adjust weight continuously. Weight changes visual importance without changing size.

The Rule I Follow

I use 400 for body text, 600 for headings, and 700 only for inline emphasis. I don't stack 400, 500, and 600 in the same interface. The gap is too small to read.

Try It Yourself

Switch between Light, Regular, Medium, Semibold, and Bold. Watch what still reads as a heading.

The Mistake I'd Avoid

Using bold as the only way to create emphasis. Spacing, hierarchy, and scale often communicate importance more effectively.

Remember This

Weight should guide attention, not demand it.

body {
font-weight: 400; /* body copy */
}

h2 {
font-weight: 600; /* headings only */
}

strong {
font-weight: 700; /* inline emphasis */
}

body {
font-weight: 400; /* body copy */
}

h2 {
font-weight: 600; /* headings only */
}

strong {
font-weight: 700; /* inline emphasis */
}