Advertisement

Start Using Quotation Marks the “Correct” Way

by

This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

This post is part of a series called A-Z of Web Typography.
A Beginner’s Guide to Pairing Fonts
Typographic Readability and Legibility

Quotation marks, speech marks, inverted commas; whatever you call these forms of punctuation, you might well be using them incorrectly. Let’s take a quick look at what’s correct, what isn’t, and what you can do within your CSS to make sure your quotes are properly formatted.


Quick Terminology

Let’s begin by illustrating what we’re talking about here. There are several forms of what we recognize as quotation marks, and each has its own specific purpose. When punctuating writing, you should use “smart quotes”, or “curly quotes”:

q-curly-double

That applies to both double and single quotation marks.

q-curly-single

And even apostrophes:

q-apostrophe

On the web, however, you’ll commonly see “dumb quotes”. These are straight versions, which are often used because of defaults set in CMSs and applications. Even your keyboard will usually make it difficult to use anything but dumb quotes.

q-straight-double
q-straight-single

Dumb quotes are not to be mistaken for “primes”; separate glyphs which are used for denoting measurement, such as feet and inches, co-ordinates and even more complicated units used in watch-making, for example.

q-prime

Primes are usually different to dumb quotes in that they slant slightly, but that’s of course entirely down to the typeface.

So what are dumb quotes for then?!

Code. That’s pretty much the only place you should technically be using them.


Using Proper Quotes

As mentioned, your keyboard won’t help you much when you’re trying to use correct quotes. In fact, as I type this, I’m throwing dumb quotes in all over the place—I’ll have to do a search and replace afterwards!

If your document is using charset utf-8

<meta charset="utf-8" />

then you’ll be able to paste the correct quotation marks directly in. Alternatively, you’ll need to use the HTML named or numeric entities, or (for CSS) the escaped unicode values:

glyph named entity numeric entity escaped unicode

&ldquo; &#8220; \201C

&rdquo; &#8221; \201D

&lsquo; &#8216; \2018

&rsquo; &#8217; \2019

Quotes in CSS

We can use the quotes property in CSS to make sure our <q> and <blockquote> elements are properly decorated with the correct quotation marks. The quotes property accepts four values in sequence, each one defining which character to use under each circumstance:

  • Opening quote
  • Closing quote
  • Opening nested quote
  • Closing nested quote

It might look a bit like this:

q, 
blockquote {
	quotes: "\201C" "\201D" "\2018" "\2019";
}

Here we’re targeting both inline quotes and blockquotes. We’re using escaped unicode values (mentioned in the table earlier) to dictate which glyphs will be used to open and close our quote elements. We’ve stated that we want a double quotation mark to open, then double closing mark to close. Nested quotation elements will have single marks applied.

Take a look at this demo. In it, you’ll see a <div> with no styling applied, then one with correct styling.

Note: These quotation marks are slotted in using pseudo elements, so only supporting browsers will actually display quotation marks in this way.

I want more power!

Further properties allow us even more control. We can go on to specifically control those pseudo elements, stating whether we’d like the opening, or closing marks to be displayed at all.

q:before,
blockquote:before {
    content: open-quote;
}
q:after,
blockquote:after {
    content: no-close-quote;
}

In this code we’ve altered the content of the pseudo-elements, saying that we actually don’t want a closing quote to be displayed.


Language Gap

Not everyone displays quotation marks in the same way, however. Take a look at what the French use, for example.

q-citer

These are called guillemets (no, not guillemots) and they’re just one example of alternative quotation marks. Happily, we’re free to use the correct entities for whatever language we need. And we can target the lang attribute on the html element to be specific (thanks fliptheweb for that little tip).

<html lang="fr">
<q>...
html[lang="fr"] q {
  quotes: "\00ab" "\00bb";
}

Excuses for mon français too, if I’ve done that wrong..


Conclusion

Get smart, there is no excuse for using dumb quotes!


Further Resources

Advertisement