Make text bold with font-weight, e.g., font-weight: bold or font-weight: 700. The actual weight depends on what the font family provides. Use font-weight carefully for readability and accessibility; test variable fonts and fallback weights.
How do you make text bold in CSS?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
CSS uses the font-weight property to adjust the thickness of glyphs. You can use keywords like normal and bold or numeric weights like 100–900 when the chosen font supports them.
Value | Meaning | Notes |
|---|---|---|
normal (400) | Regular text weight | Default for most fonts |
bold (700) | Bold text weight | Common emphasis weight |
bolder / lighter | Relative to the parent weight | Browser computes based on available faces |
100–900 | Numeric weights | Requires corresponding font faces to render accurately |
Example: Bold Headings
CSS
h1, h2 {
font-weight: 700;
}
This sets headings to a typical bold weight (700). If the font doesn’t include a 700 face, the browser may simulate bold.
Example: Variable Fonts with Fine-Grained Control
CSS
@font-face {
font-family: 'InterVar';
src: url('Inter-VariableFont_slnt,wght.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
}
.body-copy {
font-family: 'InterVar', system-ui, sans-serif;
font-weight: 550; /* mid-weight for better readability */
}
Variable fonts allow any numeric value in a supported range, giving precise control over boldness.
Semantic HTML Reminder
- Use for semantic importance; style with CSS via
strong { font-weight: 700; }. - is purely stylistic; prefer CSS for presentation and keep markup semantic.
Accessibility & Design Tips
- Use bold to create hierarchy, not for entire paragraphs.
- Pair bold text with adequate color contrast; weight alone may not provide sufficient emphasis.
- Check available weights in your chosen font; avoid forcing unsupported weights that degrade rendering.
Practical scenario
Emphasize headings and error labels by increasing font weight without changing layout.
Common pitfalls
- Fonts missing intermediate weights (e.g., 600) leading to fallback.
- Bold text causing layout shifts when width changes.
- Using
instead of semantic CSS.
Variable fonts offer smooth weights but require font support. Test with real fonts and verify contrast for accessibility.
Still so complicated?
font-weight is your volume knob for text — turn it up to make headings stand out, down for body copy comfort.
Summary
- Bold text is controlled via
font-weight(e.g., 700 or bold). - Numeric ranges offer finer control, especially with variable fonts.
- Prefer semantic HTML for meaning and CSS for presentation.
- Use bold sparingly to maintain clear visual hierarchy.
Similar questions
Guides