The Personal Disquiet of

Mark Boulton

Five Simple Steps to Typesetting on the web: Dashes

– February 6th, 2006 –

{title}In this installment I’ll be talking about three dashes which are often used, but frequently misused. The Hyphen, the En Dash and the Em Dash.

The Hyphen

{title}The Hyphen, or the ‘hyphen-minus’, is what you get when you press the key next to zero (standard qwerty keyboard, well mine anyway, for all those pedants out there). It’s the shortest of the three and is often used incorrectly, I’ll look at the most common correct uses of the hyphen first before moving on to the dashes it is often used, incorrectly, to replace.

There are two types of Hyphen: The ‘soft’ hyphen and the ‘hard’ hyphen. Sometimes they are different lengths, but this depends on the typeface.

Hard hyphen.

The hard hyphen joins two words together anywhere they are positioned on the same line. For example, ‘run-of-the-mill’. It’s set closed up (which means no space either side).

Soft hyphen.

The soft hyphen indicates where a word has been split at the end of a line. Arguably, there’s very little use for the soft hyphen on the web when the user has so much control over the presentation of the type.

There are many grammatical rules associated with hyphens, which differ greatly from language to language. For British typesetting, and the English Language, I’d recommend getting yourself a copy of the Oxford Guide to Style (the old Hart’s Rules).

The En Dash or En Rule

{title}The en dash is one en in length. It’s slightly longer than a hyphen and half the width of an em dash. Em and en are typographic measures based on point size. An em is a equal to the size of the set type (eg. 12pt) and an en is half that.

  1. An en dash is used closed up in-between elements that show a range. Eg. Monday–Sunday, 1985–2005. It is also used when the end element is not known: Joe Bloggs (1984–)*.
  2. The en dash can be used to show the meaning of to and from. Eg. on–off switch.
  3. The en dash can also be used to join compound adjectives which include multiple words or hyphens already. In this case the en dash clarifies what is grouped with what. Eg. high–priority–high–pressure tasks.
  4. In Unicode, the en dash is U+2013 (decimal 8211). In HTML, the numeric forms are – and –. The HTML entity is –

The Em Dash or Em Rule

{title}The em dash, as it’s name suggests, is one em in width. The em dash is perhaps the character that has suffered most over recent years. Frequently replaced by the hyphen, or the that relic from typewriter days, the double hyphen ( — )**, I think it’s about time we give this little fella the time of day.

Once again, there are differing grammatical usages depending on language. In British and North American typesetting there are a few simple rules:

  1. Use the em dash closed up in written dialogue to indicate an interruption. Eg. ‘What a load of—’, but his words were lost on her.
  2. It can also be used either side of an interruption—like this one—and is set closed up.
  3. In Unicode, the em dash is U+2014 (decimal 8212). In HTML, the numeric forms are — and —. The HTML entity is —.

It’s worth noting that em dash usage is inconsistent, not only across languages, but also across house styles. The most common replacements are an en dash and the hyphen, both set with a space (or a hair space) either side.

* It’s common practice in North American typesetting to use an em dash for this purpose.

** The usage of this is of course valid on a typewriter where, as with most monospaced fonts, the hyphens, em and en dashes all are similar length.

I want to thank Phil Wright for his help on this article. The man knows his type.

The next steps

When does print design matter on the web? When you use a print stylesheet of course. The next three articles will document production of a print stylesheet from a print design perspective.

Grid, measure, type size and leading, orphans and widows. The lot.

Filed in: design, simple-steps, typography.

Further reading