Font weights explained
What weights mean and how to use them for hierarchy.
Font weights explained.
Key points
- Prefer clarity over style for body text
- Use consistent sizes and spacing across components
- Pair fonts by contrast: shape, x-height, and weight range
- Load only what you use to keep pages fast
Quick checklist
- Keep roles clear: headings vs body
- Start with 2 weights
- Test at small sizes