SyntaxShelf

Bold text

2 snippets in HTML & CSS

HCHTML & CSS

Strong & Emphasis

HC · Text Elements
Syntax
<strong>important</strong>
<em>emphasized</em>
Example
<p><strong>Warning:</strong> This action <em>cannot</em> be undone.</p>

Note strong conveys urgency or importance (renders bold). em conveys stress emphasis (renders italic). Prefer these over <b> and <i> for meaningful emphasis, since screen readers alter vocal tone for strong/em.

Font Weight

HC · Typography
Syntax
font-weight: 100-900 | normal | bold | lighter | bolder;
Example
.heading {
  font-weight: 700;
}

.body-text {
  font-weight: 400;
}

.light-text {
  font-weight: 300;
}

.semibold {
  font-weight: 600;
}

Note 100=Thin, 200=ExtraLight, 300=Light, 400=Normal, 500=Medium, 600=SemiBold, 700=Bold, 800=ExtraBold, 900=Black. The font file must include the requested weight or the browser will fake bold, which looks poor.

Frequently asked questions

How does HTML & CSS handle bold text?
HTML & CSS covers this with 2 copy-ready snippets on this page. The "Strong & Emphasis" snippet in HTML & CSS uses `<strong>important</strong>`.
Which code does the HTML & CSS example use?
The "Strong & Emphasis" snippet uses `<strong>important</strong>`, from the Text Elements section of the HTML & CSS cheat sheet.
What other HTML & CSS snippets are shown for "bold text"?
Besides "Strong & Emphasis", this page also shows "Font Weight".
Is there anything to watch out for?
Yes. For "Strong & Emphasis": strong conveys urgency or importance (renders bold). em conveys stress emphasis (renders italic). Prefer these over <b> and <i> for meaningful emphasis, since screen readers alter vocal tone for strong/em.

Browse all tasks by intent