Italicizing Text in HTML and CSS

Italic text is a common typographic need on the web, whether you are emphasizing a word or following a style guide that calls for italics on titles. Here is what you need to know about the different ways to achieve it.

Emphasis with the <em> tag

The <em> element stands for emphasis, and browsers render content wrapped in it as italic by default. This is the right choice when you want the reader to give a word or phrase extra weight in the sentence.

<p>
  That was a <em>wonderful</em> party, Bebe.
</p>

Visual distinction with the <i> tag

The <i> element applies italics purely as a visual style, without suggesting emphasis. Use it to set text apart from the surrounding content while keeping the semantic meaning neutral.

<p><i>Miranda thought:</i> What an interesting metaphor on the global economy.</p>
<p><i>Chris thought:</i> Is that mustard?</p>

When to use <i> versus <em>

The key distinction is straightforward:

  • <em> is for emphasis.
  • <i> is for italic text without emphasis.

If you are tempted to use <i> for the title of a work or publication, note that the <cite> element already handles this correctly. Browsers italicize content inside <cite> tags by default, covering cases like Moby Dick or The New York Times.

Custom styling with CSS

When you need visual distinction without any semantic meaning, a <span> with your own class works fine. You can then apply the CSS font-style property to that selector.

<p>
  Shoes are <span class="emphasis">on sale</span> this week!
</p>
.emphasis {
  background: lightyellow;
  font-style: italic;
}

Beware of faux italics

Not every font includes an italic variant, and sometimes the italic version simply is not loaded. In such cases the browser fakes it by synthesizing a slant, which usually looks poor. There is no warning for this; you have to look carefully and verify the font actually renders a true italic.

Unicode italics and accessibility

Unicode contains letters that appear italicized, which can be tempting when you need italics somewhere without HTML control, such as a tweet. However, this approach is bad for accessibility. Screen readers and other tools process each character individually, which makes words harder to understand. Avoid it unless there is no alternative.

Variable fonts and italics

Variable fonts define typographic variation within a single font file. Instead of a separate italic file, a variable font may offer a “slant” or “italic” axis that you can control directly in the browser, giving you a true italic look when the font supports it.

v-fonts.com

That covers several ways to italicize text. The right choice depends on intent: use <em> for emphasis, <i> or <cite> for style, and custom CSS when you need full control over the presentation.