There are some common typography mistakes that people make, such as substituting inch and foot marks for quotation marks and apostrophes. This is especially true on the web, because code editors and web browsers don’t automatically substitute proper quotes like many design apps do (such as InDesign). You can get proper quotes, apostrophes, and dashes by using the keyboard shortcuts below. They should work in any app, such as Sublime Text, Atom, Photoshop, InDesign, Sketch, etc.
Apostrophe vs. Foot Mark
' is a foot mark
’ is a proper apostrophe (or smart apostrophe)
Single quotes or apostrophes should be a curly or “smart” apostrophes. Only use foot marks for measurements.
- Mac: Hit Option-Shift-]
- PC: Alt 0146 (Hold Alt as you type 0146 on keypad, then release Alt)
- HTML Code: ’ or ’ (see note below)
Quotation Mark vs. Inch Mark
" is an inch mark
“ ” are proper quotes (or smart quotes)
Quotation marks should be curly or “smart” quotes. Only use inch marks for measurements.
- Mac: Hit Option-[ for left quote or Option-Shift-[ for right quote
- PC: Alt 0147 for left quote or Alt 0148 for right quote
(Hold Alt as you type the number on keypad, then release Alt) - HTML Code: (see note below)
For left quote use “ or “
For right quote use ” or ”
Endash
- is a hyphen
– is an endash (longer than a hyphen)
An endash is used to signify a “through” relationship. For example Monday through Friday would be Monday–Friday.
- Mac: Hit Option-Hyphen
- PC: Alt 0150 (Hold Alt as you type 0150 on keypad, then release Alt)
- HTML Code: – or – (see note below)
Emdash
-- two dashes are not typographically correct
— is an emdash (longer than a endash)
An emdash indicates a pause, or separates a clause in a sentence—like this—from the rest of the sentence. It is similar to a parenthetical phrases (such as this).
- Mac: Hit Option-Shift-Hyphen
- PC: Alt 0151 (Hold Alt as you type 0151 on keypad, then release Alt)
- HTML Code: — or — (see note below)
About HTML Codes (Character Entities)
While the HTML Codes given above do work—and may be needed in some instances—it’s typically best to use unicode instead. The advantage of unicode is that you can add the special characters directly into HTML code without these codes, and unicode supports multiple langauges in a single file. That makes unicode the ideal solution. Add <meta charset="UTF-8"> at the start of the <head> in your HTML file, and you can skip these codes and simply type the special characters directly into the HTML code, making it much easier to read!