em
Marks text with stress emphasis that changes the meaning of a sentence. Rendered as italic with font-synthesis protection.
Description
The <em> element marks text with stress emphasis — the kind that changes the meaning of a sentence when spoken aloud. Moving the emphasis to a different word changes what the sentence communicates.
VB styles <em> with font-synthesis: none to prevent browsers from generating faux italic glyphs, and font-optical-sizing: auto for proper rendering in variable fonts.
When to Use
- Stress emphasis: When the emphasis changes meaning — "I love chocolate" vs "I love chocolate"
- Corrective emphasis: "Do not press that button"
- Contrastive stress: "It's not the what, it's the how"
When NOT to Use
em vs i
Both render as italic, but carry different semantics:
| Element | Semantics | Screen Reader |
|---|---|---|
<em> |
Stress emphasis — changes meaning | May be announced with emphasis |
<i> |
Alternate voice — no meaning change | Not announced differently |
<!-- em: stress emphasis (changes meaning) --><p>Do <em>not</em> press that button.</p> <!-- i: alternate voice (no meaning change) --><p>The word <i lang="la">persona</i> is Latin for "mask."</p>Examples
<p>I <em>love</em> chocolate.</p><p>I love <em>chocolate</em>.</p>Blockquote Behavior
Inside <blockquote>, VB de-emphasizes italic text — <em> and <i> become normal-style with font-weight: var(--font-weight-medium). This prevents double-emphasis, since the blockquote itself is already visually offset.
<!-- In blockquotes, em is de-emphasized --><blockquote> <p>In VB, <em>italic text</em> inside a blockquote becomes normal-style with medium weight instead.</p></blockquote>Combined Bold + Italic
When <em> is nested inside <strong> (or vice versa), VB ensures the combined style renders correctly with font-synthesis: none:
<p><strong><em>Bold italic via strong+em</em></strong></p><p><b><i>Bold italic via b+i</i></b></p>CSS Reference
em, i { font-style: italic; font-synthesis: none; /* prevent faux italic */ font-optical-sizing: auto;} /* Combined bold + italic */:where(b i, i b, strong em, em strong) { font-weight: 600; font-style: italic; font-synthesis: none;} /* Italic in blockquote — de-emphasize */:where(blockquote) :where(i, em) { font-style: normal; font-weight: var(--font-weight-medium);}Accessibility
- Some screen readers announce
<em>with a change in voice tone or pitch - This distinguishes it from
<i>which is not announced differently - Nesting
<em>increases the degree of emphasis - Do not rely on emphasis alone to convey critical meaning — combine with context