The three types of dash

Written by Harry Roberts on CSS Wizardry.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

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.

			Various means of spacing em dashes

					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.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

By Harry Roberts

Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.