Start Using Quotation Marks the “Correct” Way

Quick Quotation 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”:

That applies to both double and single quotation marks.

And even apostrophes:

“Curly quotes are the quotation marks used in good typography.” – typographyforlawyers.com

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.

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.

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 on my Mac OS English keyboard, I’m using the awkward:

When writing HTML, if your document is using charset utf-8

1

<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:

Quotes in CSS

We can use the quotes property in CSS to make sure our <q> 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

With escaped unicode values (mentioned in the table earlier) it might look a bit like this:

1

q {

2

    quotes: "\201C" "\201D" "\2018" "\2019";

3

}

Or this, if you prefer to see what you’re doing more clearly:

1

q {

2

    quotes: '“' '”' "‘" "’";

3

}

Interestingly, the CSS quotes property won’t have any effect on <blockquote> (though I’m sure it used to?).

We’re using different values 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.

Directly Controlling the Pseudo Elements

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. This even applies to the <blockquote> tag, which browsers display with no quotation marks by default.

1

q:before,

2

blockquote:before {

3

    content: open-quote;

4

}

5

q:after,

6

blockquote:after {

7

    content: no-close-quote;

8

}

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.

Conclusion

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

Further Resources

• Inline quotations on html5doctor.com
• Straight and curly quotes on typographyforlawyers.com
• quotesandaccents.com
• Technical Web Typography: Guidelines and Techniques by Harry Roberts
• International variation in quotation marks on Wikipedia
• Smart Quotes for Smart People