Mind Your En And Em Dashes: Typographic Etiquette

Advertisement

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

Indentation
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:

CNN vs. NYT

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.

(al)

Footnotes

  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 topShare on Twitter

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.

Advertising
  1. 1

    your new york times smart quote is an apostrophe.

    -6
    • 2

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

      -5
    • 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?

      13
      • 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.

        0
        • 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).

          -1
  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
    • 7

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

      -40
      • 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

        14
  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#@@#

    -185
    • 11

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

      21
    • 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.

      37
      • 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.

        -36
    • 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.

      -31
      • 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.

        1
    • 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?

      51
  4. 17

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

    5
  5. 18

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

    20
    • 19

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

      4
    • 20

      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.

      -13
      • 21

        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.

        19
        • 22

          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.

          0
    • 23

      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.

      -1
  6. 24

    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

    25
    • 25

      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.

      0
  7. 26

    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.

    29
    • 27

      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.

      3
    • 28

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

      1
    • 29

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

      1
  8. 30

    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.

    3
  9. 31

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

    5
  10. 32

    “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!

    4
  11. 33

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

    3
  12. 34

    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é)?

    2
  13. 35

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

    3
  14. 36

    Fantastic.

    3
  15. 37

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

    1
    • 38

      Hey Anna, you can learn how to type any of these characters from http://howtotype.net, 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.

      1
  16. 39

    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.

    3
  17. 41

    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.

    0
    • 42

      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 http://howtotype.net

      0
      • 43

        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.

        2
    • 44

      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:
      http://grammar.quickanddirtytips.com/dashes-parentheses-commas.aspx

      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.

      2
  18. 45

    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.

    1
    • 46

      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!

      0
      • 47

        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.

        1
  19. 48

    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.

    -40
  20. 49

    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.

    -69
  21. 50

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

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

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

    1
    • 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.

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

    2
    • 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”.

      0
    • 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.

      1
    • 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.”

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

    -2
    • 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.

      0
    • 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.

      5
    • 61

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

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

    2
  27. 63

    Benjamin Nortier

    August 15, 2011 2:46 pm

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

    0
  28. 64

    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. ;)

    0
  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. http://jsfiddle.net/5A5nY/1/).

    0
  30. 66

    nice detail info about typo

    but where can I find all math char code

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

    0
  32. 68

    Here is my favorite for easy to use Characters:
    http://www.copypastecharacter.com/

    4
  33. 69

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

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

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

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

    -3
    • 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.

      -1
      • 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.”

        0
        • 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!

          0
        • 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!

          3
  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)

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

    0
  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!

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

    6
    • 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.

      -2
  41. 85

    1. I have always found body type with serifs easier to read than sans serif.

    2. I am finding grayed-out type, in print and on the web, very tiring to read. Many times I just don’t.

    0
  42. 86

    Since we’re talking about web copy, why worry about multiple spaces at the end of a sentence?

    HTML specification tells rendering agents to collapse whitespace anyway, whether you use two spaces or ten after a sentence . . . doesn’t it?

    3
  43. 87

    Opinions are like… well you know the rest…

    The etiquette rules regarding good and bad grammer always apply – mispellings and grammatical errors are always bad.

    But whether there should be extra spaces or not, smart quotes vs. regular… all opinion-based to a certain degree. But when dealing with the web – ALWAYS expect the unexpected. If you choose to use smart quotes or other special characters (by inserting the numerical code equivilant), be fully aware first that there will always be some browse(s) out there that won’t recognize the latest standards, and will display something unexpected.

    If you are trying to reach the broadest audience, which will make you look more foolish – a standard quote (as opposed to a smart quote), or having some random symbol (e.g. dot, square, etc.) in it’s place? I personally prefer to err on the side of caution and use as many web-standard practices than risk a complete mess on the page in some browsers… but as I mentioned, everyone’s got an opinion and there really is no right or wrong on this issue…

    0
  44. 88

    David clearly knows his typography. However, typography should not interfere with a text’s meaning, nor should it be regarded as being made up of only hard-and-fast rules.

    David recommends using an en dash with a space on either side of it because it “is much less visually disruptive than using the em dash with no space.” The point of what typographers call the em dash (and what writers and editors call a dash) is to be disruptive. If you replace the em dash with an en dash, you should expect the writer or editor to change it back. It’s not the job of the typographer to soften the writer’s disruption, and a typographer should never implement changes that change the text’s meaning. Typography and design should support meaning, not change it.

    Typography is about style, and style is extremely subjective. Sure, I prefer one space between sentences. But not everyone agrees with that, and so what? And although there are traditional uses for different types of quote marks having different uses, to say dumb quotes look “clunky and lifeless” is to state an opinion, not a fact. Not everyone agrees with that opinion, nor does everyone have to.

    Good design takes into account the text, the author’s voice and style, the publishing platform, the readership, and so much more. It’s not just the designer’s ideas for what looks good, although sometimes that counts more than other times. Good design supports the text. It works with the text to achieve a goal, be it a sale, a click, entertainment, etc. Good design doesn’t have to be the designer’s idea of pretty, it just has to work.

    6
  45. 89

    Mark L. Ward, Jr.

    August 16, 2011 12:01 pm

    It would be interesting to read a post detailing the respective positions of you and your editor on the relative merits of space-en dash-space vs. no-space-em-dash-no-space.

    1
  46. 90

    David,

    First of all, I commend you for writing this article! I agree with most of your points—however, on one important point we disagree (guess which it is).

    An en dash should not be used to connect sections of a sentence. The main purpose of an en dash is to show a connection in time (say, between 1983–2011). You might argue that an em dash is visually disruptive, but what is more disruptive is the uneven typographic color created by adding extra spaces around an en dash. In good typography, even typographic color is paramount: it is what allows the reader to read at a comfortable pace and is a mark of great typesetting.

    4
    • 91

      In Britain it is more common to use the en dash in the way described in the article. Use of an em dash is used more in American English. Being British I see both variations often and for my money I agree with Bringhurst and this article: the en dash with spaces looks more smooth, with a more even tempo and colour.

      0
  47. 92

    Really useful article; thanks.

    But I couldn’t help noticing the irony of the following sentence (quoted verbatim):

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

    2
  48. 94

    thanks for the great post! There are a lot of items in here I had wondered about…

    0
  49. 95

    Nice refresher.

    1
  50. 96

    i hate smart quotes. it looks ugly and too curly. hmm…

    -8
  51. 97

    love it! great info here. keep them coming!

    4
  52. 98

    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}
    return

    1
  53. 99

    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.

    0
  54. 100

    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
  55. 101

    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.

    1
  56. 102

    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?

    0
    • 103

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

      1
    • 104

      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 :)

      1
  57. 105

    Lots of stuff I did not know here, thank you

    1
  58. 106

    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

    1
  59. 107

    Useful Article, Thank you very much.

    1
  60. 108

    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.

    0
  61. 109

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

    1
  62. 110

    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.

    0
  63. 111

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

    1
  64. 112

    David,

    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.

    Thanks!

    1
  65. 113

    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.

    0
  66. 114

    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!

    0
  67. 115

    Reynir H. Stefánsson

    September 30, 2011 2:35 pm

    This tool can help with the hyphenation issue:

    http://code.google.com/p/hyphenator/

    0
  68. 116

    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

    0
  69. 117

    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.

    1
  70. 118

    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!

    0
  71. 119

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

    0
  72. 120

    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.

    0
  73. 121

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

    0
  74. 122

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

    0
  75. 123

    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!

    1
  76. 124

    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!

    0
    • 125

      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.

      0
  77. 126

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

    1
  78. 127

    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.

    1
  79. 128

    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.

    0
  80. 129

    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?

    0
  81. 130

    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.

    0
  82. 131

    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.

    0
  83. 132

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

    0
  84. 133

    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!

    0

↑ Back to top