Bold text

2 snippets in HTML & CSS

HCHTML & CSS

Strong & Emphasis

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.