Erik Spiekermann’s Typo Tips

With the invention of “desktop publishing”, designers found themselves setting type on their computers for the first time. Until then, they had made type specifications for typesetters and left the job up to the professionals. As a result, you can still see classic inaccuracies in typesetting, even in top-quality printed matter. Here you will find some tips from Erik Spiekermann, designer of FF Meta®, Meta Design founder, co-author of “Stop Stealing Sheep”, and a FontShop founder, which will prevent some of the more obvious blunders.

1. A CAPITAL MISTAKE
Small CapsNEVER use CAPITAL letters to accentuate words in running copy. They STICK OUT far too much spoiling the LOOK of the column or page. Use italics instead. If you have to set words in capitals, use proper small caps with or without initial capitals.

2. Connections
There are three different ways to connect or separate words: the hyphen -, the en dash –, a little wider than the hyphen, and the em dash —, wider still. The regular hyphen is easily accessible on any Mac or PC keyboard, whereas the en dash needs the combination option-hyphen on the Mac. The em dash is accessed by pressing option-shift-hyphen on the Mac. The use of these dashes depends on house styles and tradition. The em dash with no space around it is traditionally used to separate thoughts—like this one—but I think its length is a distraction in running text. Try using the en dash to separate thoughts – like this one – with a character space on either side. En dashes without space on either side are also used between numbers and compound words as in: the shop is open 10–7, while you can take the New York–Kansas City train or the New York–Baltimore train only 8am–3pm.

3. “ & ”
A dead giveaway for unprofessional “desktop typography” are wrong quotes and apostrophes. Quotes can have different shapes. They generally look like “this”, and can be remembered as beginning and ending quotes by thinking of “66” and “99”. Beginning quotes are found on the Mac by pressing option-[; closing quotes, option-shift-[. The apostrophe is simply a raised comma, the shape of a ’9 in most typefaces. It is identical to the closing single quote, while the open single quote looks like a ‘6. Beginning single quotes are found on the Mac by pressing option-]; the apostrophe and closing single quote, option-shift-].

4. Figuring It Out
Good text typefaces have “old style”, “text”, or “lowercase” figures – 1234567890 – instead of “lining” ones – 1234567890. Lining figures were originally designed to be used with setting of all capital letters. Lowercase figures blend in better with the text settings, as the figures behave like lowercase letters with ascenders (6 and 8) and descenders (3, 4, 5, 7, 9) and x-height-only characters (1, 2, 0). While they fit in text very nicely, the good looks have one disadvantage: each of the figures have individual widths, meaning they won’t sit directly underneath each other in columns. Their descenders may also clash with ascenders when the columns sit closely on top of one another, as happens quite often in tabular settings. Most lining figures are “tabular”, however, all the same width, making for a somewhat uneven appearance, as the 1 takes up the same space as the 8, but in tables, they are much easier to add up. Some fonts offer “tabular oldstyle figures”, which will allow table setting.
Read more about figure styles.

Ligatures5. Joining Forces
A ligature is defined as the visual or formal combination of two or three letters into a single character. They consist of letter combinations such as ff, fi, fl, ffi. Ligatures keep letters from overlapping and improve legibility. For example: affluence, configure, deflate, affinity.

6. Not Justified
Avoid flush settings! Most applications create justified text by hideously stretching and squishing words and spaces. Note that it takes many hours of tedious work to typeset justified text that is truly well-proportioned and legible. For this reason, professionals prefer to use ragged-right composition, either with or without hyphenation, depending on how much line-length variation they wish to allow. This gives the text a more harmonious appearance and makes it easier to read, since all wordspaces have the same width.

7. Bite the Bullet
Use bullets or centered points instead of hyphens (-) when you list items. Bullets are part of the standard character set and are located in the following positions:
option-8 (Mac), ALT+0149 (Windows)
· option-shift-9 (Mac), ALT+0183 (Windows)
Header image: Erik Spiekermann presents at TypoBerlin 2006. Photo by Thorsten Wulff.

