Top Ten Web Typography Sins

Advertisement

By Steven D.

While many designers have been quick to embrace web standards, it’s surprising how often the basic standards of typography are neglected. Here are ten deadly sins to avoid in your web typography:

1. Using hyphens instead of an em dash

Typography Sins

If you need to interrupt yourself, do it with an em dash (—) instead of a pair of minus signs. This is a top pet peeve for countless editors.

2. Using periods instead of ellipses.

Typography Sins

Most fonts provide a dedicated ellipsis character (…) to keep your type tidy. The ellipsis character fits the three dots into a single letterspace, which is especially beneficial for content that might be printed.

3. Using dumb quotes

Typography Sins

These straight “up and down” quotes used in your markup should stay in your markup. In your content, only use them to indicate a measurement in feet or inches.

4. Double-spacing between sentences.

Typography Sins

The antiquated practice of double-spacing between sentences seemed like it was finally laid to rest thanks to web typography. Just a few short years ago, it required manually inserting a blank ASCII space to commit this font faux pas. Now, some content management systems will actually format the double-spacing for you if you let them. Don’t give them the chance! Only use single spaces between sentences.

5. Improvising a copyright symbol.

Typography Sins

Not only is it ugly and lazy, a copyright symbol hacked together out of a capital C and parenthesis might not even cut the mustard in court. Use the real McCoy (©), and bill your clients extra for the legal advice.

6. Using too much emphasis.

Typography Sins

You can bold text. You can italicize it. You can underline it. You can even use all caps if you really need to hammer home your point. Just don’t use more than one at the same time.

7. Underlining your hypertext links with border-bottom.

Typography Sins

Underlines cut right through the descenders in your typeface, making it harder to read. Instead of border-bottom: solid 1px #00f;, use text-decoration: underline; to draw a line below your text.

8. Faking families in Photoshop.

Typography Sins

If your font doesn’t offer (or you couldn’t afford) the bold, italic, or smallcaps branches of the family tree, don’t try to fake it in Photoshop. Sometimes you can get away with it in print, but at web resolutions, it’ll be a mess.

9. Not using accent characters.

Typography Sins

I know how annoying they can be (especially when you’re writing about Ikea furniture), but if somebody’s name includes an exotic character, be polite and include it.

10. Not using CSS for capitalization effects.

Typography Sins

I know it’s CRUISE CONTROL FOR COOL, but if you’re using caps (or lowercase) for decorative reasons, be sure to use the text-transform property. It’ll save a lot of trouble if you ever decide to change things later.

About the author

Steven D. is a web developer so secretive that he won’t even tell you his last name without entering a mutually-binding NDA. In his free time, he enjoys working instead of enjoying his free time.

Editor’s note

This post is one of the finalists of our guest author contest1. Over three weeks selected top-10-lists and discussion articles will be published. To rate the articles we’ll analyze their popularity, users activity, quality of backlinks, traffic and further data.

Footnotes

  1. 1 http://www.smashingmagazine.com/2008/07/17/write-a-guest-post-and-win-apple-macbook-air/

↑ Back to top Tweet itShare on Facebook

Some contributors with just a single posting. To learn more look at our ebook.

