Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

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 Link

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? Link

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. Link

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 Link

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 Link

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 Link

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 Link

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 Link

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

Quotation Marks Don’t Measure Up Link

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 Link

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 Link

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é Link

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 Link

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

Using Ligatures Practically Link

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 Link

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 Link

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 Link

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.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ 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

    Moritz Flucht

    August 15, 2011 7:55 am

    your new york times smart quote is an apostrophe.

    • 2

      You’ve quite clearly missed the point of the paragraph that is leading up to this example.

    • 3

      why +7 “likes”? He says apostrophe and quotes in the paragraph:”, and for closing single quotes and apostrophes, use ’ (’)” Your ego is trying to make him look dumb?

      • 4

        No. You see, the problem is that David made an incorrect statement in the article (“…apostrophes, use ’ (&​rsquo;)”). There is simply no way anyone could possibly justify choosing the right quote character over the apostrophe character for writing an apostrophe. It’s semantically incorrect, and even if you feel (wrongly) that a right quote character looks like a better apostrophe than an apostrophe character does, surely that’s something you should take up with the person who designed the typeface, rather than the one who’s using it.

        • 5

          I apologize for some of the strong language in my previous message. I failed to actually check my facts before posting—it appears that plenty of people have been justifying the use of right quotes as apostrophes, citing ‘tradition’, apparently. In fact, even the Unicode standard recommends such usage.
          I still stand by my opinion, though: I just find the idea of using distinct characters for distinct symbols very appealing. Besides, there’s nothing stopping a designer from mapping the same glyph to both the apostrophe and the right quote; if a font hasn’t already mapped the quote to both characters, it’s likely because the it’s too strongly angled to pass as an apostrophe (that is, it looks good paired with an equally strong left quote, but would look uncomfortable placed between n and t, pressing too close to the top of the t and accentuating the gap between the letters).

  2. 6

    Great reminder of some of the basics I learned in design school. These tips will definitely be a help to newbies like myself to be more professional once I’m actually in the field.

    • 7

      ‘Myself’ in this sentence should really be ‘me,’ or, better still, ‘as I.’. :-)

      • 8

        Learn english, dude. Myself is correct.

        2) PRON-REFL-EMPH (emphasis) You use myself to emphasize a first person singular subject. In more formal English, myself is sometimes used instead of `me’ as the object of a verb or preposition, for emphasis. …
        He was roughly the same age as myself. …a complete beginner like myself.

        Collins Dictionary (c) 2008

  3. 10

    Typography nerds, the web is not a press!, type has evolved, get over it, em is a BS property, css rules, the two people that are the least compatable are the print designer and the web, print= grandma, web = teh new hotness, get over it, just curl up in a corner and cry….!!232#@@#

    • 11

      Natesh Daniel

      August 15, 2011 9:03 am

      @Tim: Consider investing in the knowledge of character maps and learn to use all the glyphs and symbols that are available in a font, especially when setting type in foreign languages. Typography has been digitized for decades now and fine typography is still web-friendly.

    • 12

      Martin Silvertant

      August 15, 2011 6:16 pm

      @Tim: It’s lazy people like you who are ultimately dumbing the language down. I personally like to preserve the sophisticated aspect of typography by doing it correctly, even if it does take a little extra time. Actually, once you get used to it, it doesn’t even take extra time. It just makes you seem less lazy and dumb.

      • 13

        Agreed! What the web needs is old and inconvenient techniques like ligatures. I enjoy making the web as unusable as possible. I want occurrences of the the text “ffl” to look different, require html entities to display, and be unsearchable using Ctrl+F. Thank you smashmag for the insight. Thank you smashmag readers for downvoting Tim.

    • 14

      Filed under stuff only print geeks notice. Web just doesn’t care. Try telling your boss when you’ve missed a tight deadline that you had to go back through and touch up the hyphens. That look they will give you is what it looks like when someone is trying to decide if you’re earning your money.

      • 15

        Yes good sir, but the key is to be so fine tuned and impeccable with editing and print knowledge, that one would not have to “miss deadlines” just to do it the right way. Perhaps if you can’t do it correctly while you’re writing the first time or during a quick edit, your boss shouldn’t be paying you to write anything at all.

    • 16

      Chris Greenhough

      August 16, 2011 7:57 am

      Type has evolved, get over it? Stuff only geeks notice?

      Oh, come on. Are we to stand by while centuries of typographic craftsmanship are undone in a few short decades by the no-attention-span brigade?

      Just because you don’t care, doesn’t mean no-one cares. Otherwise we might as well all make up our own spelling and punctuation, after all, your boss is fine with sloppy, lazy un-proofread copy that makes his business look totally unprofessional, right?

  4. 17

    LOL @ the Author

    August 15, 2011 11:36 am

    The “CNN is dumb” nonsense was hilarious. You think they care what some faceless nobody thinks about the way they uses quotes? Absolutely pedantic and moronic stuff between the lines of this nerd boy wankfest. In this world nobody cares about half of what you typed out. Harsh thruths, but you were, are and always will be nothing.

  5. 18

    Thanks for sharing this. It’s strange how many small things are there that I don’t even know!

  6. 19

    YES, thank you!! I hope lots of people read this and stop putting two spaces after a period. C’mon now!

    • 20

      I’m guilty of typing two spaces after periods. It’s a hard habit to break after 30 years.

    • 21

      And how do you know when a period signals the end of a sentence vs an abbreviation? Consider this:

      “I am taking my son to see a Dr. Todd has always been afraid of them.”

      Is my son going to see “Dr. Todd” and the sentence is nonsensical or is my son, Todd, afraid of doctors, but going to see one anyway? Yes, the Dr. abbreviation is incorrectly used here. A period followed by a capitalized word does not necessarily indicate a new sentence, especially when abbreviations and proper nouns are thrown into the mix.

      Double spaces after a period are irrelevant when we’re talking about the web anyway, since no browser honors them.

      • 22

        In your example, it’s obvious that the period is ending the sentence because, as you said, if your son is going to see Dr. Todd the sentence is completely nonsensical. Additionally, it’s silly to use the abbreviation of Doctor in this case unless your being lazy. The ‘Dr.’ is generally only used in front of someone’s name, not every time someone needs to write the word ‘doctor’. People are capable of using context to understand whether a period is ending a sentence or signaling an abbreviation if your sentences are written half decently.

        • 23

          A. Warren Duvall

          April 28, 2014 5:11 am

          An abbreviation was a bad example, but it must be possible for instances to arise in which an acronym is used mid-sentence, followed by a proper noun in a way that could create confusion.

    • 24

      Oh, Jenn, say it ain’t so! I’ve been using two spaces between sentences since I was an English major. Um, forty some years ago. Sentences need space; it’s so cruel to Cram them together like subway riders. And it discourages the creative, but incorrect, use of Capitals, in the mode of the 18th Century.

      Edit: Gee, typed with two paces, but on the website it looks like only one space.

  7. 25

    Andrew Cooper

    August 15, 2011 8:29 am

    I have to comment on this post because for me this has to be the most useful article I’ve read from SM in 2011, so far. I’m not saying I want more typography related articles on SM, because I’m not in to typography, but more articles like this one – Articles that teach you something you should probably already know, but don’t really actually implement, when you should.

    Thanks for SM for publishing such a great article that thousands of designers / developers will see, and thanks to the author David Kadavy for writing this.

    The only problem I have with the article is the fact that you want us to subscribe to your E-Mail updates / newsletters for the book to receive the PDF Cheat Sheet, which I was hoping would be available as a downloadable link in the “Other Resources” section. Why? I don’t mean it in a negative / bad way, but I’m just not interested in your book, just like I’m not really interested in typography.

    So, instead of having to subscribe to your E-Mail updates / newsletters for the book all so I can get a 1 page PDF Cheat Sheet that is directly related to this article, is there any chance at all you could edit the article to include a link in the “Other Resources” section to the downloadable PDF Cheat Sheet for us all to enjoy? I’m going to subscribe anyway just so I can get the PDF Cheat Sheet, but I’m then only going to unsubscribe right after I’ve received it. Having to do all that for the PDF just makes my life harder and is a nuisance. You’d have made my day if I could just click the link at the end, download it, read it, print it off, and enjoy. Thanks anyway.

    Kind regards,

    Andrew Cooper

    • 26

      A. Warren Duvall

      April 28, 2014 5:25 am

      I have another thing you may want to learn. Your phrase “because I’m not in to typography,” should read: “because I’m not into typography.” I do not write this to be a critical jerk, but only because you had enjoyed learning curious bits of typographical trivia, I thought you might enjoy curious bits of usage trivia, too.

  8. 27

    Kagan MacTane

    August 15, 2011 8:51 am

    I’ve been using em and en dashes in my web typography for years. One thing I like to do to make my layout even cleaner and more readable: replace the initial space with a non-breaking one, so the dash can come at the end of the line, but never at the beginning.

    For example, instead of just “some text — some more text”, I’d write: “some text — some more text”. That way, I never have the situation where the left-hand edge of the text is interrupted by a dash.

    • 28

      Kagan, thanks, that’s a great suggestion! A dash definitely works more gracefully at the end of a line than at the beginning, where it will just cause disruption to the crisp edge.

    • 29

      But with an em-dash there shouldn’t even be a space before (or after) the dash. See above article.

    • 30

      Paul Flo Williams

      August 23, 2011 3:44 am

      I’ve been converting some 19th century books into HTML (for PG) for a while now, and it seems to have been normal typographic practice to allow em dashes at the beginnings and ends of lines. I’ve taken to marking them up with zero-width spaces either side, so that line splitting can occur where necessary, without adding extra visible space into the line. (I then have to change zwsp to zwnj for the Kindle, grrr, but that’s another story.)

  9. 31

    This is one of my favorite articles on typography. A few of my highlights:
    1. Use one space after the period.
    2. Indent to start a new paragraph (no need to have a blank line and indent).
    3. Use smart quotes!

    This was a great article! I also downloaded the free cheat sheet and printed it out for my office mates. They will love this. Looking forward to more updates via email.

  10. 32

    Nice one. I should stop being lazy about quotes. Thanks

  11. 33

    “If you ever see one again, you might think you were having a dèjá vu.”

    It’s déjà vu, with the acute accent on the e and the grave on the a. Probably just a typo since it’s well written in the picture example, but I thought I’d point it out anyway. :)
    Amazing article though, thanks!

  12. 34

    You wrote dèjá vu in the text, but déjà vu in the graphic. The graphic is correct.

  13. 35

    Do you have a script that will parse text and do this automatically? The quotation marks and ligatures could be more easily parsed, but what about accent marks? Know of any good scripts to do this automatically (e.g. cafe to café)?

  14. 36

    boom! you hit ’em with bringhurst at the end. of course. great article. i wish every designer followed these rules.

  15. 37


  16. 38

    I’m still not really sure how to use ligatures on the web- do they have ascii characters too?

    • 39

      Hey Anna, you can learn how to type any of these characters from, as listed in the related resources. Just be aware that if you create content with these letters, some readers may have trouble using their “find” command in some browsers – see this article for more info.

  17. 40

    First, thank you for the ragged right! Everyone wants to full justify because they think it looks clean to have blocks. But the eye cannot read long sections of text full justified because it’s tiring to not have the line lengths as a point of reference. Anyone who doubts this should check out the typesetting for web based news sites like CNN.

    But one thing I would disagree with is the importance of indenting. It’s one of those things that doesn’t translate from print to web, maybe because it’s been the industry standard for so long, not to indent. Whenever I see it, it looks strange and gimmicky.

  18. 42

    What is the rule when choosing between commas and em dashes? Both indicate an ‘aside’ is taking place, and the sentence should be complete without the content inside or after the symbols.

    Oh, and where ARE the em and en dashes on the Mac keyboard? Do I have to type “–” every time I want to use one? Is there a language declaration that makes fonts look the same on Macs and PCs? I use my text editor to make my entire document ‘ascii’ only, and manually type out the educated quotes and dashes.

    • 43

      Daryl, I won’t claim to be an expert on punctuation (rather than typography), but I believe asides can be denoted with dashes or commas – I prefer dashes.

      To type an en dash on a Mac, type Option + – (hyphen). For an em dash, type Option + Shift + – (hyphen). There’s more on how to type all of these characters on

      • 44

        John Moore Williams

        August 15, 2011 3:58 pm

        asides can be denoted with either a comma or a dash – use the latter to place more emphasis on the aside.

        in several places you refer to a hyphen as “actually a punctuation mark,” apparently to attempt to distinguish it from en and em dashes, however, en and em dashes are also punctuation marks.

    • 45

      Essentially, the difference is minor because both using a comma and dash in that regard are very similar. It’s more that the dash is more agressive or abrupt you might say. See below a basic outline:

      As for the Mac keyboard you use a key combination. For an en dash use the option key + hypen; for an em dash it’s option key + shift + hypen.

      Hope this helps.

  19. 46

    Chris Strosser

    August 15, 2011 10:54 am

    Overall, I think this article is great.

    (1) As far as the one vs. two spaces debate, both Chicago and MLA have something to say about this. MLA seems to suggest one space, but they also allow two spaces. Chicago says the following:

    “The view at CMOS is that there is no reason for two spaces after a period in published work. Some people, however—my colleagues included—prefer it, relegating this preference to their personal correspondence and notes. I’ve noticed in old American books printed in the few decades before and after the turn of the last century (ca. 1870–1930 at least) that there seemed to be a trend in publishing to use extra space (sometimes quite a bit of it) after periods. And many people were taught to use that extra space in typing class (I was). But introducing two spaces after the period causes problems: (1) it is inefficient, requiring an extra keystroke for every sentence; (2) even if a program is set to automatically put an extra space after a period, such automation is never foolproof; (3) there is no proof that an extra space actually improves readability—as your comment suggests, it’s probably just a matter of familiarity (Who knows? perhaps it’s actually more efficient to read with less regard for sentences as individual units of thought—many centuries ago, for example in ancient Greece, there were no spaces even between words, and no punctuation); (4) two spaces are harder to control for than one in electronic documents (I find that the earmark of a document that imposes a two-space rule is a smattering of instances of both three spaces and one space after a period, and two spaces in the middle of sentences); and (5) two spaces can cause problems with line breaks in certain programs.

    So, in our efficient, modern world, I think there is no room for two spaces after a period. In the opinion of this particular copyeditor, this is a good thing.”

    (2) Perhaps I missed the point on this one, but if someone is trying to show mathematical calculations, the “x” is a horrible choice, which can be confused for a variable.

    • 47

      Hey Chris, I’m not sure if you’re trying to reinforce my suggestions regarding “x” but I recommend using an actual multiplication symbol (×). Good point than an x could be confused for a variable!

      • 48

        No, I don’t think so. The correct mathematical symbol for multiplication is usually a dot ( · ) since the ( × ) multiplication symbol is thought to be ambiguous as it looks like ‘x’, the most common variable. This ambiguity is why asterisks are sometimes used.

        Sure, ( × ) is prettier, but can be confusing.

  20. 49

    Is this a joke? You dare to use the word ‘etiquette’ for such minor foux pas’ ?
    I think ‘rules’ is more appropriate.

    Etiquette is something of politeness and if ignored on purpose is otherwise offensive. I fail to see where bad grammar ever really qualifies as such. Sure, it shows how dedicated you are to what you are communicating, but should not be held against you if you are just simply being efficient with your time and process. Those who ‘hate’ bad grammar online need a vacation. Preferably a permanent one.

    On the internet, I’m supposed to worry about an indent for a new paragraph?
    Time is more than money… it’s time.
    Graphically, skipped lines are much easier to read.

    I guess you professionals really know how to pull out the weeds.

  21. 50

    This is great! Good information. I’ve always wondered about the paragraphs, I often do not use indentations.

  22. 51

    This was one of the most helpful posts I have come across on SM in a while! I have always struggled knowing which punctuation mark to use when marking something up. God knows I used the hyphen for everything that needed separation – (see) I can quite ignorantly say I didn’t even realize there where other horizontal line separators out there.

    Love the bit about ligatures and smart vs. dumb quotes vs. primes as well. Thanks David.

  23. 52

    The one space vs. two space argument has me torn. One space after periods looks better, but I still find it easier to read text with two spaces. It does a better job of separating out the sentences into distinct entities, which improves my comprehension and helps me read more quickly.

    • 53

      I am undecided with regard to the aesthetics of a larger space or not after a period. I’ve always used one space since that is what I have been taught to do but, just like Tom, I find that I read faster when sentences are more clearly separated.

      If the example for “correct” spacing is representative of proportionally space “modern fonts”, then I find a larger “incorrect” space easier to read (again, I am not talking about any aesthetic issues here, I am only concerned with readability).

      Is there any data on readability/comprehension/retention with regard to this issue? (Similar to the data on flush left vs. justified)

      Are there fonts, plug-ins or other software that generate a larger space after a period?

      Would a manuscript using a larger space character, such as an en-space, cause problems for a typographer?

      When it comes to typography I am a dilettante at best and English is my second language. So please excuse my linguistic errors or ignorance on these issues.

  24. 54

    Regarding justified text, I’ll go you one better. How about not using it for either Web or print? It hurts readability and is often a product of the giddy typist who has discovered such a thing is possible in Word.

    And if you’re one of the offenders, please stop saying “justified left” and “justified right.” It’s “aligned left” and “aligned right.” I thank you. My blood pressure thanks you.

    • 55

      Chris Greenhough

      August 16, 2011 8:08 am

      I agree, it’s certainly not “justified left” or right. But when I went to print college (and worked in design studios) we always referred to “ranged left” or right, with “justified” specifically referring to text that has variable spacing to create parallel left and right edges, as opposed to text aligned either left or right with the opposite edge left “ragged”.

    • 56

      I’m with you David. While I wouldn’t say nobody should use justified text at all, I certainly avoid it. All of those methods that sophisticated layout programs use to even things out just make the overall texture of the text block look uneven.

    • 57

      I use LibreOffice, and when I set text to be justified, there’s an option to have the last line be any one of left aligned, centered, right aligned, or justified. If you’re being really precise, I think that “justified right” could mean “justified, with the last line of text aligned right.”

  25. 58

    In my experience, 9 times out of 10, an en or em dash is used where a comma should be. Stop using them people.

    • 59

      Brian, since you seem to know what the rules are, please share them with us. When is it appropriate to use an em-dash instead of a comma? When is that one time out of 10? I really don’t know — and I kind of prefer em-dashes.

    • 60

      I agree. Hyphens and dashes in copy are too often a sign that the writer didn’t know or care enough about sentence structure. When I was a copy editor I banned all dashes and semi-colons until the writer could convince me they knew how to use them properly. Tough love, but it improved comma usage.

    • 61

      Often I’ve noticed that a semicolon works better than a dash. Depends on how you’re using it, I suppose.

  26. 62

    I love your article, it always amazes me how many designers will learn typography rules while in college but seldom do they actually put it into practice.

    The mastering of typography is an art form that should never be neglected.

  27. 63

    Benjamin Nortier

    August 15, 2011 2:46 pm

    Interesting article, I’m looking forward to be book!

  28. 64

    Developer Art

    August 15, 2011 3:09 pm

    David, I must thank you for your great work.

    That’s in fact a collection of information you’d normally gather yourself by crumbs over many years. I feel like it’s one of those last missing elements that take your craftsmanship on to the next level and allow you to approach perfection. I like this sort of tips to teach about the tiny elements of the big picture.

    The ambiguity with hyphens and dashes is something that needed to be cleaned up for a long time. I only hope many people come across this information.

    One little suggestion that I have. There where you show how to enter symbols with diacritic marks on a Mac, please add there some tips for the PC users too. There is a way to enter those characters by their Unicode numbers, using Alt+Code. You wouldn’t believe how many people don’t know the trick. Teach them!

    P.S. I wonder if this comment form knows how to turn straight quotes into smart quotes. ;)

  29. 65

    While justification and forced hyphenation are good to avoid generally, I think in some cases they’re acceptable. Note that Mozilla, Chrome, Safari and Opera all support the soft hyphen—unsure about IE—so if you have long-line text that you want to hand tune to look good, you can still hyphenate in an accessible way (e.g.

  30. 66

    nice detail info about typo

    but where can I find all math char code

  31. 67

    | …diacritic marks on a Mac

    This has become a lot easier on the Mac. In Lion and in an app coded to use this (which Firefox apparently is not), when you hold down a vowel key, or any other letter that has diacriticals (like n), your options pop up under the letter, and you choose which one you want.

  32. 68

    Lars Oscarsson

    August 15, 2011 10:30 pm

    Here is my favorite for easy to use Characters:

  33. 69

    Great article. But unless is only meant for Americans, the information about marking up quotes is false. (According to Bringhurst)

  34. 70

    I sympathise with this, I really do. Everything about it is undoubtedly correct.

    But many, many websites are updated by large numbers of staff who do it as only a small part of their job. It is hard enough to get them to just use headings correctly, say; this stuff? No chance. I wish it weren’t true.

    What we really need are more CMSs that handle it automatically, as far as possible.

  35. 71

    Thanks. And one more thing, space around the Ellipses please, like this …, not like this…, the ellipsis is treated like a word, which many … seem to ignore.

    Print or web, same rules, if you don’t like typographic rules, don’t work with typography & graphic design please.

  36. 74

    Is there any place you’d make the typographic case to use an em dash? It sounds like we can limit ourselves to hyphens and en dashes.

    • 75

      Mr.Recycle em dashes are usually used to refer to a range e.g. 1—9

      I wouldn’t flank an em dash with full spaces. If it was a situation where I had full control I might use a thin space or similar.

      • 76

        | Mr.Recycle em dashes are usually used to refer to a range e.g. 1—9

        I think this is contrary to the article above.

        “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.”

        • 77

          Fair enough, didn’t read it well enough. I think generally they are interchangeable, although I thought em dashes were for ranges and en dashes in a similar way to commas. But each to their own!

        • 78

          The main purpose of en dashes is to indicate range, the author is correct. Each dash has its own specific purpose. The em dash should not be abandoned or ignored simply because one designer/author decides he finds it aesthetically displeasing!

  37. 80

    wait, so what is the thing to do after a paragraph? maybe I just over read it lol

    anyway, I am finding it really annoying that keyboards make you so lazy when it comes to Typography. Especially for Hyphens, en-Dashes, em-Dashes and quotation marks. I switch between German and English and the German opening quotation mark is sort of hidden ( ALT + ^ = „ ). Which also leads to me using the dumb ones for writing in English (which is usually less official anyway)

  38. 81

    A great article and one that I hope encourages more designers to read and refine text rather than just arrange it. It improves UX.

    What should the plural of CMS be? CMS’ suggests it owns something. CMSs? CMSes?

  39. 82

    MaritaBeth Caruthers

    August 16, 2011 6:24 am

    Thank you. Great article outlining some of the most commonly-made mistakes, and the corrections we all need to remember. Darn those typing classes from the seventies! I will endeavor to reduce the space between my sentences to only one (even though it feels foreign and looks crowded to me). I can adapt … I hope!

  40. 83

    I think it’s funny when matters of opinion are expressed as facts. For example, stating categorically that text with two spaces between periods and first letters disrupts text is specious. To my eyes, text that includes only one space looks crowded and I find my muscles feeling tense as I read it.

    Similarly, while I agree that Apple’s use of ligatures in a product name is effective, I find the “fi” example is disruptive. (See how it works when you name an opinion in “I” language?)

    The news about right and wrong regarding mathematical symbols is poised to shake up the text book universe! I’ve got books that express multiplication with an asterisk, a dot, and/or a caret!

    Language and technology are subject to change that becomes difficult to deny. Style, however, remains a matter of opinion.

    • 84

      Good response Alice. Yes, facts should only be stated as facts when they are, indeed, facts. Two spaces after a full stop (period) and one after a comma reads far more clearly.


↑ Back to top