Italics
26 August 2008
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 no
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 (<em> 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 punctuation 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 type faces, 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, old days, people used to add
<i></i> 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).
The HTML to use for emphasis is, of course,
<em></em> (and
for strong emphasis, <strong></strong>).
In most browsers text marked up with <em></em> 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
Foreign words and phrases that are not yet assimilated into the English language should be italicised. Note that unassimilated words, such as émigré, 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: <span
class="foreign-lang"
lang="fr">émigré</span> and
the CSS .foreign-lang {font-style: italic}.
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
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
<span class="highlight">t</span>
with CSS of .highlight {font-style:
italic}.
However, from an accessibility point of view this
is not ideal. Assistive technologies (such
as screen readers and Braille generators)
will not pick up on this and derive meaning from
it in the same way that they will for structural
elements such as <em>,
<lang>, <cite>
and <blockquote> (see
below). Perhaps
microformats or future HTML specifications might
provide a solution?
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 example4 is in Arial. 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 unarguably 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.
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 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.
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 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.
<p>As noted by<cite
id="bcquote"
class="relationship"><a
href="http://www.quotationsource.html">
Bernard Levin</a></cite>:</p>
<blockquote cite="#bcquote">
<p>Miss Cartland insists that Earl Mountbatten …
</p>
</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
(IE) 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:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="ielt7.css")
/>
<![endif]-->.5
Conclusion
Used correctly italics can enhance web 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.
Ted Page Director PWS
PWS web editorial services
For further information on any issue raised in this article or on any aspect of our web editorial services please contact us on 01932 355 222 or 07918 952 874.
RSS (subscribe)