This is the archive of version one, made in 2006, launched in 2007, and active until 2012. It’s archived to preserve the original design and its content that was referenced in multiple posts, books and galleries. There’s a holding page before the new site arrives.

/ log / 22nd Sep, 2008 /

Quotation Marks & Texture

Single quotation marks pattern.

In the last entry, I stopped using double quotation marks and started using the single version. Some super-observant folks may have noticed but if you didn’t that’s also a good thing. Permit me to explain:

The final test for running text is legibility, so failing to notice would mean the style was not imposing on the text. The texture was good. When they occur, stylistic interruptions provide me with food for thought. If the punctuation interrupts the meaning, it demands fresh scrutiny. Double quotation marks seemed to interrupt by emphasising too heavily. Emphasis is sometimes required, but to my mind, with my style of writing, it seemed to impose on the text, altering the meaning by changing the silent voice in my head reading the text.

Legibility is subjective, and typographers can debate the nuances of style to achieve the best form until the end of time. However, context, typeface, and content are such varied beasts that trying to style them with one set of rules is unnatural, no matter how attractive it can seem. Whatever rules we follow, being consistent is a rule that’s truly universal. Knowing why we use a particular form is another. If we can’t justify a particular usage, the chances are we’ve probably not considered it enough.

Context is important here. American English is the lingua franca of web design, from the properties of CSS, to the majority of text we read. The best-selling handbook of American writing style, The Elements of Style by Strunk and White, only provides examples with double quotation marks followed by singles for quotations within quotations:

“This is a quotation with ‘another quotation’ inside it in the American style.”

However, I’m British. I live and work in the UK. In the UK, double quotation marks are also used, but there’s also a tradition of single inverted commas being used as the primary, with double inverted commas contained within them as needed:

‘This is a quotation with “another quotation” inside it in the British style.’

To my mind the latter imposes much less and suits me much better. I agree with book designer Jost Hochuli in Detail in Typography:

‘A more attractive appearance is achieved by using single quotation marks for the more frequently occurring quotations, and the double version for the less frequent occurrence of quotations within quotations.’

Robert Bringhurst advises us to:

‘Consider the face as well as the text when deciding which convention to follow in marking quotations.’

I agree with him but on the Web a face can change dramatically depending on the browser and operating system that’s rendering it. To my mind, we have to choose an optimal version — Safari in my case — and accept degradation after that. That’s also the case with other punctuation like spacing. I’ve just used hair spaces around the em dashes in the sentence before last, but you will see regular spaces unless you’re reading this using Safari — the only browser I know of that substitutes a hair space from the system fonts if one is not available from the specified face.

Different languages also have different quotation marks like guillemets («»), and baseline inverted commas used as left quotation marks („); they are in common use in Germany, Russia, and Poland as Piotr Fedorczyk showed me recently. Punctuation within (or without) quotation marks is another topic altogether with a set of rules that depends on context and form. For example, American English puts commas inside. British English puts them outside depending on whether or not the comma (or full stop [period], or exclamation mark) is part of the quoted text.

My view is, whatever style we choose, we should know why, and be prepared change it if necessary. Any rules we apply should aid legibility. Web typography is immature; the constraints and opportunities of the medium may take us down many different paths but the goal of legible, beautiful text is constant.

Good typography in running text is subtle and ambient. It enhances the text without interrupting it. It delivers meaning with clarity. In books, speech is mainly quoted in single marks. It’s a light touch. The typography removes itself from the picture being painted in our minds, and by doing so, allows it to shine. I’d like to achieve the same kind of light touch, here. I doubt my text will shine, but at least the typography will not distract you from my thorny prose.


