February 6th, 2006
Five Simple Steps to Typesetting on the web: Dashes
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
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
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.
- 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–)*.
- The en dash can be used to show the meaning of to and from. Eg. on–off switch.
- 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.
- 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
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:
- 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.
- It can also be used either side of an interruption—like this one—and is set closed up.
- 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.
Treading the fine line between typesetting and copywriting here. Which I think is a good thing. As a designer/typesetter/jack-of-all-trades, I have found the time spent learning proper grammar and style has been invaluable.
Punctuation and other typographic marks are often neglected in web design but they are there to create landmarks and give direction to the reader.
When you consider how bad most copy provided to web designers is?from a viewpoint of on-screen use?it is a real strength if web designers are able to edit, repunctuate and if need be rewritecopy for our medium.
Hopefully these articles will encourage people to look at the words a little more closely.
Mark refers to The Oxford Guide to Style, if you’re based in the UK this is a must have, if you’re in the US look at the Chicago Manual. Alongside these it is well worth looking at ?The Elements of Style? by Strunck & White and ?The Elements of Typographic Style? by Robert Bringhurst. All excellent, all eye-opening, all essential reading.
There’s a good article on A List Apart on this subject that I’d recommend alongside what’s already been written here: The Trouble With EM ‘n EN (and Other Shady Characters)
Soft hyphens could be useful if you’re writing long words in narrow places, but sadly browser support isn’t quite there yet.
“Treading the fine line between typesetting and copywriting here.”
That’s the trick, isn’t it? To be a good online writer, you also have to be a good editor and typographer. Magazine and book writers rely on others to know such details, so self-publishing online requires quite a bit more knowledge.
For those that want a punctuation geek’s laugh at these matters while still managing to learn and remember all these rules I can’t recommend Lynne Truss’ book, Eats, Shoots & Leaves highly enough.
Handily, she’s a Brit so the book is good for those folk but the US edition covers both styles.
Lastly, while I do my level best to remember and properly implement all of these rules—and many more—when I writeit’s good to remember that the English language is one of the most malleable of the world’s languages and that, more than likely, with the passage of time and dying away of sticklers many of our favorite grammar and typographic conventions will go the way of the dodo.
Of course, knowing that anyone reading this is of a stickler nature I’m potentially embarrased by the number of mistakes I made above. Such is life.
How those entities appear on various browers using different ISO codings is very problematic. Ditto for transfering such characters from PDF documents to other applications.
Appendix F, Character Entities, contains a complete table of other obscure HTML codes [in J. Niederst, WEB DESIGN in a NUTSHELL, second edition, see esp. p. 583].
Also, using a double hypen, instead of em, in some wikis, may cause the “strike out” of words.
Helpful places are newspaper Style Guides too:
Guardian Style Guide
Times Style Guide
Good to see some thought going into printing off the web. Interesting stuff.
I think you forgot an en dash, Phil. :)
Where? I know I missed putting commas around a clause. Typing too fast. :)
“In British and North American typesetting there are a few simple rules: […] 2. It can also be used either side of an interruption?like this one?and is set closed up.”
I think it’s false to call the closing-up a rule since, as you say later on, it varies enormously across British and US house styles. Last night I put it to the test by looking at around a dozen books from mainstream publishers (Penguin, Virago, Faber, Random House) taken randomly from my bookshelves. The vast majority put spaces ? like this ? around the interruption dashes.
In my straw poll, the only two books I found which followed the Oxford style guide’s rule on closing up were Ellmann’s biography of James Joyce and Virginia Woolf’s Mrs Dalloway. Both were, unsurprisingly, published by Oxford University Press.
All the others I looked at put spaces around the dashes, apart from Sterne’s Tristram Shandy (Penguin) and Pynchon’s Gravity’s Rainbow (Virago), which have their own rather crazy idiosyncrasies. These were post/modernist works which took, shall we say, a relaxed view towards literary rules. The Sterne book???notably???used what looked to me like ememem dashes!
While consistent style is clearly valuable within a publication or publishing house, I’d be wary of aligning oneself too closely to the dogma of another ? even a well-respected source such as the Oxford rules ? particularly when it’s rejected by the vast majority of other book and newspaper publishers (including the Guardian and Times, mentioned above). The fact that one authority uses a mode doesn’t make it a rule.
Good point Joe. I noticed this last night on going through some early Penguin books, some of which dated to the early sixties.
Like you say, consistent style is perhaps more important.
The problem is that many of the style guides out there are press specific and, as such, have their own industry quirks. The OUP style guide is, at the very least, far-reaching and applicable to many situations. Penguin do a series of style guides and writers manuals but none to the same degree of depth.
Internal consistency is key, which is why these things are called house styles. You should be dogmatic, just be consistent with your dogma. :)
Else, it will just piss all over the place.
You seem to have omitted the following: A throwback to the days of typewriters, two hyphens–like these–were used to make a dash because true dash characters are not available on a typewriter. But this is a major no-no in typesetting and desktop publishing, where em dashes?like these?should be used instead. An em is a unit of measure equal to the point size you are using. For example, using 10-point type, an em dash would be approximately 10 points (approx. 0.14 inches) wide, but this is dependent on the individual typeface. Actually, this is probably the widest it would be. Many typefaces have em dashes that are slightly narrower than a full em, but still considerably wider than a hyphen.
Hyphens are used to hyphenate words and separate phone numbers. They should never be used as dashes. A dash, more specifically, an em dash, is a form of punctuation used to offset clauses in a sentence.
An en dash is typically half the length of an em dash (sometimes slightly wider than half, depending on the typeface) but still longer than a hyphen. En dashes are primarily used to denote duration, as in 8:00?5:00, or August 12?14, or Aardvark?Adelaide. Some people use them to separate phone numbers, but I think they are too large and look awkward for this.
The period is preferable to the space, but this is purely a matter of personal taste. Phone numbers separated by spaces are quite common in Europe, less so in the U.S.
When creating em and en dashes, you can add space before and after the dash, or not. I prefer to add either a small amount of space (usually via the application?s kerning commands), or no space at all. Page layout programs such as Adobe PageMaker and QuarkXPress let you adjust space between characters at a micro level (i.e., kerning), as do illustration programs such as Illustrator and FreeHand, but many word processors are limited in this regard and only allow you to add space via the Space Bar. The normal space created with the Space Bar seems a bit too wide for my tastes, but you may find it acceptable. Generally speaking, the wider the column of text, the more space you can insert before and after dashes (up to a full space). In a typical word processed documentsuch as a memo or letter, for example, where your column width might be as great as 5 or 6 inches, inserting a normal space before and after a dash looks just fine. But in a documentwith narrower columns, say a newsletter with three columns of text, this much space will stand out, and your dashes will resemble diving boards. In this case, I would suggest adding no space at all, and simply use the program?s kerning commands (if available) to tweak the space as necessary.
In PageMaker, press the Cmd key in conjunction with the Left and Right Arrow keys to decrease and increase kerning (the amount of space between characters) respectively. Hold down the Shift and Cmd keys if you want to increase or decrease kerning in smaller units. In QuarkXPress, press Cmd-Shift in conjunction with the Left and Right Bracket keys to kern text. Hold down the Cmd, Shift, and Option keys if you want to kern in smaller units. In PageMaker, a value of about 0.1 should suffice; in QuarkXPress, consider a value of about 20 before and after a dash.
If you do add a full space by pressing the Space Bar, it is important to add it before and after the dash. Sometimes people will add a space after a dash to break a line. Then, if they edit the text or change the layout, the dash with a space after it but no space before will appear rather awkward looking.
To create an em dash in most Mac applications, press Shift-Option-hyphen. To create an en dash, press Option-hyphen.
To create an em dash in most Windows applications, press Alt-0151. To create an en dash, press Alt-0150.
Some expert font sets contain a three-quarter em dash, but in reality, most em dashes are about this wide anyway. That is, most em dashes are not one em in width, and depend on the individual typeface. The three-quarter em dash can be substituted for the em dash. The two are interchangeable. But it is too wide to be used when you would normally use an en dash.
It is also acceptable to use an en dash instead of an em dash to set off clauses in text. I don?t like the practice, but it?s not incorrect to do so. If you do substitute en dashes, consider adding space before and after them.
Keep up the good work —-
Hugh: I really don’t know where to start. What a great comment. I’ll be sure to update the article with some of these thoughts.
There are quite a few different dashes, such as the figure dash for example, which I purposefully left out of this article because, well, it would become very complicated, very quickly.
You raised some really interesting points though.
I became far more aware of the en dash and em dash, and their proper use, when I began using LaTeX, which parses two dashes (–) as an en dash and three (—) as as em dash.
I agree with Paul Haine that the article on A List Apart is another fine resource. Your article is nice and easy to digest, I think in large part due to the rulemark gifs that quickly and clearly identify the content of each section. Great use of visuals.
Two gripes I have regarding the way web browsers handle these dandy punctuation marks: first, it’s a shame firefox still doesn’t recognize the soft hyphen ()?really, it’s a shame that no browsers have the ability to break words between syllables the way a decent text processor can; second, in a number of browser fonts, including the ones this page displays in on both firefox and ie, one can barely distinguish between the hyphen and the en dash?if anything, the hyphen is actually wider.
There should be a ‘­’ between the parentheses above following ‘soft hyphen.’ Sorry, the preview doesn’t seem to be working for me and I didn’t know that the ‘­’ would be translated.
Thank you so much for posting some typesetting tips– so hard to find on the web!
I like to pull my favourite Bringhurst quote when this discussion comes up:
The web being my native design medium, I did some experimenting with browser support for various dashes and spaces. I hope this is useful to someone.
This is all well and good but the problem is that many people are to lazy to fix up their grammer on their sentances, like this one way to long!
Also their are some content managment systems which convert these automatically but I honestly couldn’t remember all the html code for them, and I simply am to lazy to bother.
Thanks Mark! I learned a lot from your original post and from the comments here — and I kind of thought I knew everything already. Two comments:
First, it’s perhaps wrong to say that there’s little use for the soft hyphen. I’d be very keen to use a soft-hyphen along with smart, automated hyphenation in a Web browser to achieve aesthetically pleasing right-rag effects with bodies of type. That’s something that has been lost entirely online.
Second, I think Hugh really outlines the use of the em dash very well; my personal taste is that an em dash deserves a space before and after, especially in browsers, in order to avoid effectively joining two long words together with an extra long dash and causing egregiously awkward right-rag effects. That said, I wish I could specify a shorter distance than a full space, as that amount does look odd. But it’s an acceptable compromise, at least for now.
You can use a thin space on both sides of an em-dash to avoid linking the words and so you can allow them to wrap better. This could also be a solution to open em or en dashes that cause wide open spaces in narrow columns.
The character entity is shown on the HTML 4 reference at W3C site: <blockquote title=“W3C”><!ENTITY thinsp CDATA “ ”—thin space, U+2009 ISOpub –></blockquote>http://www.w3.org/TR/1999/REC-html401-19991224/sgml/entities.html#h-24.4.1
This is right under the entry for em and en spaces.
It worked on FireFox 1.5.0.1 but I’ve not tried any other browser.
erm blockquote errors not sure if that was me or the software — the “live preview” is not working and there’s no backup!
quoted:
ok looks like I need to remove encode it as some characters that seem to slip though the commenting sytem’s net!
quoted: