web typography study guide

Dashes

The dash from the keyboard, like the quotation mark, is another catch-all character that poorly represents the range of properly styled dashes. There are three main types of dash: the em dash, the en dash, and the hyphen.

em dash

—, HTML code —, is the width of a lowercase “m”(1em). It denotes an interruption in speed—like this. Em dashes usually are set without spaces on either side.

en dash

–, HTML code –, is traditionally longer than a hyphen and half the width of an em dash. It indicates ranges of values, as in “pages 32–35,” and connections between terms, as in “New York–Boston train.”

hyphen

The hyphen ties together compound words. A hard hyphen joins words, as in “mixed-media,” or sets of digits, as in phone numbers.

A soft hyphen appears at the end of a line of text to indicate that a word continues on the next line. It usually appears with justified alignment settings. If the entire word ends up being written on one line, then the hyphen should disappear. On the web, the soft hyphen isn’t much of a concern because browsers do not yet have standard hyphenation controls.