Win a Free Class!

Join our email list for a chance to win

Typography Rules

A common mistake is substituting inch and foot marks for quotation marks and apostrophes. This is especially true on the web as browsers don’t automatically substitute proper quotes like many design apps—such as InDesign—do automatically for you. But you can get proper quotes, apostrophes and dashes quite easily, just use the keyboard shortcuts listed below. They should work in any app such as Dreamweaver, Flash, Fireworks, Photoshop, etc.

IMPORTANT: Character Entities (Codes) vs Unicode

While the HTML codes continue to 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. Be sure to use a unicode complient text editor (most are nowawdays) and add <meta charset="UTF-8"> into the <head> of your page. Then you can skip these codes and simply type the special characters directly into the HTML code, making the code much easier to read!

Common Mistake Correct PC Keystroke

Hold Alt, type #s on keypad, release Alt

Mac Keystroke HTML Code Explanation
foot mark
(or dumb apostrophe)

'
smart apostrophe


Alt 0146 Option-Shift-] &#8217; Single quotes or apostrophes should be a curly or “smart” apostrophe. Only use foot marks for measurements.
inch marks
(or dumb quotes)

" "
smart quotation


“ ”

Alt 0147
(left quote)

Alt 0148
(right quote)

Option-[
(left quote)

Option-Shift-[
(right quote)

&#8220;
(left)

&#8221;
(right)

Quotation marks should be curly or “smart” quotes. Only use inch marks for measurements.
hyphen

-
endash

Alt 0150

Option-Hyphen &#8211; The endash is used to signify a “through” relationship. For example Monday through Friday would be Monday–Friday.
two dashes

- -
emdash

Alt 0151

Option-Shift-
Hyphen
&#8212; The 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).

Were they as good for you as they were for us? Oh Yeah!

Other Guides:
Quick Guide to HTML
HTML Special Characters

We Literally Wrote the Book!

Dreamweaver Workbook

To make the perfect class we had to write our own workbooks which are included with each class.

Can’t take a class? Our workbooks are the next best thing.

Buy Workbook

Want More Tips & Tricks?

Sign up for our Newsletter and get good stuff straight in your mailbox!