Unbeknown to many, there are three main many types of dash, and one of the most common typographical mistakes is to use the wrong dash for the wrong job. There are actually three several different types of dash and each have their own uses. The ‘dash’ you see on your keyboard is actually a hyphen which is used as a ‘catch all’ glyph which is used for several purposes. The only reason for this is that there’s just not enough room on a keyboard for so many different dashes.
The em dash —
The em dash (—)—so named because it is the width of a capital ‘M’—is used to delimit a separate clause in a sentence—rather like this—or similar sub-clause structures. Often used in its place however is the hyphen (-). Looking at the two side by side the difference is quite clear:
Proper em dashes:
The em dash (—), or m dash, m-rule, etc., often demarcates a parenthetical thought—like this one—or some similar interpolation.
Improper hyphens:
The em dash (—), or m dash, m-rule, etc., often demarcates a parenthetical thought – like this one – or some similar interpolation.
Spaces around em dashes
The proper setting of em dashes seems somewhat unclear. The ideal way to set them is with hair spaces ( ) either side — like this. However, IE6 doesn’t support the hair space leaving the options of either fully spaced — like this, or unspaced—like this.
| Fully Spaced | Hair Spaced | Un Spaced |
|---|---|---|
| This — is an em — dash. | This — is an em — dash. | This—is an em—dash. |
The en dash –
The en dash (–)—so named because it is half the width of a capital ‘M’ (an ‘n’)—has altogether different uses to the em dash. The en dash is used in ranges, for example:
- 6 – 10 years
- July 10 – August 1 2009
- pp. 40–42
- §§ 12–13
Read more specific guidelines on Wikipedia.
The hyphen
The purpose of the hyphen (-) is to join two words—for example ‘front-end’—and to separate syllables when splitting a long word over two lines. As previously mentioned, the hyphen is often misused in place of both the above.
The minus
There is also a separate dash for the minus symbol. The proper entity for a minus symbol is simply −.
More reading
A reader of the old CSS Wizardry left me with a link to one of his own articles covering a few further variations of each.
By Harry Roberts on Saturday, January 30th, 2010 in Typography. | 1 Comment »
+
The three types of dash — CSS Wizardry—CSS, Web Standards … | Drakz Free Online Service said on 30 January, 2010 at 10:32 pm
[...] here: The three types of dash — CSS Wizardry—CSS, Web Standards … Share and [...]