Those Dumb Quotes

What if there were a way to instantly improve your UI design with almost no effort on your part?

Your users and coworkers won’t be able to tell what you changed: when it’s done right, it’s invisible. But when it’s done wrong, it makes everything feel a little bit unfinished.

I’m speaking of typographic details in your user interface design: the use of quotation marks, apostrophes, and dashes.

Using the right — or wrong — typographic marks in your UI has a real impact on how your product is perceived.

These typographic details aren’t just the domain of UI designers. As a developer, product manager, copywriter, or any other member of the product team, you can learn when and how to use the right typographic symbols at the right time.

Let’s focus on when and how to use the two “big small details” of typography: quotation marks & apostrophes, and dashes.


Using Quotation Marks & Apostrophes

A Bit of Background: It’s Mostly the Fault of Dumb Quotes

Dumb quotes are artifacts left over from typewriters.

Photo: Lane Pearman

To save space and simplify the keyboard, typewriters mashed together a series of similar characters into simple vertical symbols that we now call dumb quotes: " and '.

While this was economical — a single key could now be used to represent a range of characters — these dumb quotes carried over to our keyboards today, and they’re frequently used in place of the proper symbols.

While software will usually automatically replace dumb quotes with the correct typographic symbols based on context, we’re at a disadvantage as developers: we use single and double dumb quotes as part of the programming or markup language, and as such, our development environments won’t replace these symbols.

Because of this, we have to make a conscious effort to identify and use the right typographic details at the right time.

When to use dumb quotes: Use dumb quotes within monospaced code.

const warning = "Do not find/replace dumb quotes in your codebase.";

Apostrophes

Dumb quotes are most frequently found masquerading as apostrophes in user interfaces.

When to use apostrophes: Use apostrophes to indicate possessives or abbreviations.

The Philosopher’s Stone by J.K. Rowling

HTML Entity

Apostrophe – ’


Single and Double Quotation Marks

Single and double quotation marks are designed to stylistically open and close the quoted content.

When to use single and double quotation marks: Use single and double quotation marks for indicating quotations and speech. Never use for emphasis. It just looks suspicious.

The Hobbit by J.R.R. Tolkein

HTML Entities

Opening quotation mark – “
Closing quotation mark – ”
Single opening quotation mark – ‘
Single closing quotation mark – ’

Bonus: is your UI available in French? Quotation marks are replaced not by double “less than” << or “greater than” >> signs, but « guillemets ».

The Hobbit by J.R.R. Tolkein

HTML Entities

Left-pointing guillemet – &laquo;
Right-pointing guillement – &raquo;
Left-pointing single guillement – &lsaquo;
Right-pointing single guillement – &rsaquo;


Backtick, or Grave

When to use backticks or graves: Only within monospaced code. Never use these to replace apostrophes. It gives me a stomachache.

const example = `Backticks or graves are ${okay} here.`;
Don`t use backticks or graves as a replacement for apostrophes, as in this sentence.

Prime and Double Prime

When to use Primes and Double Primes: To indicate feet and inches, as we would while sharing that Patrik Laine of the Winnipeg Jets is 6′5″.

HTML Entities

Prime – &prime;
Double prime – &Prime;


Using Dashes

Unlike quotation marks — where dumb quotes need to be replaced by a specific, correct typographic mark — using the correct dash is more about typographic style, legibility, and convention.

Well-selected dashes make it easier to read and understand copy, while also providing a level of polish to an interface design.

There are three primary kinds of dashes: the hyphen (-), the en dash (–), and the em dash ( — ).


Hyphens (-)

Hyphens are the default dash on your keyboard. However, they’re best used for only a limited set of purposes.

When to use hyphens: Use for compound words, such as “so-called.” Also used to separate digits in phone numbers and addresses, like 295-5542 or 200-171 McDermot Ave.

Catch-22 by Joseph Heller

En Dashes (–)

So-called because they’re the width of an “n” in their typeface.

When to use en dashes: Use between digits (with no surrounding spaces) to indicate a range, such as April 1–10, or $10–50.

HTML Entity

En dash – &ndash;

To type with a Mac Keyboard: Option+-


Em Dashes ( — )

So-called because they’re the width of an “m” in their typeface.

When to use em dashes: Use to separate thoughts and ideas — such as these — in a sentence. Don’t use spaces around an em dash. As well, em dashes can be used to indicate a thought cut off, as if it were interrupted before —

The Case Against Reading Everything by Jason Guriel

HTML Entity

Em dash – &mdash;

To type with a Mac Keyboard: Option+Shift+-


Go forth and typophate.


Thanks for hitting the 👏 if you enjoyed this article! It’ll tell me to write more things like this. Real-time user feedback.

Quinn Keast is a UX Designer + Partner at Caribou, a user experience strategy and design consultancy in Winnipeg.