Italics

26 August 2008 | Ted Page

Many style guides advocate strictly limiting or even banning on-screen italics because of their relatively poor legibility. However, used with care, italics should present few problems and can add meaning and clarity to web copy in several distinct and important ways. These range from adding emphasis, to distinguishing block quotations, citations, foreign words and more. Also important is that each of these requires different HTML ( alone won’t do). Semantically correct code examples for each type are given below. Along the way we’ll also take a quick look at 500 years of history, styling and browser bugs.

Screen resolution and legibility

Computer monitors have much lower resolution (fewer dots per inch) than the printed page. Consequently, all other things being equal, the readability of on-screen italics is not as good as it is for roman typefaces, leading to the objections noted above. But screen resolution is by no means the whole story – legibility is determined by many factors.

For the purposes of this article, good colour contrast is taken as given. Font size, type face and line-height (the latter also known as line spacing or leading) are examined, as is line length. Letter and word spacing can also play a part, but if you get font size, type face, line-height and line length right, changes to letter and word spacing are unlikely to add much to legibility, and may well detract from it.

Five hundred year history

The first italic type face was commissioned by Venetian scholar Aldus Manutius (The Elder) in 1499. The use of italics to distinguish prefaces or block quotations from the main body of text dates from the mid-sixteenth century. Combining italics and roman type in the same line (for example to indicate emphasis) also first appeared in the sixteenth century and became popular in the seventeenth.[1] These typographic conventions have aided comprehension and added meaning to text for hundreds of years. They remain as functional today as ever and any web copy stripped of them would be all the poorer for it.

The main uses for italics in web copy

Emphasis

Perhaps the most common use of italics in web copy is for indicating emphasis. Words requiring strong emphasis should be styled in bold. Use both sparingly, particularly bold text.

In the old days, people used to add  tags to HTML in order to render it in italics. However, this contravenes one of the most important principles of modern web design – the separation of structure from style. Structural information belongs in HTML but styling instructions should live in separate CSS files (style sheets).

Update: The  tag has, of course, re-emerged with the introduction of HTML5, and should be used for text in an “alternate voice”, such as transliterated foreign words, technical terms, and typographically italicized text (see below for more on this).

The HTML to use for emphasis is, of course,  (and for strong emphasis, ). In most browsers text marked up with  is italicised by default. However, it does no harm to add em {font-style: italic} to your style sheet.

Styling punctuation

Note that when punctuating emphasised text, italicising the punctuation generally looks best. However, punctuation rendered in bold often looks cluttered and is therefore best avoided.[2]

Foreign words and phrases

(Note: with reference to the following section, see the update above on the reintroduction of <i></i> tags in HTML5. The advice in the following section is retained here solely for historical reference purposes. In an HTML5 world, <i></i> tags should, of course, be used for the purpose of marking up transliterated foreign words.)

Foreign words and phrases that are not yet assimilated into the English language should be italicised. Note that unassimilated words, such as émigré, also retain any accents they may have in their original language. Assimilated words, such as elite, should not be italicised and do not retain their accents.[3]

The HTML, including appropriate semantic class name and two-character country code, might look like this: émigré and the CSS .foreign-lang {font-style: italic}.

Works (newspapers, periodicals, works, legal cases, ships and aircraft)

Newspapers and periodicals; titles of works including books, plays, radio and TV programmes; parties to legal cases; and names of ships and aircraft should also be italicised, but are marked up differently to either of the above.

These take the HTML <cite></cite> tag which can include a link to the source being cited: <cite><a href="http://www.economist.com"> The Economist</a></cite>. The CSS might look like this: cite a {font-style:italic}.

Highlighting for clarity

(Note: with reference to the following section, see the update above on the reintroduction of tags in HTML5. The advice in the following section is retained here solely for historical reference purposes. In an HTML5 world, tags should be used for the purpose of highlighting for clarity.)

Italics can also be used to distinguish text from its surroundings to add clarity but with no further meaning implied. For example:

“How many instances of the letter t are there in this paragraph?”

“The word the appears twice in this sentence.”

The HTML and CSS for this usage is similar to that for foreign words – an appropriate semantic class name such as the with CSS of .highlight {font-style: italic}.

Block quotations

The use of italics for styling block quotations, although certainly not obligatory, is a typographic convention that dates from late Renaissance times. Should you choose to italicise your block quotations (or any other blocks of text for that matter), the following examples will demonstrate the importance for legibility of the choice of font face, font size and line height. Note: for the reasons set out at the beginning of this article, if you are reading this document from the printed page the effects will not be as pronounced as they will be when viewed on-screen.

The first example is in Arial[4]. It’s not ideal, although it is certainly a great deal more legible than some widely used fonts (the italic version of Gill Sans, for example, is considerably less readable than this. However, too few readers will have Gill Sans available to make it practical to show here).

“Miss Cartland insists that Earl Mountbatten helped her with the writing … All that expert help, however, has still not managed to correct her apparent belief that Trafalgar came very shortly after Waterloo; perhaps she has confused English history with the London Underground system.”

The next example is in Verdana and is, at least nominally, the same size as the above.

The final example is also in Verdana and with the same font size as the two previous examples. However, half an additional line of white space has been added between lines. Note how legibility increases significantly.

The basic HTML for a block quotation is simple: <blockquote></blockquote>.

Most browsers by default add indentation either side of a blockquote. This not only helps to distinguish a block quotation from its surroundings but the resulting shorter line length is also likely to increase legibility, particularly if the block quotation is to be italicised.

You can add a cite attribute in order to link to the source of the quotation: <blockquote cite="http://www.quotationsource.html">Miss Cartland insists that Earl Mountbatten … </blockquote>. This helps search engines but does little else, as it is not visible to humans – probably why it isn’t much used.

Microformats

However, as noted by Kevin Yank in a recent Sitepoint newsletter there is room for some creativity with block quotations, using microformats. The following structure provides a (visible) link to the quoted source as well as marking it as a block quotation. This is just as search engine friendly as the previous method but has the added advantage of providing a useful facility to the human reader.

As noted by<cite id="bcquote" class="relationship"><a href="http://www.source.html"> Bernard Levin</a></cite>:

<blockquote cite="#bcquote">

Miss Cartland insists that Earl Mountbatten … 

</blockquote>

Browsers don’t style block quotations in italics so you would need to add blockquote {font-style:italic} to your CSS.

Italics in headings and lists

The above styling conventions relate principally to the use of italics in the main body of copy. Italics can be used within headings and list items etc, but more often than not they are omitted.

And finally …

There is a bug in versions of Internet Explorer prior to version 7 that causes page layouts to fail sometimes when using italicised text. A solution was posted by Bruno Fassino on Position is Everything which involves, for IE6 and IE5.5, adding overflow:visible to the CSS for the content container in question. The solution for IE5 is overflow:hidden. In both cases the container also needs a width assigned.

IE specific style sheets can of course be added to the head of a page using conditional comments such as: .[5]

Conclusion

Used correctly italics can enhance copy by adding both meaning and style. However, a little care needs to be taken to ensure readability, correct semantics and the avoidance of potentially serious page layout problems.

Notes

[1] The Elements of Typographic Style. Robert Bringhurst, Hartley & Marks, 2005, p57

[2] The Elements of Typographic Style. Robert Bringhurst, Hartley & Marks, 2005, p60

[3] New Hart’s Rules, Oxford University Press, 2005, pp122-3

[4] Bernard Levin on Barbara Cartland’s grasp of history, from The Oxford Dictionary of Humorous Quotations, Ned Sherrin, Oxford University Press, 1997, xiii

[5] About Conditional Comments, Microsoft Developer Network