Some time ago, I read an article about how using italics on websites was not the best design choice. The problem with italics, it said, is that they are often difficult to read. They can be fine in printed material, but they don’t translate as well to digital media.
Unfortunately, italics serve a specific semantic function that other styles of presentation don’t. Putting something in bold text means something different than putting it in italics. Simply using bold text for both could cause problems with comprehension.
For a while, I couldn’t figure out how to resolve the problem, but I’m pleased to have finally sorted it out. I’m now using a font face for my italics that has a semibold weight (Source Serif Pro). Also, I’m applying some subtle styling that I think corrects a common error with digital typography.
The following illustrates the difference in readability between methods of emphasizing italicized in the middle of a sentence:
[1] This is an italicized test.
[2] This is an italicized test. (Normal italics.)
[3] This is an italicized test. (Italics with slightly increased letter spacing.)
[4] This is an italicized test. (As above, but the font weight is between normal and bold. Note that if you can’t see the difference, you might be behind a firewall that prevents Source Serif Pro from being downloaded.)
[5] This is an italicized test. (Normal bold.)
[6] This is an italicized test. (Normal bold and italics.)
[7] This is an italicized test. (Bold and italics with slightly increased letter spacing.)
Notice how the standard implementation of italics produces not only slanted letters, but also letters that are slightly cramped because there is less space between them. Although you can tell that the word in italics is different from the rest of the text, it’s not as easy to read.
The first adjustment I made was to remove the cramped nature of the italics by adjusting the letter spacing to be as close to the normal text as possible.
However, while I find it easier to read, I don’t think it stands out as much. Ironically, I can only conclude that the reason normal italics stand out has a lot to do with the fact that the smooth flow of the surrounding text is interrupted.
If I look at bold text, it is easily distinguishable from the surrounding text. It’s not distinguishable because it’s cramped, but because its darker.
Although the bold italics stand out more, I find the combination of styles to be too jarring. Each on their own has a particular meaning. Unless it’s a rare case where you intend to combine those two meanings, using both at once has too much of an impact. While normal italics might be considered difficult to read, bold italics could be considered too loud.
So, I compromised. I used a semi-bold font weight that is between normal and bold. I think that [4] is the best all-around approach to italics. Not only does it adjust the letter spacing to prevent the cramped appearance of normal italics, but it also makes the text darker enough to stand out, but not so dark as to be distracting.