Arrange a Masterclass

The three types of dash

Written by on CSS Wizardry.

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

Table of Contents
  1. The em dash —
    1. Proper em dashes:
    2. Improper hyphens:
    3. Spaces around em dashes
  2. The en dash –
  3. The hyphen
    1. The minus
  4. More reading

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.



Did this help? We can do way more!


Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.

You can now find me on Mastodon.


Suffering? Fix It Fast!

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

Learn:

I help teams achieve class-leading web performance, providing consultancy, guidance, and hands-on expertise.

I specialise in tackling complex, large-scale projects where speed, scalability, and reliability are critical to success.