---
comments: true
date: 2010-01-30 17:07:43
layout: post
slug: the-three-types-of-dash
title: The three types of dash
wordpress_id: 477
categories:
- Typography
---

Unbeknown to many, there are <del>three main</del> 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 <del>three</del> 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 &mdash;

The em dash (`&mdash;`)--so named because it is the width of a capital
‘M’&mdash;is used to delimit a separate clause in a sentence&mdash;rather like
this&mdash;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 (&mdash;), 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 (`&#8202;`) either side&#8202;&mdash;&#8202;like this.
However, IE6 doesn’t support the hair space leaving the options of either fully
spaced &mdash; like this, or unspaced&mdash;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 &ndash;

The en dash (`&ndash;`)--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&ndash;10 years
* July 10&ndash;August 1 2009
* pp. 40&ndash;42
* §§ 12&ndash;13

Read [more specific guidelines](http://en.wikipedia.org/wiki/Dash#En_dash) 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 `&minus;`.

## More reading

A reader of the old CSS Wizardry left me with a link to [one of his own articles](http://garyjones.co.uk/development/hyphens) covering a few _further_ variations of each.

  *[§§]: sections
  *[pp.]: pages
  *[IE6]: Internet Explorer 6