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.