Mind Your En And Em Dashes: Typographic Etiquette


An understanding of typographic etiquette separates the master designers from the novices. A well-trained designer can tell within moments of viewing a design whether its creator knows how to work with typography. Typographic details aren’t just inside jokes among designers. They have been built up from thousands of years of written language, and applying them holds in place long-established principles that enable typography to communicate with efficiency and beauty.

Handling these typographic details on the Web brings new challenges and restrictions that need to be considered. Below are a few rules of thumb that will have you using typography more lucidly than ever before.

Setting Body Copy

Good typography comes down to communicating information, and the basis of information is good old-fashioned body copy  –  simple blocks of text. Here are a few ways to make your blocks of text nice and clean.

Indentation or Space After a Paragraph?

When signalling the end of a paragraph and the beginning of another, you can generally either indent or insert a space between the paragraphs. Doing both is redundant and creates awkward, irregular chunks of white space.

indent vs. space after paragraph

Indent the first line of a new paragraph about 1 em (if your font size is 12px, then that would amount to 12 pixels). Indenting the opening paragraph of a new section would be redundant, because that paragraph would be the first in that page or section anyway.

Space after paragraph
A full line break of 1 em (like when you hit the “Return” key twice) is generally more than enough to signal a new paragraph. About 0.8 ems is sufficient.

flush left vs. justified type
Text set flush left (or ragged-right) creates an even texture and is easier to read. Because the Web allows for less typographic control, justified type usually creates rivers and big gaps in blocks of text.

Flush left (ragged-right)
In text set flush left, the lines will break naturally, resulting in a “ragged” right side of the column. This is generally considered easier to read because the eye can better distinguish one line from the next, because of the different line lengths. Additionally, studies have shown that readers score higher in comprehension and recall when text is flush left. Hyphenation should not be used with text that is flush left, because that would defeat the whole point of a ragged right.

Avoid justified type on the Web
Justified text is spaced out so that each line is of the same length. Because all lines have to be set at the same length, some variation in letter spacing (i.e. the space between letters), and word spacing (the space between words) is done to lengthen and shorten lines. This changes the overall texture of the body copy, making it less even.

High-end desktop publishing applications (such as Adobe InDesign) have sophisticated systems for justifying type so that it doesn’t produce “rivers” (large gaps in the text from too much word spacing). They use a combination of letter spacing, word spacing, hyphenation and glyph scaling (i.e. very slightly adjusting the width of individual letters) to produce an even texture in the body copy.

But there is no hyphenation control in CSS. Beyond JavaScript libraries that handle hyphenation1 and CSS3’s text-justify property, browsers don’t have very sophisticated measures for maintaining an even texture in blocks of text. This makes justified text on the Web highly susceptible to big holes and rivers in the body text.

Avoiding justified type on the Web is generally a good idea. At the optimal line length for reading (about 50 to 80 characters or 8 to 15 words), making lines of text all the same length, without hyphenation or subtle letter spacing, nearly always results in rivers.

One Space After a Period. Not Two.

Very few typographic debates match the intensity of whether there should be one or two spaces after a sentence.

This practice is a holdover from typographers of the Victorian era. The practice began when typewriters were introduced. Because early typewriters used monospaced fonts (meaning that the spaces between letters were always the same length), typists used two spaces to mimic the slightly wider spaces that typesetters were using after periods. Now that computers (and the fonts on them) are equipped with proportionally spaced (rather than monospaced) fonts, this practice is outdated, and it creates awkward breaks in the body text.

One space vs. Two spaces
One space after a period is plenty to signal the end of a sentence. It also keeps the text block even.

For those who are still skeptical, consider this: the beginning of a new sentence is already indicated by a period, a full space and a capital letter. Adding yet another space merely pokes a hole in the body text and interrupts the flow of reading.

The typist may wish to continue using two spaces after a period, but the typographer should not.

Use Dashes Dashingly

Most fonts are equipped with at least two dashes: an en dash (–, –, which is the width of a lowercase “n”) and an em dash (—, —, which is the width of a lowercase “m”). Don’t confuse these with the hyphen (-), which isn’t a dash at all but a punctuation mark.

Dashes: hyphen, en dash, em dash

The Hyphen

