CSS Bold Tutorial
Everything you need to style bold text correctly with CSS.
Weights and Ranges
p { font-weight: 400 }
strong { font-weight: 700 }
.bold { font-variation-settings: "wght" 700 }When using variable fonts, set the wght axis instead of relying on faux-bold.
Fallbacks
body {
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}Choose robust fallbacks to ensure bold weights render consistently across platforms.
Accessibility
- Ensure color contrast remains sufficient when bolding text
- Don’t use bold alone to convey critical meaning
- Combine with semantic
<strong>where appropriate
Generate copy‑ready CSS in the CSS Bold Generator.