1. Web Design
  2. UX/UI
  3. Web Typography

Start Using Quotation Marks the “Correct” Way

Scroll to top
Read Time: 4 min

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

curly double quotation markscurly double quotation markscurly double quotation marks

That applies to both double and single quotation marks.

curly single quotation markscurly single quotation markscurly single quotation marks

And even apostrophes:

example of a correct apostropheexample of a correct apostropheexample of a correct apostrophe

“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.

straight double, or dumb quotesstraight double, or dumb quotesstraight double, or dumb quotes
straight single, or single dumb quotesstraight single, or single dumb quotesstraight single, or single 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.

example of primesexample of primesexample of primes

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:

glyph keyboard shortcut

alt + [

alt + shift + [

alt + ]

alt + shift + ]

When writing HTML, 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> 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:

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

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

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

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.

These quotation marks are slotted in using pseudo elements.

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.

blockquote:before {
    content: open-quote;
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 all languages display quotation marks in the same way, however. Take a look at what French uses, for example.

the french use different characters to mark their quotes (citer)the french use different characters to mark their quotes (citer)the french use different characters to mark their quotes (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 element of choice to be specific.

<q lang="fr">Je comprends, et c'est un super chapeau</q>
q:lang(fr) {
    quotes: "«" "»" "‹" "›";

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

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.