[Content]
Punctuation and Glyphs
When it comes to typography on the web, there seens to be very little proper use or variation of particular glyphs and punctuation marks. For example, an abundant use of three periods (...) for an ellipsis instead of … (…), or - in place of — (—).
As such I have decided to devise a table of glyphs, their uses and common misuses and their HTML entities to allow web developers to add some style and correctness to their typography.
The table
| Name | Entity | Output | Description | |
|---|---|---|---|---|
| Dashes | Em Dash |
—
|
— | Dash used to separate clauses within a sentence. |
| En Dash |
–
|
– | Dash used to denote definite ranges. | |
| Hyphen | n/a | - | Used to join words and separate syllables in split words*. | |
| Quotes & Primes | Left / Right Single Quotes |
‘ / ’
|
‘ / ’ | Single book/curly quote pairs. |
| Left / Right Double Quotes |
“ / ”
|
“ / ” | Double book/curly quote pairs. | |
| Primes |
′ / ″
|
′ / ″ | Single and double prime marks. | |
| Keyboard quote marks |
n/a / "
|
' / " | The quote marks on keyboards which are intended to encompass all types of quote†. | |
| Spaces‡ | Hair Space |
 
|
] [ | Small space used either side of an em dash (doesn’t work in IE6). |
| Misc | Ellipsis |
…
|
… | The correct way to display type ommission. |
| Ampersand |
&
|
& | Short for ‘and’, not to be used in body copy. | |
| Maths | Solidus |
⁄
|
⁄ | The proper entity for displaying fractions (1⁄2), preferred over a forward slash. |
| Times |
×
|
× | The correct entity for denoting multiplication (250px×500px). | |
| Minus |
−
|
− | The correct entity for denoting subtraction. |
Notes
*When keyboards were first invented, space was a major issue — there would’t be enough room to accomodate all the different types of typographical dash, so it was decided that one would encompass all others. This is the - (near your zero key). This generic dash was adapted leading to the ‘typewriter em dash’, simply a double dash: --.
†In the same way as there wasn’t enough room for all varieties of dash, there was limited space for quote marks. There are single and double primes, single and double book quotes and single and double straight quotes — six dashes in total. The ' and " on you keyboard are straight quotes, not primes — a mistake I have made myself in the past.
‡For an excellent roundup on various types of space, see Jon Tangerine’s Spaces Test Suite.
Web Design+
Typogridphy
Clecktionary