Browse More Articles


  1. 1. By Evan Meagher on 22nd Sep ’08 at 10:40am

    I love your articles like this. You have a very good writing style and voice for discussing typography. Thanks for posting!

  2. 2. By inspirationbit on 22nd Sep ’08 at 11:02am

    huh, I’ve certainly learned quite a bit from this "little" article of yours. Thanks so much. I must admit it’s pretty confusing how different languages/countries use punctuation differently. So any clarification on this topic is more than welcome. Btw, the "baseline inverted commas used as left quotation marks" are common in Russian as well.

    Regarding hair spaces, Wikipedia says that "Very few user agents are able to render a hair space correctly: in most cases the result is an unwanted symbol or a question mark on the screen, depending on the font and renderer capabilities", however, when I checked this article in FF I simply saw a regular space around em dashes, which is much better than an unwanted symbol. But how about other browsers? Is it safe to use hair spaces in Web typography?

  3. Jon 陳’s profile 3. By Jon 陳 on 22nd Sep ’08 at 11:55am

    Thanks for taking the time to say so Evan. It’s always encouraging to hear.

    Thanks for the Russian information, Vivien. I’m just doing a few tests on spacing support at the moment, so there should be some results in an entry, soon-ish.

  4. 4. By jthomas on 23rd Sep ’08 at 01:43am


    I love this kind of article. You’re bringing the considerations of print to the web, and it turns the web into a real reading platform, not just code. I would never have brought such attention to detail.

    As far as I know, in french (because I’m french), we use « and » to make a quote. But I actually use “ on my website because, as you said, the web is mainly english.

  5. 5. By Andrea Gandino on 23rd Sep ’08 at 10:18am

    Nice write-up, Jon. I can see your point; infact single quotes disturb much less the act of reading text.

    My two cents to add something to this quotation chaos. If I’m not seriously mistaken in italian we use em-dashes at the beginning of a quotation, and nothing at the end of it. Second-level quotations are wrapped in double quotes.

    This goes for dialogues, both inline and not. Still, double quotes are used for dialogues too, sometimes.

    Concerning other uses of double quotes, they’re certainly used when one wants to make a certain word (or acronym, or abbreviation) to stand out more. I’m not an expert, for sure, but I consider this kind of barbaric, as we have italic and bold for that.

    Double quotes, are also used for indirect speech. But I think one could apply the same thinking you’ve exposed, opting for single quotes instead.

  6. 6. By Taylor on 24th Sep ’08 at 11:14am

    I always think quoted paragraphs look much nicer if you hang the opening quote to avoid the indentation of the first letter. I like to do something like:

    p .quoted {

    text-indent: -0.48em;


    Or whatever to just shift the beginning of the first letter over a little bit. You have to play around with the value depending on the font you’re using.

  7. Jon 陳’s profile 7. By Jon 陳 on 25th Sep ’08 at 04:46am

    Thanks for the Italian info, Andrea, and for the French, Jeremy, much appreciated!

    Hi Taylor, I mostly agree with you. Hanging punctuation (quotes and list numerals or bullets) mostly looks much nicer depending on the context. There is a way to do it using adjacent sibling selectors (sans IE support) but saving the extraneous class attribute. E.g:

    p { text-indent: -0.25em; } /*adjust value to suit*/

    p + p { text-indent: 0; }

    However, you’d have to reset browser quote injection first (they are supposed to do it automatically), and know exactly what the width of the hanging character is. Part of me thinks that no marks can be fine within clearly delimited block quotes.

  8. 8. By Piotr on 26th Sep ’08 at 15:46pm


    Yet another great article Jon. Thank you for introducing me to a few more type terms I’ve never heard before. Love expanding my type vocabulary—I consider “guillemets” my word of the day =)

    I can see your motivation behind the choice to use inverted comas for marking quotes and it surely works great most of the time. I think that there are however a few extreme situations when using them may cause readability issues. Especially when the text is set in a serif typeface inverted comas may be harder to spot. Take a look at the following examples:

    ‘G ‘S ‘Q ‘A g’ s’

    ‘T ‘Z F’ f’

    I may be exaggerating here however I feel strongly about it and as far as I’m concerned I’ll continue to use double quote marks.

    Great tip on use of hair spaces though! Will play a little bit with them and try them on my folio.


    I often see guillemets being used for marking quotes in academic texts in Italian. Is it some kind of innovation or an old rule destined to be abandoned?

  9. 9. By Andrea Gandino on 27th Sep ’08 at 04:22am

    @Piotr: I’ve seen them too. Honestly I don’t know about it. The sure thing is that Italy, through the centuries, as been under a whole lot of different influences by other countries, and cultures (France, Austria, Spain, just to name a few).

    So it is possible, together with a substantial lack of clarity on the subject, that different parts of Italy have inherited different conventions, when it comes to punctuation.

  10. 10. By Joe Clark on 27th Sep ’08 at 10:42am

    Single-quotes first leads to unpleasant ambiguities. Single-quotes first with strict British usage (periods and commas [not exclamation points; go look that up, Jon] always outside for non-utterances], makes things even worse.

    You can justify single-quotes first because you’re British, but even you admit that house styles in the U.K. vary. Whereas house styles in the U.S. and Canada are rock solid and invariant. I predict if you did a user test of native English speakers from different countries, most of them would find double-quotes first easier to read, understand, locate, and disambiguate.

    You also aren’t differentiating between body copy and headlines and cutlines, where, in the latter cases, even in the U.S. and Canada the convention is single quotes.

    Also, your fake small caps for a:link really aren’t working, and fail completely when the link text contains a capital.

  11. Jon 陳’s profile 11. By Jon 陳 on 29th Sep ’08 at 13:42pm

    Thanks, Piotr, interesting examples. The only thing I would say is that they work for me on the printed page, but the examples were definitely food for thought.

    Joe, I said, ‘depending on whether or not the comma (or full stop [period], or exclamation mark) is part of the quoted text’. I think you may have misunderstood. Also, I refer to running text. To my mind, that clearly differentiates body copy from headers and captions. The post is about my change of style and claims no comprehensive style rules, but merely explores some. The fake small caps are an imperfect example, as I’ve previously pointed out.

    The problem example you link to is a good one. Thanks for sharing it. The code chart actually has separate characters for the apostrophe (0027) and closing single quote mark (2019) but says the latter is ‘prefered’ for apostrophes instead. I guess a, ‘neutral (vertical) glyph with mixed usage’ is just too vertical, or neutral, or something. I’ve removed the title attribute on your link until we can fix our home-rolled app to handle them better.

    Joe, I have a lot of respect for your knowledge of language, typography and accessibility. Contibutions to the discourse and error corrections are most welcome. I still have much I’d like to learn. The substance of your comments were much appreciated. However, if there is a next time, I’d very much like to be able to appreciate your tone, too.

  12. 12. By Joe Clark on 1st Oct ’08 at 09:18am

    But, Jon, the British house style you are trying to refer to places periods and commas outside the “inverted commas” if the quoted material is not an utterance. When the quoted material is an utterance, at whatever level of quotation, that style places periods and commas inside.

    I suppose I would only exacerbate your complaints about my tone by suggesting you look it up. The Internet is pretty direct, Jon. I remain yr obedient servant, et veuillez acceptez, Monsier, mes plus sincères remerciments.

    Oh, and fix your Unicode.

  13. Jon 陳’s profile 13. By Jon 陳 on 1st Oct ’08 at 13:09pm

    Oh Joe, it seems you just can’t help yourself. Resist!

    I accept your sincere thanks, but for what I do not know. Your last comment was amusing, if only for the penultimate sentence, and much in the same way that a drizzle of honey removes the sourness from Greek yogurt. As encouragement, I offer you a witticism you probably know from a celebrated word man:

    ‘Display of superior knowledge is as great a vulgarity as display of superior wealth — greater indeed, inasmuch as knowledge should tend more definitely than wealth towards discretion and good manners.’

    My view is that for the purposes of this brief entry the sentence is fine and will serve. If it were a style manual or similar then perhaps it would be remiss not to mention things like Fowler’s and The Oxford Style Manual chapter 8, but it isn’t.

  14. 14. By Jon Gibbins on 1st Oct ’08 at 15:55pm

    Oh, and fix your Unicode.

    @ Joe: Your wish is my command! Or as they would say in France, «Tes désirs sont des ordres!»

  15. 15. By Gareth on 3rd Oct ’08 at 01:42am

    “Nice Article John.”

    I like how some people are still using foot marks as apostrophes! Maybe you should produce a short tutorial on punctuation and where to find each character on the keyboard.

    ' = foot mark

    ’ = apostrophe

  16. 16. By Lori Perkins on 14th Oct ’08 at 12:28pm

    Stumbled upon your blog looking for what the French use for quotes within quotes. Excellent, informative article!

  17. Jon 陳’s profile 17. By Jon 陳 on 14th Oct ’08 at 13:09pm

    Hi Lori, thanks for taking the time to says so. Wikipedia has either guillemets or double quotation marks as secondary level punctuation. Thanks for prompting me to go and read more!

  18. 18. By Max Black on 14th Oct ’08 at 20:58pm

    This is something I’d like to implement at the site I work with. Unfortunately, we have bigger issues to settle (a never-ending, ulcer-grinding redesign with a screaming diva for a designer), but I am bookmarking this discussion for use in making my own arguments in the future. Thanks for a terrific article.

  19. 19. By Ian Storm Taylor on 6th Jul ’09 at 20:27pm

    If it helps any… the small-caps you use for your 'a' are one of my favorite features of the site.

    Elles sont tellement belles.

  20. 20. By Shane on 23rd Feb ’10 at 02:32am

    These are my favourite types of post! Excellent write up, think I’m going to have to use single quote’s now!


  21. 21. By RC on 26th Sep ’10 at 05:31am

    A most enjoyable article on a most enjoyable site. And anyone who uses my beloved Baskerville gets my vote! I first fell in love with that typeface on an IBM golfball typewriter in the 70s.

    I’m old enough and British enough to call them inverted commas. And I was taught that direct speech uses doubles, indirect speech singles. And I’m sticking to that. (I even long quietly for indented paras).

