The Rights and Wrongs in Typesetting

My Obsession With Details

I’m a type-nerd. There, I said it. Whenever I look at a text or logo I’ll try to recognise the typeface. I’m annoyed by improper kerning (a.k.a. keming) and every time I read a text I check if the right characters are used. In this blogpost I’ll show you some examples of the rights and wrongs in typesetting.

Quotation marks

The most common mistake I see is the use of dumb quotes a.k.a. straight quotes. For example: this is ＂wrong＂. This is “right”. See the curly quotes? Here’s a bigger example:

＂straight quotes＂ → wrong

“Smart” quotes are better than “dumb” quotes.

“curly quotes” → right!

The reason so many people use straight quotes is because of the keyboards we’re using. There are only straight quotes on them, but don’t worry: there are several ways to use the curly ones.

If you’re on a Mac you can use these shortcuts:

“ → option + [
” → option + shift
‘ → option + ]
’ → option + shift + ]

It takes a little getting used to it, but your texts will look so much better.

If you’re on a Windows PC you can use these shortcuts:

“ → alt + 0147
” → alt + 0148
‘ → alt + 0145
’ → alt + 0146

Some word-processors — like Microsoft Word, Google Docs or Medium.com — automatically format straight quotes to curly quotes, a technique referred to by Microsoft as smart-quotes.

Tip: on your iPhone you can press-hold the ‘ and “ character on your keyboard to get access to the curly quotes.

Should I always use curly quotes?

No. When you want to use a symbol for feet & inches or latitude & longitude most of the times straight quotes are used, but officially you should use a prime (′ & ″). And when you’re coding you should use straight quotes as well.

Ellipsis

So you want to pause at the end of a sentence… don’t just type three dots (or more) but use the ellipsis…

…

If you’re on a Mac you can use this shortcut:

… → option + ;

Tip: in css you can use “text-overflow: ellipsis;” to cut-off overflowing text using an ellipsis, especially handy in responsive web design.

Mathematical Symbols

When you’re using a multiply-symbol, never use x. Never. There’s a glyph for that: ×

3 x 4 → wrong
3 × 4 → right!

Some other math-symbols to consider using in texts: ± ½ ~ ≈ ÷ ≠ π

Also, there is a minus sign (−) that you should use, instead of the standard dash (-), which brings us to:

Dashes & hyphens

Dashes — not to be confused with the hyphen — come in different sizes. The most common used are the en dash and em dash. Some general “rules”:

When should I use a hyphen (-)?
Use a hyphen (-) when joining words, like type-nerd.

When should I use an en dash (–)?
Use the en dash in a range (december 24–25) or when pausing in a sentence — like I did just now.

When should I use an em dash ( — )?
Use the em dash when sourcing a quote, like I did at the end of this blogpost.

When should I use a minus sign (−)?
Use the minus sign for mathematics, see more details on Wikipedia.

Tip: In html you can use the soft-hyphen (­­­) to make long words break only when they don’t fit their container. Really handy if your into that Responsive Webdesign thing.

In conclusion

I’ve only scratched the surface of the details of typesetting. If you’re interested there are lots of other tips available online or in books. I hope this blogpost will help you or at least it’ll make you aware of the beauty of details.

“The details are not the details.
They make the design.” — Charles Eames

Resources & links

http://quotesandaccents.com/
http://smartquotesforsmartpeople.com/
http://www.chicagomanualofstyle.org/
http://www.typogui.de/
http://www.typewolf.com/cheatsheet

Go to copypastecharacter.com to — you guessed it — copy and paste characters like these: ☃☺❤✌☞✎★