33 Comments:

  1. Reader Cheryl Diner writes:

    I love Erik’s Typo Tips, however, under the “Quotable Quotes” where he is showing examples it shows (“this”). In this example and also where the (“99”.) is shown the comma and period are misplaced. They should always be placed inside a closing quote.

    I asked Erik if his style was European:

    It is. But I take issue with the American style: I always put the period or comma where the context needs it. If the quote has a point after it, like a complete sentence, it’s included in the quote:

    Groucho Marx said, “I wouldn’t join a club that accepted me as a member.”

    (Now, there should logically be a second full point to finish the sentence around the quote, but in German, we neglect that.) But:

    He always got gas at the “76”.

    Putting them inside the closing quote is an aesthetic decision, not a grammatical one, but it is American usage.

    Posted by Stephen Coles on Nov. 29, 2006
  2. I can’t imagine how awkward it would be to always hit keystrokes for every single contraction. I did it for the word can’t above and it was odd. Why isn’t it the standard for the keyboard buttons and are there ways of programming those characters to show up for the standard quote/apostrophe keys (on a mac)?

    Posted by Jonathan Wing on Dec. 12, 2007
  3. I *CRINGE* :) whenever I see all-caps used. Italics look so much better.

    These are excellent tips though!

    Posted by Mark Spencer on Dec. 25, 2007
  4. Thanks for the post. Interesting comment on the use of the en dash to separate thoughts. I’ve always liked the look of what he’s suggesting, but I’ve thought the conventional use of the em dash is an unbreakable typography rule.

    Posted by Onur Orhon on Jan. 3, 2008
  5. Onur,

    The use of an em dash to separate thoughts is somewhat of an old convention – Robert Bringhurst states that it is remeniscent of “Victorian era” typography, and has since been superseded by the padded en dash.

    Personally, I feel that there are no unbreakable rules in any design discipline, and typography is one of them. However, one must know the rules in order to break them.

    Posted by Tom Bland on Apr. 7, 2008
  6. The padded en dash is ugly. The em dash is easier to type and looks better. Bringhurst is wrong; the em dash has not been superseded.

    Posted by Rick Strong on Apr. 11, 2008
  7. Rick, I too have a fondness for the em dash. However, I also have to give a nod to Mr Bringhurst, in that if you look at books from 100 years ago and books from today you will almost certainly find that use of the em dash has been drastically reduced. That is not to say that it should be! However, I fear that as the em dash is now so unfamiliar to the average reader, its use can be distracting. This goes against the first rule of type, that it should transparently convey the message. In my experience, many clients (and designers) have never heard of an en dash, let alone a padded en, and are utterly confused as to how to use them. They generally are used to seeing hyphens (aaaaagh!) and will generally baulk at a full em dash. Whilst freelancing, I was even told by a so-called “art director” to replace all my en dashes with hyphens “because he liked it like that”. God help typography, and long live the em dash!

    Posted by Paul Bardo on Apr. 16, 2008
  8. under the “Quotable Quotes” where he is showing examples it shows (“this”). In this example and also where the (“99”.) is shown the comma and period are misplaced. They should always be placed inside a closing quote.

    Ugh! This is one of my pet peeves when I read copy. The response to that question is entirely correct and I only wish more people would follow that advise. I think the only thing that irritates me more when reading copy is when people use the inches and feet symbols instead of proper quotation marks.

    Posted by Sandy on May. 3, 2008
  9. Why doesn’t anyone bring up, or elaborate more, on the single and double prime characters for feet and inches? Are the keyboard straight up and down hash marks becoming defacto correct after all even with the purists?

    Posted by Chris Crawford on Jun. 24, 2008
  10. How gratified I am to read I’ve been doing the right thing all along! I’ve always surreptitously used “space endash space” instead of emdashes with no gap either side, house style be damned. I’ve always thought emdashes look awful. Another possibly dodgy habit of mine is to flush bulleted items against the margin and run the copy into an unhyphenated, ragged hanging indent. Nobody else seems to do this but I don’t care. So there.

    Posted by Intaglio on Oct. 3, 2008
  11. I suddenly have an urge to know about typography and this article is very helpful – very clear explanation and fluid discussion.

    Posted by Lela on Dec. 16, 2008
  12. Thanks for these short and sweet tips, I’ll have to send my students over to your blog more often. :)

    Also, I’d like to add my vote with Rick and Paul in the use of em-dashes, I love using them. Regardless, thanks for the tip regarding the padded en-dash and I will certainly keep it in mind whenever critiquing others’ work.

    One last thing, as I didn’t see anyone else comment on it. You indicated:

    Beginning quotes are found on the Mac by pressing option-[; closing quotes, option-shift-].

    In my U.S. Mac keyboard, to begin quotes is actually option-[ and closing them is option-shift-[

    Beginning single quotes are found on the Mac by pressing option-[; the apostrophe and closing single quote, option-shift-].

    To begin single quotes in my U.S. Mac keyboard, the key combination is option-] and closing single quotes is option-shift-].

    Hope this helps!
    :) Cheers!

    Posted by Robert Valencia a.k.a. bertobox on Dec. 23, 2008
  13. You’re absolutely right, Robert. Thanks for the correction. I’ve corrected the article.

    Posted by Stephen Coles on Dec. 23, 2008
  14. The form of the quotes depend on the language (french differs from dutch quotes) and the type design. The original Bulmer has very special quotes. In the Adobe/Linotype version they were reversed for the PS-fonts. In OT one can have both versions.

    Posted by Henk Gianotten on Dec. 24, 2008
  15. When I edited at Harcourt Brace Jovanovich, my knuckles would have been rapped had I ever used a padded en (in fact, the managing editor of my division declared that the en dash was an ugly hybrid that didn’t belong in print). However, I still harbor a preference for the padded en, and only reluctantly resort to the plain em dash (which in some fonts is horrifically elongated). But it could be worse: one of my clients insists on double dashes with no spaces on either side.

    Posted by Robert Gengerke on Feb. 26, 2009
  16. As a magazine designer, whenever I have been forced to use em dashes in a font in which they are horrifically elongated (which is ironic, because an em dash is supposed to have a rigidly defined length), I have scaled the em dashes horizontally, usually around 75%. You get the effect of an em dash but it is less obtrusive.

    (Personally I prefer padded ens, though.)

    Posted by Eric on Mar. 5, 2009
  17. Regarding the em dash and padded em dash, I’ve found that padding with a thin space in InDesign (Shift+Option+Command M) is a happy medium between padding and no padding. Call me a moderate.

    Posted by Randy Bourland on Mar. 6, 2009
  18. Finally clarification on the period/quotation thing! That’s been annoying me all year!

    Posted by Kristian on Mar. 9, 2009
  19. Sandy (May 3, 2008) A pet peeve of mine is when people get “advise” and “advice” mixed up.

    Posted by Mark on Mar. 13, 2009
  20. I wonder about Capitalization of words for Extra Emphasis. I personally cringe when I see them in overuse. Any thoughts?

    Posted by Vasily Myazin on Apr. 16, 2009
  21. which is ironic, because an em dash is supposed to have a rigidly defined length

    The em-dash did in fact have a ‘rigidly defined length’ back in the day—but that’s because many metal typefaces didn’t ship with certain sorts like em- and en-dashes, parentheses, commercial ats, and such. You’d buy them as extra sorts, and as such, the em-dash was in fact 1 em wide. I suppose so you’d know what you were getting.
    If you look at digital faces however, you’ll notice that em-dashes vary considerably in width. Older fonts, presumably those digitized directly from type/punches/matrices tend to have em-sized em-dashes. Newer fonts don’t.
    Looking briefly at the fonts on my system, Caledonia has an em wide em-dash with no space on either side. As do Akzidenz and Adobe Garamond. Centaur, Sabon, and Bembo’s em-dashes are an em wide, and actually kerned slightly off the sides of the body(!)—perhaps being one of the main reasons for this ‘back-lash’ against em-dashes.
    Not so surprisingly, Adobe Garamond Premier’s em-dash is slightly narrower than the em, with a bit of space on each side of the body. As is Storm’s Baskerville, and Officina Serif & Sans.
    Rules are great, but it seems hardly advisable for a typographer to have a ‘rule’ regarding how much space to add to either side of a dash. Being as each font already has a predefined, and wildly varied, amount of space surrounding the dash already.

    Posted by Nathan on Apr. 19, 2009
  22. Agreed, Nathan. I adjust whether I use an em dash or padded en dash depending on the face. I feel consistency within a giving piece is more important than which particular one is used.

    Posted by foresmac on Apr. 27, 2009
  23. The padded en dash is not only ugly, it is incorrect by most American grammar standards.

    Why not just use the Chicago Manual? (Or Associated Press, for commercial or journalistic writing.) That will answer all questions about correctness. Some issues can be fudged for looks, but in general, follow Chicago style and you’ll be OK. Maybe I’m a purist, but I like my typography to be not only attractive, but also unflinchingly correct.

    Posted by Sydney on Jun. 15, 2009
  24. You write:

    (…) I like my typog­ra­phy to be not only attrac­tive, but also unflinch­ingly cor­rect.

    But I believe you meant:

    (…) I like my typog­ra­phy to be not only attrac­tive, but also to unflinch­ingly conform to a specific set of conventions.

    Keep in mind it’s typography, not mathematics. ;)

    Posted by Yves Peters on Jun. 16, 2009
  25. Thanks for the summary of proper hyphen/dash use!

    Posted by Holly on Jul. 19, 2009
  26. The salient point re the em dash is being missed here. Although I defer to the deity which is Robert Bringhurst on almost everything else, he is wrong about this. (I tremble).

    The point is to retain the colour of the line.

    The parenthetical dash should not shout on the page as occurs when the abominable ‘padded en’ is used, with its concomitant ocean of white giving it ridiculous prominence. This is to replace one irritant (the over-long em dash) with something even worse.

    The beauty of digital type is that ‘perfect’ typography is theoretically attainable: you can set up a character style for a font with an obtrusively long (or short) dash and scale it to a chaste nicety (the eye, as ever, being the final arbiter) in a jiffy using find/change, even in long documents like books. For a final polish, slot in a hair space either side when the character has zero side-bearings.

    It is an elegant character when its done properly, and aids in the creation of that sumptuous page of good and even colour — a siren call, a seduction, to the innocent browser.

    Let’s all agree that the use of the ‘padded en dash’ is a piece of shoddy amateurism, excusable in a typist but deplorable in a TYPOGRAPHER, and ban it forthwith.

    Posted by Ken Wilson on Jul. 21, 2009
  27. I have to issue with your comment that an apostrophe is supposed to be the same shape as a curly quote – it is not the same glyph at all, any more than it is the same glyph as a single prime, and therefore may quite happily resemble either, depending on the nature of the face, or indeed some sort of happy medium.

    Posted by Jimmy on May. 11, 2010
  28. I am surprised that no one has moaned about the use the ellipsis character “…” instead of points of ellipsis “. . .”, something that makes me grind my teeth. Just this morning, I nearly spilled my tea over this little sucker in my local newspaper, a period followed by ellipsis character . . . . I would put thin spaces between those periods, if browsers would support it.

    Posted by Frederick Yocum on May. 11, 2010
  29. • = ALT+7 (Windows), easier than ALT+10..

    Posted by Sergei Tatarinov on Jun. 6, 2010
  30. great list. I always use the em dash! oops.

    here’s my pet peeve…when using small blocks of very large text that sit on top of each other, line them correctly under the top line!

    Posted by pavlicko on Nov. 7, 2010
  31. thank-you for this. spiekermann’s tips are essential for anyone wanting to refine their typography. i created some downloadable posters on his tips here:

    http://celestewatsondesign.com/2011/08/13/crafting-text/

    Posted by celeste on Aug. 13, 2011
  32. Couldn’t agree more with jimmy about the elipsis thing. And by the way, there’s some great tips here too about professional typography (in infographic form) https://www.cardprinting.us/blog/2013/03/guide-to-professional-typography/

    Posted by Therese on May. 27, 2013
  33. I was suggested this website by my cousin. I am not
    sure whether this post is written by him as no one else
    know such detailed about my trouble. You are wonderful!

    Thanks!

    Posted by best mattresses 2014 on Aug. 20, 2014

Post a comment:

  •  

The FontFeed

The FontFeed is a daily dispatch of recommended fonts, typography techniques, and inspirational examples of digital type at work in the real world. Eat up.

Archives

Subscribe

The FontFeed RSS The FontFeed Comments RSS