Font Weight
The thickness of a typeface's strokes, ranging from thin (100) to black (900).
Plain English
Font weight is the single most powerful lever for creating visual hierarchy. Bold text says "read this first." Regular weight says "supporting detail." Used deliberately, weight differences guide the eye through a page without changing font size at all. The mistake most non-designers make is using bold as emphasis — scattering it everywhere until nothing feels important.
Technical
The font-weight CSS property accepts numeric values (100–900 in increments of 100) or keywords (normal = 400, bold = 700). Variable fonts can use any value between 1 and 1000. The font-weight: 500 (Medium) is the workhorse of UI design — heavier than regular but not as assertive as bold. Browsers synthesise bold if a weight is not available, producing suboptimal results — always use a weight the font actually supports.
Live Demo
Same typeface, same size — only font-weight differs. Notice how weight creates hierarchy.
Usage
✓ Good usage
Use 700 for the page title, 600 for section headings, 500 for card titles, and 400 for body copy — a four-level weight hierarchy creates clear reading order.
✗ Bad usage
Using font-weight: bold on every heading, subheading, label, and stat — when everything is bold, nothing is bold.
Recommended values
- 300 (Light) — large display text, decorative labels
- 400 (Regular) — body copy, secondary text
- 500 (Medium) — UI labels, nav items, card titles
- 600 (SemiBold) — section headings, button labels
- 700 (Bold) — page titles, key statistics, primary headings
- 800–900 — display headlines, hero text only
Common mistakes
- Using bold as generic emphasis throughout the UI — reserve it for the most important level of hierarchy.
- Specifying a weight the font does not include — the browser synthesises it poorly.
- Combining weight changes with colour changes simultaneously — one change is usually enough signal.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use a four-level weight hierarchy: page title 700, section headings 600, card titles and labels 500, body text 400. Never use bold outside of the top two heading levels.