How to Italicize Text

Celý článek

HTML and CSS offer us the ability to italicize text. I’m talking about text like this. Let’s cover everything you’ll need to know.

What is italic text and why would you italicize text?

You italicize text most often to call attention to it. Literally to emphasize a word, so that someone reading the sentence will give that word or phrase some extra oomph, as you might intend as the writer. Or, it might be following a particular style guide, like italicizing the title of something, say a published article.

Use the <em> tag

The “em” in <em> literally stands for emphasis. Browsers will, by default, make italicize text that is wrapped in HTML <em> tags.

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

Imagine the sound of that sentence, where the reader is emphasizing that word giving the sentence a different feel that if they didn’t.

Use the <i> tag

The <i> element is to apply italics to text without implying emphasis. It’s to visually set some text apart from other text without implying that a reader is applying extra weight to those words. Perhaps something like:

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

What’s the difference between <i> and <em>?

One more time:

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

If you’re tempted to use <i> for the title of something, like:

<p>
  The book 
  <!-- Not the end of the world, but... --> 
  <i>Mr. Penumbra's 24-Hour Bookstore</i>
  is good.
</p>

<p>
  The book 
  <!-- ...this is more semantically correct. --> 
  <cite>Mr. Penumbra's 24-Hour Bookstore</cite>
  is good.
</p>

Fortunately browsers italicize content wrapped in <cite> tags, just like <i> does, so no further work is required there if you’re citing a work (e.g. Moby Dick) or a publication (e.g. The New York Times).

Use your own HTML class and CSS

If the goal is set text apart visually, then we don’t have to reach for the <i> element. Spans have no semantic meaning and can be styled for visual emphasis:

<p>
  Shoes are <span class="emphasis">on sale</span> this week!
</p>

.emphasis {
  background: lightyellow;
  font-style: italic;
}

The CSS property font-style is the one you need for making text italic, which you can apply to any selector you like.

Watch out for “Faux Italic”

Not all fonts have italicized characters. Or, you might be in a situation where the italic version of the font isn’t loaded. In either case, the browser will try to fake it anyway, which almost always looks awful (or at least much worse than using an actual italic font). 

Nothing is going to warn you about this — you kinda just need an eye for it. Here’s an example of the font Merriweather in faux italic:

Unicode italics

There are a zillion characters available in Unicode, including letters that have an italic vibe.

You might use this when you don’t have HTML control to do things like italics like, say, on Twitter when composing a tweet.

The accessibility of this is awful. It will reach each character individually, making it (presumably, to me) hard to understand the word. Be very careful when using this, if you e even use it all.

Italics in variable fonts

This is a bit of an advanced concept, but there are things called variable fonts. They offer customization right in the browser. So rather than a second font file for the bold version, they have information in them to bold themselves with that one file. But “bold” is just an example of what a variable font might offer. Not all of them necessarily do.

A variable font might have a “slant” or “italic” option and you could apply that look that way.

There it is, five different answers to the question of when to italicize text. Hopefully this also helps with the next logical question: Which method should I use?

The post How to Italicize Text appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.