Written by Harry Roberts on CSS Wizardry.
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 (
—)–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:
The em dash (–), or m dash, m-rule, etc., often demarcates a parenthetical thought–like this one–or some similar interpolation.
The em dash (—), or m dash, m-rule, etc., often demarcates a parenthetical thought - like this one - or some similar interpolation.
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 (
–)–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:
Read more specific guidelines on Wikipedia.
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.
There is also a separate dash for the minus symbol. The proper entity for a minus symbol is simply
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.
Hi there, I’m Harry. I am an award-winning Consultant Front-end Architect, designer, developer, writer and speaker from the UK. I write, tweet, speak and share code about authoring and scaling CSS for big websites. You can hire me.
I am available for hire to consult, advise, and develop with passionate product teams across the globe.
I specialise in large, product-based projects where performance and CSS scalability and maintainability are paramount.