Comments for this entry are closed.

Lately in the Log

  1. Anakin Tue, 26th Jun 2012 {4}

    I’m pleased to be able to say that Analog is joining forces with…

  2. We, Who Are Web Designers Mon, 19th Sep 2011 {66}

    In 2003, my wife Lowri and I went to a christening party. We were friends…

  3. Ampersand, the Aftermath Wed, 22nd Jun 2011 {3}

    The first Ampersand web typography conference took place in Brighton last…

  4. Design Festival, The Setup, and Upcoming Posts Mon, 20th Jun 2011 {0}

    Wow, this has been a busy period. I’m just back from the Ampersand…

  5. Web Design as Narrative Architecture Wed, 30th Mar 2011 {12}

    Stories are everywhere. When they don’t exist we make up the…

  6. Ides of March Tue, 15th Mar 2011 {4}

    My friend and colleague, Chris, has shared a spiffing idea, the Ideas of…

Remarks from the log

  1. By pixelangry in We, Who Are Web Designers:

    Unfortunately, here in Italy, the figure of the web designer is seen as a figure who plays a nerd on the computer,…

  2. By George in Copywriting, Experience Design, Daleks & Julio:


  3. By Martins in Typeface != Font:

    Great post Jon, I stumbled across it by chance on Google..!!

  4. By DarkStar in Smoothing out the Creases in Web Fonts:

    I agree with Leicester that table is great!

  5. By Martin Varesio in Ampersand, the Aftermath:

    His dry, droll, richly-flavoured delivery was a humorous counterpoint to some controversial asides…

  6. By Steve Blakeborough in Display Type & the Raster Wars:

    Hi Jon, In Elliot’s recent and informative article he suggested you might be bullied…

Live the questions and one day grow into the answers.