When Should You Use Bold vs. Italic in Typography?

In typography, there are many emphasis techniques, with italics and bold being the most common ones. Italic and bold are different font variations of the original typeface design. Let’s find out when to use italic or bold in your typography, and whether or not you should use both in the same document.

Most of the text in this article is using the typeface, Alegreya, with a regular font-weight. In CSS, the default font-weight property has a value of 400 (regular).

• A bold font-weight has the same style as a regular font, with thicker letters.
• An italic font is a left-to-right slanted version of your typeface’s regular font.
• a bold italic is both slanted & thicker version of your typeface.

Set font-weight to bold in CSS:

p {
  font-weight: bold;
}

You can also use numeric values, usually, 700 is for bold.

To set your font-weight to bold with HTML tags, wrap the words you want to emphasize with <strong> tags, like this:

<strong>Text here</strong>

Set font-style to italic in CSS:

p {
  font-style: italic;
}

To set your font-style to italic with HTML tags, wrap the words you want to emphasize with <em> tags, like this:

<em>Text here</em>

Set bold-italic in CSS:

p {
  font-style: italic;
  font-weight: bold; /*or 700*/
}

To use bold-italic with HTML, wrap the words you want to emphasize like this

<strong><em>Text here</em></strong>

Side-by-side comparison from regular, to bold, to italic, to bold-italic:

When to use italic vs. bold

One school of thought is that since italic and bold are both used to emphasize certain parts of a text block, you should only use one of them, at least within the same text block. Another school of thought is that italic should be used for mild emphasis, and bold for strong emphasis.

I say that it depends on your typeface (font-family) because the emphasis level of either bold or italic will vary significantly from typeface to typeface.

Some typeface designs, especially of the sans-serif classification, have rather weak italics. Weak, as in you hardly notice that they’re slanted/tilted, and thus they don’t work well as emphasis tools. If your typeface has a weak italic, use bold.

Some typeface designs, especially of the serif classification, have strong and noticeable italics, that it stands out almost as much as a bold font. In this case, you can decide for yourself which one to use, and if you want to keep things simple, use one emphasis style within the same text block, to avoid confusing the reader.

If however, your typeface has a strong italic but a clearly stronger bold you can use your italics for mild emphasis and bold for strong emphasis. An example of such typeface, is the one you’re looking at right now, Alegreya. Notice how the italic text in this paragraph is noticeable, but not nearly as much as the bold.

Where ever there are the most pixels, the eyes will usually travel first, that’s why bold, with its thicker letter-strokes is usually the best option for strong emphasis, while (well-designed) italics work well for mild emphasis.

When to use bold-italic?

Every once in a while you might want to combine bold and italic to extra-emphasize an important piece of text, and for that we have bold-italic.

In my opinion, using bold-italic fonts is more of an artistic choice than a practical design choice. If your typeface has a beautiful bold-italic font, that works well in your documents, by all means, use it. But try working with the individual bold and italic fonts first, as bold-italic can be too much of a good thing (too emphasized).

I use bold-italics sparingly, for one-off text elements.

Explore your typeface’s options

You have to test your typeface’s font variations, from italic to bold, before you make a decision. Also keep in mind that some typefaces have numerous font-weights, from “hair” (thinnest) to black (thickest). For your specific context, the “medium” font-weight could be best, or perhaps the “extra-bold”. Test, test, test!

I tend to use italic for mild emphasis on single words. Occasionally, I’ll use bold on multiple words in a row, e.g. if I strongly want to highlight part of a sentence. I’ve found that this style works well for this particular typeface (Alegreya) — but it might not for yours.

Never use bold and italic interchangeably — have a reason, and stay consistent with your chosen style within the same document. Whatever you do, remember that less emphasis is always better.

If you emphasize everything, you emphasize nothing.