Frontend interview answer

How do you make text bold in CSS?

LowEasyCss

By FrontendAtlas Editorial · Updated Apr 5, 2026

Interview quick answer

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 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 definitions
Typography and Font Weight reasoning, edge cases, and production failure modes
How you would answer the most likely CSS interview follow-up

Practice more CSS interview questions

Interview answer drill

Use this CSS interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice more CSS interview questions Follow 7-day crash study plan Open Essential 60

Full interview answer

Common mistake

font-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

Common font-weight values

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.

Trade-off or test tip
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.