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-] | ’ | 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 Alt 0148 |
Option-[ Option-Shift-[ |
“ ” |
Quotation marks should be curly or “smart” quotes. Only use inch marks for measurements. |
| hyphen - |
endash – |
Alt 0150 |
Option-Hyphen | – | 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 |
— | 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!
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
Upcoming Free Seminars
See Complete List