Guide
Font Weight Guide
Use font weight for web typography hierarchy. Learn why 400/600 beats bold everywhere, how weight pairs with type scale, and CSS defaults for headings and body text.
Font weight is hierarchy without size. In CSS, 400 is regular body text and 600–700 is typical for headings. When every label, nav link, and card title is bold, weight stops signaling structure and starts signaling noise.
Applied consistently, weight creates a model readers learn quickly: heavier means structural, lighter means content. Applied randomly, every section renegotiates the rules.
Recommended weight pairs
At 400/400, heading and body collapse into one voice. At 400/600, hierarchy appears without changing color or size. At 400/700, headings push harder — useful for short labels, heavy for long headings.
- Body text: font-weight 400
- Headings: font-weight 600
- Inline emphasis inside sentences: bold or 600 on a single phrase
- Avoid bold on nav links, labels, and pseudo-headings in divs
Weight and variable fonts
Variable fonts allow any value on the weight axis (100–900). You do not need ten named weights — two or three values used consistently outperform six weights applied inconsistently.
Interactive lessons
Related guides
Glossary
Frequently asked questions
- What font weight should headings use?
- 600 (semibold) is a practical default for headings paired with 400 body text. 700 works for short labels; it can feel heavy on long headings.
- Should I use bold for emphasis in body text?
- Yes, for genuine emphasis inside a sentence. No, as a default styling for UI labels, nav items, or structural headings that should use size and weight tokens instead.
- How does font weight interact with type scale?
- Size and weight are complementary hierarchy axes. A clear type scale plus consistent weight pairs (400/600) creates structure without decoration like gray text or all caps.