Typography of Quotations & Citations

We commonly quote and reference the words of others. Language conventions, style guides and typographic distinction are used to subtly (and sometimes not so subtly) distinguish a quotation from the other semantic elements on the page. This article examines the typography of quotations.

Distinguishing Elements and Characters

In web pages we “mark up” quotations in two ways: inline quotations (those that appear within a block of copy), and separate block quotations (e.g. an entire paragraph or a list, or a mixture thereof). Respectively, we use the q and blockquote elements for these. Although all fairly similar we use linguistic conventions to signify that something is being quoted, generally by enclosing quoted material with quotation markers. Quotation punctuation is used also for other purposes (for emphasis, to denote irony, et cetera) but this extended usage is even more varied, sometimes contentious and quite beyond the typographic concerns at hand. Common punctation markers:

Description	Character	Unicode ref.	HTML ref.
Single curved quote, left	‘	U+2018	‘
Single curved quote, right	’	U+2019	’
Double curved quote, left	“	U+201C	“
Double curved quote, right	”	U+201D	”
Low single curved quote, left	,	U+201A	‚
Low double curved quote, left	„	U+201E	„
Double angle quote, left	«	U+00AB	«
Double angle quote, right	»	U+00BB	»
Single angle quote, left	‹	U+2039	‹
Single angle quote, right	›	U+203A	›

With just these ten characters we can cater for the quoting conventions of over 50 languages, including English, just about every European language, as well as Japanese, Korean, Chinese, Russian, Hebrew, Thai, Vietnamese, and more. There is only one more character needed to accommodate for an additional quoting convention, whereby the initial quote is indented with a quote indentation bar (“―”; U+2015; ―) or alternatively an em dash (—), for example:

Uncle Charles smoked such a black twist that at last his nephew suggested to him to enjoy his morning smoke in a little outhouse at the end of the garden. ―Very good, Simon. All serene, Simon, said the man tranquilly. Anywhere you like. The outhouse will do me nicely: it will be more salubrious. ―Damn me, said Mr Daedalus frankly, if I know how you can smoke such villainous awful tobacco. It’s like gunpowder, by God. ―It’s very nice, Simon, replied the old man. Very cool and mollifying. Every morning, therefore…

—Joyce, J. 1992, A Portrait of the Artist as a Young Man, Modern Classics Edition, Penguin, New York, p. 62.

Enriching Quotations

Besides picking the right characters to punctuate our quotations with (avoid “dumb quotes”—these are prime markers and used to notate hours and minutes, or feet and inches, not quotations), we can enhance our quotations typographically.

The Basics

Inline quotations are fairly simple, and should receive the same typographic treatment and respect that the copy they are set amongst already receive; besides properly notating them with quotation punctuation there is little reason to disrupt the flow of text by applying additional styling. This leaves blockquotes a bit alone and by themselves, often somewhat neglected. To cater for blockquotes, remember these three general principles:

1. provide additional lead (space) before and after block quotations (being cautious of the page baseline) to ensure the block quotation is visibly separate from the rest of the copy
2. set verse quotations flush left and ragged right
3. indent and center verse quotations

To further signify a blockquote as a separate citation, it could be hugged by additional margins on the left and right (be careful: don’t squash the text), or be aligned differently to the body copy (e.g. ragged right). Be prepared to experiment—for example, gently change the background color, or lighten the text color, or if you’re keen to be bold perhaps swap from a serif to a sanserif—but if unsure stick with the basics, because they work.

Graphical or Larger Quotation Marks

A popular trend has been to use larger quotation marks for a blockquote, often with the use of (unnecessary) graphics, and often applied to all block quotations on the website. Creativity stepped in and now we have a broad range of quotation styles, ranging from simple to rather extravagant, for example: Larger quote styling from Digital Daily. Quote styling from Chris Shiflett’s blog. CNET’s block quote styling.

Keeping it Simple

It is, however, possible to keep things nice and simple, stupid—as the maxim goes. A lot is possible with a bit of clever CSS to spice up blockquotes. For instance, we can automatically add quotation marks to our quotations with CSS using pseudo-selectors:

blockquote:before { content: "“"; }</code>
<code>blockquote:after { content: "”"; }

Note, you will need to ensure your document is using the UTF-8 character encoding for these characters to render properly. Set it with a meta element in the header:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

In addition, we can fake hanging punctuation at least with the opening quotation mark using a negative text indent:

blockquote { text-indent: -0.4em; }

Larger double quotation marks, without the use of images as detailed on 24ways.org by Simon Collison.

And Something for the Advanced…

The blockquote element allows for a number of attributes and variables to be defined. The interesting ones are:

• the cite attribute, allowing us to reference the source of the quote
• the lang and xml:lang attribute, to define the language of the quoted text
• the dir attribute, in which the language directionality is noted, e.g. rtl (right-to-left) and ltr (left-to-right)

With a bit of neat CSS we can automatically pull the value of the cite attribute and display it below the blockquote to reference the source:

blockquote[cite]:after {
    display: block;
    text-align: right;
    content: "2014 " attr(cite);
    font-style: normal;
    font-size: 1.2em;
    }

Here we call upon the contents of the cite attribute of the blockquote element and display it after the element, with the prefix of what is defined in content: "";, in this case an em dash. For example the following markup with the above styling applied—

<blockquote cite="de Sade, M. 2009, Justine, Modern Forbidden Classics, Harper Perennial, London. p. 1.">
    <p>The triumph of philosophy would be to reveal, amply and lucidly, the means by which providence attains her ends over man; and, accordingly, it would trace those lines of conduct which might enable this unforunate biped individual to avoid, while treading the thorny path of life, those bizarre caprices of a fate which has twenty different names, but which, as yet, has never clearly been defined.</p>
</blockquote>

would render as such—

Further Reading

• Smashing Magazine: Block Quotes and Pull Quotes: Examples and Good Practices
• SitePoint CSS Reference: quote
• SitePoint CSS Reference: blockquote
• Wikipedia: Quotation mark
• Wikipedia: Non-English usage of quotation marks
• Wikipedia: Quotation mark glyphs

Errata

Florent Verschelde kindly noted that cite should only be used to point to the URI of the source, not to reference the source semantically. Further, many browsers do not make variables pulled from the cite attribute selectable and thus copy-able, and you can’t wrap it as an anchor to make it a link if you wanted to link to the source. With regards to correct usage including changes to blockquote, q, and cite elements (and cite attribute) in HTML5 check out HTML5Doctor.com’s article on quoting in HTML. The article is a comfortable read and covers the topic very well — highly recommend having a look.

Frequently Asked Questions on Typography of Quotations and Citations