Punctuation can be a real pain in the #—if you know what I mean. Sure, you’re familiar with an apostrophe, a quotation mark (known in the print world as the “ditto mark” due to its lack of proper curly quotes)—hey, maybe you even know proper semi-colon use (if you do you’re better than me). But can you tell me what an “-” is? If you said a dash, you are wrong. If you said a hyphen… you’re kinda wrong actually. That is a hyphen-minus, a strange chimera created in the computer underworld to haunt print designers. Truth is, there are at least 8 dashes/hyphens provided in HTML 4.0, each with a different use, and misused every single day.
Today I’m going to walk you through some basic dash and hyphen usage.
Why should you care?
If you’re setting up an email newsletter or a website why should you bother with more esoteric punctuation? Well, many times you shouldn’t. If your viewers are pet owners looking for all natural herbal supplements, there is a good chance that you don’t need to bother with this. But if you’re some one like Smashing Magazine—which is supposed to appeal to web and print designers—then one might expect you to avoid triple periods in place of ellipses, hyphens in place of n-dashes, and ditto marks. (hey, no one’s perfect, right?)
Here is a quick reference:
| — | — or | em dash | parenthetical statements, linked clauses, vague dates, interruption, removed letters |
| – | – or | en dash | date ranges, in place of the word “to”, compound hyphenation, joint authors (sometimes) |
| − | − | Minus Sign | mathematical symbol |
| ‒ | ‒, use of the hyphen-minus is often acceptable | hyphen | hyphenation |
Edit: Last night I didn’t notice that I had mis typed this table. The hyphen-minus is considered an acceptable replacement for the hyphen, not the minus.
Your best bet when using any of these is to use the decimal code. While modern browsers all accept shorthand such as —, is does not have the same assurance of cross platform compatibility.
The Em Dash
An em is a letter. The length of that letter designates an em space, and the length of an em dash. Sadly over the years many fonts have decided to shrink the width of an m (thank you Unicode) and now an em dash is frequently longer than the em, resulting in people using em as a unit of measurement.
The em dash is used as an interruption to a clause—like so—which imparts parenthetical information. Why not use parentheses? An em dash can be thought of as an interruption in mid sentence to add data, while a parenthesis would be used as a softer interruption used to further explain data. For instance, Celsius to featherweight conversions would go into parenthesis, while adding a comment about the heat might go in em dashes.
There is some debate over the use of spaces around an em dash. Sometimes a hair space is used at either side of the em dash—contrary to the spaceless old English and American typography styles. German style replaces the em dash with an en dash and uses spaces on either side, though in my opinion this looks worse.
Em dashes can also be used between two conjoining clauses in a manner similar to a colon, or as an interruption of thought at the end of a sentence. In this case you use a single em dash.
Finally two em dashes concurrently can be used as blanks within a word. For instance, when blanking curse words.
The En Dash
An en is, you guessed it: n. Half the width of an em, making it half the length of its height—again, new fonts have changed all this. The en dash is used mainly in ranges, be them date ranges (jan–feb 2009), or descriptions of distance (the Brussels-Schipohl train).
Sometimes they are also used when combining authors names, though many style guides prefer the use of a hyphen, and no one is going to care if you just use a hyphen-minus
Finally the en dash is used with the mythical double compound, such as “open-sourced–based browser”.
The Minus
This is used in equations, such as 7−6=1. Nothing else.
The Hyphen
This is used to hyphenate words (imagine that), or as a mid-word break to designate movement to the next line. There is also the discretionary hyphen () which will auto-insert a hypen when the word is at the end of the line, but not elsewhere, and the hyphenation point (‧) which should be used as a bullet point in an unordered list.
As a final note I would generally advice against using any of these in titles. For instance, many feed readers will replace titles with plain text, resulting in decimal codes instead of symbols, and all sorts of wacky things. They can also cause problems with systems that create URL’s from titles and are not smart enough to remove the whole sequence of characters between the ampersands (&) and the semi-colon(;).
Think you’ve got it?
Makes sense, yes? Well I have strategically placed a bunch of mis–used dashes, parenthesis, and hyphens throughout this document. If you really think you’re that good, find them and explain why they are wrong in the comments.
