font-weight looks trivial until fallback fonts, missing weights, and variable-font interpolation make bold text render inconsistently. Explain common readability and hierarchy mistakes.
Interview answer drill
Use this CSS interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.
How do you make text bold in CSS?Frontend interview answer
Interview focus
This CSS interview question tests whether you can explain Making text bold in CSS: font-weight support, fallback pitfalls, and readability choices, connect it to production trade-offs, and handle common follow-up questions.
- Making text bold in CSS: font-weight support, fallback pitfalls, and readability choices explanation without falling back to memorized docs wording
- Typography and Font Weight reasoning, edge cases, and production failure modes
- How you would answer the most likely CSS interview follow-up
Interview quick answer
Full interview answer
Common mistakefont-weight does not guarantee the exact boldness you asked for. The browser can only use weights the chosen font actually provides, so a production design may look different across fallback fonts or variable-font settings. The real job is choosing emphasis that preserves hierarchy and readability, not just making text bold.
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
Preparing for interviews?
Use this as one explanation rep, then continue with the CSS interview questions cluster or a guided prep path.