12 January 2017

The Atlantic: “Typography Wars: Has the Internet killed Curly Quotes?”

Many aspects of website design have improved to the point that nuances and flourishes formerly reserved for the printed page are feasible and pleasing. But there’s a seemingly contrary motion afoot with quotation marks: At an increasing number of publications, they’ve been ironed straight. This may stem from a lack of awareness on the part of website designers or from the difficulty in a content-management system (CMS) getting the curl direction correct every time. It may also be that curly quotes’ time has come and gone.


Maybe periodicals, which sometimes commission typefaces or pay to adapt existing ones, will demand type designers draw better-looking, harmonious straight quotes that don’t seem pulled from typewriter typebars. Paul Ford is just plain resigned: They sure do look nicer to old people like you and me, but frankly do they actually add any magical semantic value to a given text? Not really.

Glenn Fleishman

Incredibly enough, there is a way to get both semantic value and proper quotes on the web: by using the correct HTML element, <q>. Modern browsers automatically enclose <q> elements in quotes, making sure to alternate glyphs for nested quotes as well. If you specify the quotation language inline (like this: <q lang="fr">) or in a parent element, you even get the proper set of quotes for that language, be it French, Spanish or even Polish!

In case you need to add curly quotes to other HTML elements, this is also easy enough: using pseudo-elements you only need to add two extra declarations in the site’s CSS file. On my blog for example I use quotes to emphasize book titles with this CSS code:

.booktitle:before { content: open-quote; }
.booktitle:after { content: close-quote; }

Frankly, a bit disappointed that such an authoritative source as CSS Tricks hasn’t mentioned this at all in the reaction to this article, instead dismissing it with a simple shrug.

And, if you don’t feel like doing this manually, there are always plugins to automatically convert straight quotes to curly. So the right answer to the question in the title can only be: it’s laziness that killed curly quotes.

Post a Comment