Advertisement
  1. 1

    This is a good reference to check up on once in a while and see how many mistakes you still do.

    0
  2. 52

    Now how to we get clients to stop using emphasis tags like and ALL CAPS everything they say is so important?

    0
  3. 103

    Boy do I know a ton of people who need this article. Of course, I need to keep this list handy to double-check my own work!

    0
  4. 154

    Thanks for the excellent article. There are quite a few things that I would consider mistakes, but it’s nonetheless well-written and potentially helpful. It’s definitely the case that “dumb quotes” translate better, underlining makes more sense than border-bottom (semantically), and underlining should not be used for emphasis where it’s avoidable.

    0
  5. 205

    This is a classic case of bulking out some good points with some marginal to just plain bad ones. Number 7 was dictated in a client project recently and is frankly one of the worst web typography ideas I have ever had to deal with. The amount of extra conditions and classes needed to switch it back off items like images and extra markup when you want an underline and a border is just a major pain in the arse.

    Like the photo touch up article, quality is preferable to quantity folks.

    0
  6. 256

    I thought this was a great article. If nothing else, it pointed out several tics that have been in my typography since being taught on an electric typewriter in the 80s. Some of these habits are really outdated on the Web.

    Don’t let the bastards grind you down, Steven!

    0
  7. 307

    Seriously, no two spaces after a period? OK, fine for web content but seeing it in actual print makes me want to beat the author with a style manual. I will not now, or EVER, stop putting two spaces at the end of each sentence. Anything else is just wrong.[space][space]Period.

    0
  8. 358

    This was a very useful post. However, if you use incorrect grammar, you are just a hypocrite by being fussy about typography. Note the difference between “only use” and “use only”. The word “only” qualifies the word that follows it.

    0
  9. 409

    re: Stephen D
    Werson, no worries, after this response, I don’t think I’d want to write another article. :(

    Don’t let the elitist snobs bother you. Regardless if there were some inconsistencies or errors you don’t see any of them publishing any helpful content on Smashing Magazine. The guys here obviously found you worthy enough to post your content, and that’s what you should care about. Not about the whining and trolling and antagonism of so-called “professionals” who only try to start trouble.

    Don’t be foolish to let some childish behavior of people ruin what you love to do. Instead of giving criticism and helpful advice they trash people. It’s immature.

    0
  10. 460

    re: brandon

    -Text transform properties might seem like a good idea at the time, but what happens when you copy and paste content and then suddenly your content isn’t in caps anymore? think about it. its just a bad idea. Same goes for special characters that don’t copy.

    Huh? It’s a CSS property. It doesn’t matter if you copy and paste anything. Whatever you put in between the item you have defined the text-transform property for will inherit the style. You don’t want it in caps anymore. Go to the CSS and take out the text-transform. Really not seeing your point here…

    0
  11. 511

    Great article!

    0
  12. 562

    Great post! (I voted “excellent.”) I disagree on the ellipsis item though. It’s a fairly common convention to use a triple period, and it works fairly well. I agree with the other items though (and I admit to being guilty of using hyphens instead of em dashes on a few occasions…).

    0
  13. 613

    I voted this article as bad. I’m sorry, but it is very misinformed.

    I’m sorry, some of these aren’t sins, or even guidelines. These are one guy’s preferences. Have you ever looked at smart quotes on a mobile phone browser? Or in a lot of CMS’? Or in an RSS aggregator? I’ll bet you nine times out of 10 they show up as entity markup instead of the quote you hoped for. Sorry: you’re stuck with inch and foot marks. Furthermore, I was mortified to do a view-source on that point, and see that either Steve or the CMS left the high-ascii smart quotes in there. They’re not even replaced with the appropriate “ and ” entities. Those characters will definitely choke most systems. Sorry, Werson, you’re just dead wrong.

    And underlining links? Since 1994 (and before in many help systems) underlined text has been a hyperlink. But Steve doesn’t like it, so its a sin.

    0
  14. 664

    “…after this response, I don’t think I’d want to write another article.”

    Well, sorry, Steve, and maybe we’re being too harsh. But once something is published on the web it gets a kind of authority, and, well: wrong is wrong. Your point regarding smart quotes is especially problematic since mobile phone browsers really just can’t handle a lot of these entities. They should, but they don’t. And here in Europe that’s a demographic you can’t afford to ignore. Its coming to North America, too.

    0
  15. 715

    Good grief. In no particular order:
    @Jeff: The only reason to use 2 spaces at the end of a sentence is in the event that a monospaced font is used. Also, using 2 spaces at the end of a sentence creates what are called rivers: A big no-no.

    @Miles:
    It is always worth using the correct typographic characters in a text. To not do so is to condone mediocrity.

    @RonnieSan and @Niobe:
    Lying and not telling the truth are one in the same.

    @Karl:
    If you don’t care about typography, why are you reading an article titled Top Ten Web Typography Sins?

    @brandon:
    They are referred to as dumb quotes for a reason. I myself would not tout my preference for something referred to as dumb. I also cannot see how having proper quotes in a text is bad. You may want to explain that.

    As for me, I like the article. It is a simple reminder of errors that are still oh so common. There are some comments here that bring up some valid criticisms. A little bit of editing will surely improve what is at its heart a good article. Don’t give up!

    0
  16. 766

    orly? notice how smashing magazine is guilty of some of these too?

    don’t preach principles which you don’t hold babes

    0
  17. 817

    i thought this was a refreshing reminder to think about how and why you write the way you do. this can often be overlooked, and as a result makes the web a sloppy place as far as writing/grammar is concerned.
    i feel that much of the over-the-top negativity is due to some designers fear that this article might win the author a computer. we all think we could do so much better? well, you had your chance and the contest is close. providing feedback is more important than insulting someone to the point where they won’t post/write again. i’m sure many, many people got something beneficial from this post, and that’s the point.

    0
  18. 868

    Absurd. That is my response. What you advocate is what breaks the web to unusable status in many ways. These special characters are not only not rendered well in many applications and devices, these add very little if any meaningful benefit. Except for someone who has penchant for this, it matters little or next to nothing for the average joe surfing the web.

    0
  19. 919

    @carl:
    So I should just give up trying to have a website with french content?

    0
  20. 970

    How about including the HTML Entities for each of these, the Alt+ command doesn’t do much good as we code our sites.

    1. Em Dash: —
    2. Ellipses …
    3. Left Double Quote: “ Right Double Quote: ”
    5.Copyright Symbol ©
    9. Accented characters. For example, o's with different accent marks: ò ó ô õ ö

    -Peter

    0
  21. 1021

    One should know theese..
    but good to have ’em listed here!

    0
  22. 1072

    Give the guy a break. All the stuff he mentions is valid for print design, I just don’t think he realized he was writing for a web audience. They’re valid rules for the print world, and a few of these are points that I’ve had to argue with the designers I work with.

    For instance, there’s no way in hell I’m going to go into HTML mode in a CMS to create proper quotes. Its just not happening. Headlines… sure, but not body copy. It’s just not worth the time (money) and will be screwed up by the client eventually.

    0
  23. 1123

    It’s would be great if so-called “smart quotes” have cross-browser compatibility, but they don’t and aren’t recognized in some email clients. Personally, I would rather have “dumb quotes” than no quotes at all.

    0
  24. 1174

    Whether to use ellipsis glyphs or periods is a matter of choice. The ellipsis glyphs often aren’t very good, not mixing well with periods and commas, and so I think periods are a better choice in general.

    Again, regarding em dashes, I favor them in print, but an en dash with surrounding space is another option, and a 3/4 em dash is another (which the “em dash” in the font may actually be, anyway). In monospace fonts a pair of hyphens might well be the best choice, though.

    Basically: use your judgment, no?

    0
  25. 1225

    Sorry to say, but this article is, simply put, pathetic. Unless you have a program that can automatically convert special characters to code, you’re just wasting your AND your employers time by not-committing-top-ten-web-typography-sins. The only one I can agree with, would be spelling out the names properly, as some people get rather picky about this sort of thing… but “dumb quotes”? More like a dumb article.

    0
  26. 1276

    You can bold text. You can italicize it. You can underline it. You can even use all caps if you really need to hammer home your point. Just don’t use more than one at the same time.

    Am I the only one to notice that he did, in fact, use both at the same time? Specifically italicizing and underlining a word. Yeesh!

    0
  27. 1327

    @Justin Lilly:
    he actually used three means of emphasis: underline, italics and colour. In this instance, I think that’s ok, he was trying to make a point…

    0
  28. 1378

    There are plenty of mistakes and some bad advice in this article but for those that argue against using the correct elements such as em dash and ellipsis, do you think the w3c standards are just personal choice too? I always use the right element for the right job, it takes no longer if you know what you’re doing and gives a professional look.
    You can prefer not to use the correct symbols, you can chose to ignore spelling and grammar – but I hope you don’t complain when bad designers ignore accessibility, w3c standards and build sites with tables and inline styling.
    In the article I would have liked to have seen en dashes explained too. These are the dashes that denote an ordinal range (between numbers).

    0
  29. 1429

    I also think dumb quotes are good, because it works cross browser, while ” will work in some browsers, but not in others.

    No web designer in his/her right mind would dare use ALT+ characters in their HTML. Print out a HTML Character Entity reference sheet and keep it handy.

    Never, never, never use alt characters in HTML or the Mac equivalents.

    You have to use the HTML entity.

    entities should always be handled with markup, never with alt+whatev_on_pc or opt+whatev_on_mac

    These special characters are not only not rendered well in many applications and devices

    Those characters will definitely choke most systems. Sorry, Werson, you’re just dead wrong.

    What decade are you guys living in?

    Browser market share (or look at any of the links on Wikipedia)

    Internet Explorer (73.81%)
    Mozilla Firefox (18.43%)
    Safari (6.14%)
    Opera (0.71%)
    Netscape (0.62%)
    Mozilla (0.11%)
    Opera Mini (0.05%)
    Konqueror (0.03%)
    Pocket Internet Explorer (0.02%)
    Other (0.08%)

    Internet Explorer, Mozilla/Firefox, Safari, Opera/Opera Mini, and Netscape all completely support UTF-8. That’s 99.92% of traffic, and I’m not even sure about the rest (WebTV?)

    As for e-mail: Microsoft Outlook, Mozilla Thunderbird, and GMail all have UTF-8 support. Is that good enough?

    It’s 2008. Every meaningful browser has UTF-8 support. Yes, you can copy, paste, e-mail do whatever you want with it. Get with the times.

    I’m not saying using entities is wrong (it really doesn’t make a difference), but there’s nothing stopping you from using Unicode characters right now. Stop feeding outdated myths.

    0
  30. 1480

    This is a pointless article. Content is the driving force on the web and usability is the next most important consideration. All items on this list of sins are too picky. None affect content and some even worsen usability.

    0
  31. 1531

    My boss at my former studio made me commit #6 time and time again, and it drove me nuts.

    0
  32. 1582

    Re: 75

    You imply spaced en dashes can replace em dashes. This is untrue. En dashes serve entirely different purpose, the most common being to indicate a range. Even then, em dashes are only spaced by hairline spaces.

    0
  33. 1633

    adelaide web design

    August 11, 2008 6:33 pm
    0
  34. 1684

    Seriously?

    0
  35. 1735

    An interesting read, though not something I would expect to win the contest. Most is common sense.

    0
  36. 1786

    Double Spacing– I just can’t let go. I blame my 5th grade typing teacher.

    0
  37. 1837

    Good. It could use correct examples following the incorrect examples. You know, for reference.

    0
  38. 1888

    No double-space between sentences, really? That’s going to be hard for me. Is there some standards or governing body that did away with this convention, and I just missed the news? Single-spacing between paragraphs really makes me a little nuts, to be honest. *sigh*

    0
  39. 1939

    Even thoug I don’t agree with point number 3- I think this is a fine article. Especialy the forst two advises. Thanks. :)

    0
  40. 1990

    Nag nag nag. Web typography is not for print, so it does not have to follow strict guidelines. It’s the same with making websites accessible to deaf / blind / disabled people: not that many people care, there is no money for it and it makes things too complicated. /ignore.

    0
  41. 2041

    The paragraph “3. Using dumb quotes” is the only one that doesn’t give advice on what the good approach would be.

    0
  42. 2092

    Note that em dashes and ellipses cause a lot of trouble with content management systems.

    0
  43. 2143

    Radomir Dopieralski

    August 12, 2008 12:02 am

    The real number 3 should be: don’t use the “smart” quotes that Microsoft Word and their ilk creates for you, these characters were invented by Microsoft and won’t work anywhere else. Use either “” or “ and ” or even better, let the browser decide what to use and use tag. Also, please don’t use ” to mean inches or seconds, there is ″ or ″ specifically for this purpose, accompanied with ′ or ′ for feet and minutes. Funny how a list of “typography sins” includes one of more annoying sins as an actual advice. Oh, and by the way, don’t write 3×5, write 3×5, pretty please.

    0
  44. 2194

    Radomir Dopieralski

    August 12, 2008 12:04 am

    Oh, and don’t make the comment form convert characters behind the user’s back when the topic of the discussion may involve precisely these characters.

    0
  45. 2245

    I like the article, but not sure about no. 7!

    0
  46. 2296

    I’m surprised by the animosity in the responses. I agree with all of the “sins” except number 7; a border-bottom under low descenders looks terrible and is not easily disseminated from the other text on the page. When you’re breaking a web convention that’s had well over 10 years to take hold, you should make sure your solution is unequivocally better than the alternative.

    As for everyone else getting so riled up about the example using Windows Alt+ combinations instead of HTML entities; you’re the ones who are wrong.

    The web is perfectly capable of handling UTF-8 content in the markup so long as the charset encoding is defined as such. You can use special characters to your heart’s content!

    God, I can’t imagine what the entity Nazis would say if they watched a Japanese/Chinese person code websites (unless you think they know their entire alphabet in Unicode Codepoints).

    For the reference of any Mac users who want to know the equivalents to the Alt+numkeys, they’re (on a US keyboard layout):
    Em dash: Shift+Opt+hyphen (en dash is without the Shift)
    Ellipsis: Opt+Semicolon
    Curly opening/left quote: Opt+[ (opening single quote is Opt+])
    Curly closing/right quote: Shift+Opt+[ (closing single quote is Shift+Opt+])
    Copyright symbol: Opt+G (Trademark is Opt+2, Registered Trademark is Opt+R)
    Diæresis-O: Opt+u, o (Press opt+u first, then type the vowel to have the diæresis applied to that letter. U stands for ümlaut, I assume)

    0
  47. 2347

    nice article, but i have diferent opinion about underlining hypertext links.

    0
  48. 2398

    I enjoyed this article: it was snappy, clear and to–the–point. One small question: why does using bracket–c–bracket not cut it in court? I thought the simple act of publishing something on the web conferred copyright.

    0
  49. 2449

    A couple more: using space instead of non-breackable space ; not using accent characters on capital letters ; not using ligatures.

    0
  50. 2500

    Correct me if I’m wrong, but the majority of this seems to focus more on grammar and etiquette, not typography. Good article though, it’s good to be called out on things you know you shouldn’t do but let yourself get away with it when you think no one else cares.

    0

↑ Back to top