Hyphens and dashes are confused to the point that they are now used almost interchangeably by some. Some fonts, such as Adobe Garamond Pro, retain hyphens in their original form; those hyphens look more like the diagonal stroke of a calligrapher’s pen than a straight horizontal line. You’ll also often see hyphens used as a replacement for a minus sign; however, a longer character is available in some fonts for this purpose.

Although the hyphen does look quite a bit like a dash or minus sign, it is a punctuation mark. It should be used primarily to hyphenate words in justified type. On the Web, this isn’t much of a concern because, as mentioned, there is no standard hyphenation control in browsers. The hyphen should also be used in compound modifiers (such as “fine-tuned”), to join digits in phone numbers, and in a few other rare cases (covered in detail on Wikipedia2).

The En Dash and the Em Dash

In The Elements of Typographic Style – which is the unofficial bible of the modern typographer  –  Robert Bringhurst recommends that dashes in text should be the en dash flanked by two spaces. This is much less visually disruptive than using the em dash with no space—which is recommended in editorial style books such as The Chicago Manual of Style — because there is less tension between the dash and the characters on either side of it.

Why go against The Chicago Manual of Style in this case? The reason is that style manuals are concerned mostly with punctuation, not typography. An en dash surrounded by spaces achieves the same effect as an em dash with no spaces, but typographically it is less disruptive. This was a big debate between my editor and me when I was writing my book3.

The practice of using two hyphens for a dash is a holdover from the days of typewriters. Besides being visually disruptive to smooth blocks of text, it is now unnecessary with the richer character sets that are available to typographers.

The en dash is also used to indicate ranges of numbers (such as “7–10 days”), although it isn’t flanked by spaces in this case.

Use Smart Quotes, Dummy

The quotation mark that is produced when you type ” on your computer is not a true quotation mark (unless your word processing or page layout program has automatic formatting). True quotes are sometimes called “smart quotes,” and the right one must be used according to whether you are opening or closing a quotation. To open a quotation, use “ (“), and to close a quotation, use ” (”). For opening single quotes, use ‘ (‘), and for closing single quotes and apostrophes, use ’ (’). CMS’ such as WordPress usually either convert dumb quotes to smart quotes automatically or have plug-ins for the job.

Smart quotes vs. dumb quotes

Smart Quotes in Action

CNN uses dumb quotes, which look clunky and lifeless, while The New York Times uses smart quotes, which look clean and sophisticated:


Smart quotes are so sexy that their sinuous forms can be used as ornamentation, such as in this pull quote on Jason Santa Maria’s blog4, which features smart quotes only in shadow form:

smart quotes on jasonsantamaria.com

Quotation Marks Don’t Measure Up

The ” and ‘ on your keyboard are also often used to designate feet and inches (Steve Jobs is 6′ 2″). This, too, is technically incorrect. For feet, you should use ′ (′), and for inches, ″ (″). (Steve Jobs is, in fact, 6′ 2″.)

prime vs. dumb quotes

Note that many desktop publishing programs are so advanced that they automatically (and incorrectly) insert “smart” apostrophes and quotation marks in all of these situations. This can be changed in the program’s settings, but the quickest way around this is simply to copy and paste the correct mark from a “less sophisticated” text editor.

+1 For Proper Math Symbols

Sometimes in our haste, we use the wrong marks for math symbols. For example, as we learned above, a hyphen is not a minus sign (−, −). Additionally (no pun intended), neither an x nor an asterisk (*) is a multiplication symbol (×, ×).

math symbols

Proper fractions not only add elegance to typography, but are more readily recognizable. Using a slash in your fractions (1/3) is not ½ (½) as cool as using the proper vulgar fraction (as it’s called).

Certain other symbols are harder to substitute with common characters, such as when you write 98¢ (¢) and 104° F (°). You might be tempted to just type these out as “cents” and “degrees.”

There’s Always More With Ellipses

Sometimes, there’s more than meets the eye. Most of us type the ellipsis as three periods (…), but most fonts come equipped with their own character (…, …) that is slightly more spaced out. The Chicago Manual of Style would have you think that the proper ellipsis consists of periods separated by spaces (. . .), but any typographer knows that is too disruptive to body text. Some typographers prefer to set their own ellipses by using thin spaces ( ) between periods (. . .). But your judgment is best; pick the ellipsis treatment that makes your text block look most consistent (which will never be with full spaces between periods.)

