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.
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.
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.
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 ».
HTML Entities
Left-pointing guillemet – «
Right-pointing guillement – »
Left-pointing single guillement – ‹
Right-pointing single guillement – ›
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 – ′
Double 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.
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 – –
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 —
HTML Entity
Em dash – —
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.