Accent Marks And Other Diacritics Aren’t Passé

Sure, in the US you can work on your resume while sitting in a cafe, and it wouldn’t be much different than if you were working on your résumé in a café in France. No matter how naïve you are, sometimes using the proper diacritical mark is… critical. A diacritic is a mark placed near (usually above or below) a letter to change its sound. The most common diacritic in English is the acute (´) accent, which is used in a number of words borrowed from other languages and which is sometimes very important, such as for the sake of declaring your passion for saké.

acute vs. grave accent

The acute accent is often confused with the grave accent (`), which leans to the left and is readily available on US keyboards below the tilde (~). The grave accent is actually much less common in English than the acute accent. If you ever see one again, you might think you were having a déjà vu.

To insert an acute accent on Mac OS X, hold down Option while typing “e,” and then type the letter that you want to appear below the accent (so, if you want “é,” you’d be typing “e” twice). Play around with Option + u, i and ~, and a whole world of diacritics will open for you.

Ligatures Bring Letters Together

In the early days of printing, when type was set in lead, the lead slugs on which characters were set made it difficult to set certain character pairs close enough. For example, in the letter combination “fi,” the top terminal of the “f” stuck out so far that the letter couldn’t be set close enough to the “i” because of the dot on the “i.” Thus, many fonts (usually the classic ones, such as Adobe Garamond) have ligatures for certain pairings that actually meld the letterforms together. Some modern fonts, such as Helvetica, also have ligatures, but their effect is negligible.

Below, you can see that ligatures are needed in some fonts more than others. Notice how an “fi” ligature is more critical to clean typography in Adobe Garamond than it is in Helvetica. Because of this, different fonts come with different ligatures.

ligature vs. no ligature in Adobe Garamond vs. Helvetica

In addition to “fi,” ligatures are most commonly needed for the groupings “fl,” “ff,” “ffi” and “ffl.” Below you can see that Apple makes beautiful use of the “ffl” ligature in the type treatment of “iPod shuffle.”

iPod Shuffle ligature on Apple.com

Using Ligatures Practically

Obviously, typing in ligatures every time you need them is impractical. Even if you did, your content might not ultimately be displayed in a font that is equipped with the appropriate characters. Fortunately, plug-ins such as jQuery’s Ligature.js will automatically insert the most commonly supported ligatures where appropriate.

But, be careful: even if the proper characters are available, you might make it difficult for users to search for text on the page. Currently, Internet Explorer and WebKit-based browsers such as Chrome and Safari match ligatures to their corresponding letter pairs when the search command is used (for example, when a user searches for “fig” on the page), whereas Firefox does not.

CSS3′s font-variant-ligatures Property

CSS3’s font-variant-ligatures property displays the proper ligatures without interfering with the actual HTML code of the page, thus preserving full functionality of the search command in all browsers. In this case, while Internet Explorer, Chrome and Safari do not currently support this property, Firefox does.

So, if you apply ligatures at the content level, then your Firefox users won’t be able to use the search command for them. And if you use font-variant-ligatures, only your Firefox users will see the ligatures. Because of the spotty browser support for ligatures, ignoring ligatures altogether in the body copy would not be unreasonable. A lack of ligatures in big headlines and headings might be more obvious, though, so picking your preferred method of support there might be worthwhile.

Being Reasonable

Obviously, keeping track of and implementing some of these typographic details might seem pretty tedious. Fortunately, most Web frameworks and CMS’ have plug-ins that take care of them for you, and some of CSS3’s typography controls are at least beginning to be supported in browsers.

But as with all matters of design and production, economy comes into play. You may decide that implementing some of these details just isn’t worth the trouble. What’s important is at least knowing typographic etiquette, so that you can rely on it when it matters and make wise decisions that are appropriate for your project.

Other Resources

You may be interested in the following articles and related resources:

This post is based upon a chapter from David’s upcoming book, Design for Hackers: Reverse-Engineering Beauty8, which will be published in September 2011.



  1. 1 http://carlos.bueno.org/2010/04/sweet-justice.html
  2. 2 http://en.wikipedia.org/wiki/Hyphen
  3. 3 http://www.amazon.com/Design-Hackers-Reverse-Engineering-Beauty/dp/1119998956
  4. 4 http://jasonsantamaria.com/articles/on-good/
  5. 5 http://www.howtotype.net/
  6. 6 http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326
  7. 7 http://webtypography.net
  8. 8 http://www.amazon.com/gp/product/1119998956

↑ Back to top Tweet itShare on Facebook

David Kadavy is the author of Design for Hackers, which debuted at #18 on all of Amazon. Sign up for email updates and he’ll send you a pretty little PDF cheat sheet highlighting these typography tips.

  1. 1

    love it! great info here. keep them coming!

  2. 52

    Autohotkey can make it easy to add an em dash. Add this to your default script, and you can easily add em dashes by pressing Ctrl+Alt+[hyphen/dash/minus key]. Google “Autohotkey”.

    ; EM DASH
    Send {ASC 0151}

  3. 103

    I disagree with the unilateral exclusion of justification and have had several arguments with fellow designers about it. While I agree it is generally over (and mis)used, I do think justification has value when used properly. Also, not sure if this has been mentioned, but smart quotes can be manually entered by typing combinations of alt/option+shift+bracket keys.

  4. 154

    Well done David. Sadly, typography and its finer points don’t always get enough attention from web designers and I feel like the general public is often blind to the subtleties that really make type more legible on a website. Perhaps your book will help change that!

  5. 205

    Hello David!

    Thanks for your wonderful article. I’m happily surprised to find that everything you wrote is what I learned in High School and is in harmony with my worn out manual of ‘The Elements of Style’ by Strunk and White.

  6. 256

    Good article, but it feels a little dated and doesn’t take into account the unique properties of HTML and CSS very deeply. For instance, there is no mention of the fact that in HTML multiple spaces are collapsed into one, taking care of the two-spaces-after-a-period error. Would have felt more complete if that were mentioned.

    The piece about justification also made no mention of the latest Safari and Firefox supporting hyphenation via CSS. So the advice to avoid justification completely feels stale. It should certainly be considered by designers as of today.

    Perhaps feedback from this post will help inform and improve the book?

    • 307

      Also, no mention of libraries such as Textile, Typogrify, Typogruby, Markdown + Smartypants? Worth mentioning considering the audience here.

    • 358

      Hey Charles,
      Thanks, I’m glad that you liked my article. Good point about HTML and the two spaces – we discussed it during the editorial process – but I felt that the final result was more important. If you’re composing in a CMS like WordPress, two spaces translates to two spaces.

      The first I heard of Safari and Firefox supporting hyphenation via CSS was three days ago – before this article was published. In any case, the unsophisticated measures taken by these browsers to “even out” lines of type, result in a text block that is visually uneven: too dark in some places, and too light in others. I still recommend against justification on the web because of this.

      Thanks for pointing out all of these things. The book is already printed (will be available in just a few weeks), but there’s always the 2nd edition :)

  7. 409

    Lots of stuff I did not know here, thank you

  8. 460

    Hey guys! for anyone in Australia who found this article interesting, I’d like to recommend this book: Style manual for authors, editors and printers. It’s a must-have.

    It’s the main style manual used by government agencies in Australia. http://publications.gov.au/styleManual.html

  9. 511

    Useful Article, Thank you very much.

  10. 562

    Interesting… For us web designers/developers building or managing our client’s site, this is great. However, most websites which require average users to update their own content using Drupal, Joomla, Cushy, WordPress or any other CMS, don’t t really care or know the HTML to put the ‘correct’ punctuations.

  11. 613

    Thank you for this. It’s interesting how the smallest details can make such a big difference with the final outcome.

  12. 664

    I love this, thanks. However:

    “two spaces after a sentence…is a holdover from typographers of the Victorian era.”

    There’s a lot to like about the Victorian era. I’ll probably still be adding two spaces after periods while I’m typing up my pre-needs funeral plan.

  13. 715

    For the ligatures, you could test with JavaScript (I think Modernizr doens’t implement it (yet), but you can add a test for it) if the CSS3-property is available and if not use the jQuery plugin. So ligatures are visible and searchable in FF and the other browsers (if JavaScript is turned on with the latter).

  14. 766


    Thank you very much for the article. The more refined an art can be, the better, in my opinion.

    However, I’d like to point out that, as you were naming the various punctuation and typographical marks, you referred to the dot above the ‘i’ as merely a dot rather than calling it by its proper name, tittle.


  15. 817

    Christian Krammer

    August 28, 2011 11:52 pm

    Thanks for the great article. Some things were actually new to me.

    Two notes:
    1. Funnily, you seem to use the wrong dash in your sentence “This is much less visually disruptive than using the em dash with no space—which is recommended in editorial style books such as The Chicago Manual of Style — because there is less tension between the dash and the characters on either side of it.” You suggest to use an en dash with spaces, but the given sentence has em dashes without spaces. Is this by design? Since others also have already commented on that you should change that (or state if it’s supposed to be irony).
    2. I use Arial for body copy on my blog (like many, many others) and and until now I didn’t care about how quotes look. Inspired by your article I made the attempt to change them from dumb to smart ones but I noticed that at Arial under 18px there is no visual difference between them and they look like dumb ones. Only after 18px you actually see that they are smart.

  16. 868

    This article is worth is simply for the section about two spaces after periods. There’s a reason that browsers don’t render multiple spaces without using the nsbp tag, it’s just too bad email clients don’t do the same thing! It’s definitely one of those things that once you notice, you simply can’t stop seeing.

    Also, great point about ligatures, I had no idea Firefox supported that!

  17. 919

    Reynir H. Stefánsson

    September 30, 2011 2:35 pm

    This tool can help with the hyphenation issue:


  18. 970

    Don Joseph Grafix

    October 19, 2011 4:08 pm

    I appreciate printed materials, and wish I could print out every article I read on my computer screen and bind it together. The web is a digital way of representing printed media. At least that’s what I thought as I struggled for years to get css “right” in the sense of print replication. Web 2.0, and gloss will all fade away. You can’t deny thousands of years of type. Good Article! Thank you

  19. 1021

    Great article, but it’s flat out wrong that there’s no hyphenation control in CSS. There’s the hyphens property and you can use hyphens: auto; (+ prefixes) to enable it in Firefox, IE10 and Safari.

  20. 1072

    Thanks much of this wonderful article on dashes. I like the way you have described the differences between smart quotes and dumb quotes using the example of Steve Jobs’ height. This just clarifies my ignorance too :). Great work!

  21. 1123

    Nice article. I’d like to point out one of my favorite tools: Allchars (on sourceforge . net). This lets you easily enter special characters by typing the ctrl key, followed by a two-key combination. For example, to type an em dash, I type “[right ctrl] m -“. Or I type “[right ctrl] x x” which results in ×.

  22. 1174

    I would like to know why there is an inconsistency when using the the en dash for both en and em roles. The article states that an en dash with spaces can be used in place of an em dash without spaces, but then goes on to add that the en dash can also be used to signify a range between numbers by removing the spaces.

    To me it would seem much more consistent to use both these dashes the way they were intended to be used, WITHOUT spaces. Remove all ambiguity; that’s my philosophy.

  23. 1225

    You wrote: Use Smart Quotes, Dummy

    Microsoft does not agree. “In online content, use straight quotation marks” (Microsoft Manual of Style, 4th Edition, 2012, page 194).

    (Thanks for an interesting article.)

  24. 1276

    You know that the character that you call a grave accent (`) that you get with the tilde key (~) is actually a backtick, right?

  25. 1327

    This may have already been brought up, but shouldn’t there always be a space before and after an ellipsis?

    Also, what font am I typing in right now? It’s beautiful!

  26. 1378

    David: Lots of good information. There is one error, however. The em dash is not the width of the “m”, nor is it intended to be such. If you poke through your fonts you’ll find this to rarely be the case, or so I’d expect. While the “em” unit of measure may long ago have been based on the “m” character (I don’t know if this is the case or not, actually), in practice the letter m is usually much narrower than the current font size, or the em.

    It would be more correct to say that the em dash is the width of the current font size, or 1 em, but there are no police standing over type designers so this isn’t a guarantee, either. But it is more to the point of the term “em dash” and the general guideline for how their widths are determined.

    In this font I’m typing in right now, the em dash IS the width of the m, which in turn is NOT the full em! So that would seem to weaken my argument. I think if you look at a lot of recent typographic design outside of the main tradition of type design, this misappropriation of “m” to “em dash” might bear out. But if you look at more established typefaces, it’s not the case. I think this letter m = em dash error has been around for a long time, and might be affecting younger type designers who aren’t so much students of the tradition, as evidenced in more established typeface designs.

    Times has an em-width em dash and a narrower letter m. So does Scala Sans, Lucida Grande, Myriad Pro, Helvetica, Grotesque MT, Gill Sans, Franklin Gothic, Chaparral, and Arial. But to demonstrate that there are no police, Trebuchet has a wider letter m than its own em dash, neither of which are as wide as an em!

    • 1429

      Excuse the following pedantry. The width of the Em dash is actually equivalent to the height of the (now notional) piece of wood or lead on which each character originally sat, and an En dash is half of that. It means we can calculate exactly how wide the Em dash should be in a 36pt font. As there are six 12pt ems in an inch – 72 points – it’ll be precisely half an inch long. Doesn’t matter if you’re looking at Helvetica Ultra-condensed or Eurostyle Extended; the Em dash is half an inch long. By the same token, a 16pt En dash is exactly 1/9 of an inch, regardless of how wide the lower-case n is.

      This also explains, incidentally, why the x-height of characters of the same point-size differs between fonts. It’s not the X that’s 12 point tall, it’s the slug of lead on which it sits. And it’s why we still talk about “leading” between lines of text. Each line of 12pt text set solid is 12 point tall. If you wanted to increase that, you inserted thin strips of lead of the required thickness between the lines.

  27. 1480

    Great article! The two spaces after a period thing…annoys me every time I see it!! I do like a bit of typography geekness :)

  28. 1531

    Lovely article and it is great to see people still care about typography.

    Have to disagree with the dashes section, though. As a typesetter from the olden days, I was taught (read ‘had it drummed into) that hyphens, en dashes and em dashes never had spaces either side, lest you wanted to look for a new profession. My apprenticeship was in England around the mid-eighties, so it was at least the standard then.

    Things were so strict in typesetting back then that I was once chastised for leaving the commas separating a string of rock album names italicised.

    Regardless of all that, thanks for the great article.

  29. 1582

    Siobhan Clarke

    July 9, 2013 7:39 am

    “Smart quotes are so sexy that their sinuous forms can be used as ornamentation”

    Those words make me happy.

  30. 1633

    Beauty, craft and art are good and important.

    Functional communication is important as well.

    The web is different: it is automated at the user’s level.

    As per a prior comment, ligatures can break searches.

    Similarly, en dashes in Zip+4 postal codes and date ranges may break computer programs that are constructed to look for hyphens.

    Another consideration is that content is stored in databases and converted to and from various formats during its existence. Consider not just HTML but XML, RSS, email, data mashups, and copy-and-paste between applications. All these involve complicated programs written by human programmers.

    It may be safer, e.g. less error prone, to use hyphens instead of en dashes, and separate, discrete characters rather than single ligature glyphs when developing content for the web.

    Web content is likely to become unformatted anyway, whether due to a user’s type or magnification preferences in a browser or being displayed in a mobile device. The web is different. How are we going to do fine typography in a smart watch?

  31. 1684

    Thanks for the article! Very helpful for me.
    I don’t want to play the punctuation-nazi here, but according to your explanation based on The Chicago Manual of Style in one instance the use of the em-dash is wrong: “[…] The Chicago Manual of Style —because […].” Here a space “happened” before the em-dash.

  32. 1735

    Another repetition of the old “double-spacing is because of typewriters” myth.

    See some very good research here: http://www.heracliteanriver.com/?p=324

    tl;dr version – Extra spacing after sentences has been the rule since the 1700s, single-spacing only started in about the 1950s.

    Visually, I much prefer double-spaces.

  33. 1786

    You missed the point about hanging bullets and quotation marks!!

  34. 1837

    Can you break an em dash in a headline or body copy before or after the em dash? I always seem to run into that problem and no one ever seems to clarify if it’s allowed or not. I’ve heard some people will move the em dash and following word to the next line if needed. Is it horrible to break the text after the em dash and push the following word to the next line? Thanks!


↑ Back to top