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.

Advertising
  1. 1

    how many finalist do you have?
    anyway, nice one Steven D.

    0
  2. 2

    Entities are IMO better idea, for example: ©

    0
  3. 3

    The first really cool article to come from the competition. Granted a lot of it is well known by now but it’s a good round up. Bravo

    0
  4. 4

    Good tips for anyone to follow.

    0
  5. 5

    Guilty of a few of these- namely 2(ellipses), 7(underlining), and 9(ignoring accent characters).

    Great article.

    0
  6. 6

    It’s strange: the article mentions to border links instead underlining them, but Smashing Magazine doesn’t keep with it.

    0
  7. 7

    entities and mac equivalents. or is the idea of opt+g too hard for ©? :P

    0
  8. 8

    The last 2 items are saying what you should do, not what you shouldn’t (like the other 8). It really confuses the flow of the article.

    0
  9. 9

    Great tips. And to help out the lazy among us :) here are a few CSS classes:

    .lowercase {
    text-transform: lowercase;
    }
    .underline {
    border-bottom: 1px solid #000;
    }
    .uppercase {
    text-transform: uppercase;
    }

    I’m hoping to see more like this. Great job.

    0
  10. 10

    Ellipses… are immediately after the word, 3 periods and followed by a space before the next word. Not……. and just random periods.

    Whereas em dashes have no spacing on either side.

    0
  11. 11

    NaldzGraphics.com

    August 11, 2008 7:48 am

    Awesome tips.its very useful.thanks a lot.im learning this one

    0
  12. 12

    what a aload of common sense. This is webdesigner level 1 stuff.

    0
  13. 13

    I don’t want to give up the double space after the period. I don’t care if it’s wrong. Just can’t do it.

    0
  14. 14

    it sucks a lil’ bit

    0
  15. 15

    I think the underlining issue is too slight to be really called a “sin.” More of a small nicety that could make your copy look marginally better. Personally, I’m just happy when people bother to underline links at all these days.

    0
  16. 16

    Although I agree on the readability issues of #7 (underlining), using border-bottom instead text-decoration:underline for links requires a bit of care: that extra border pixel may be just the thing to push objects down or around around and wreck a layout. Reducing the padding-bottom to compensate might make up for it, but not always, and it might be impractical if you’ve set up an em-based typographic baseline.

    0
  17. 17

    WORST. ARTICLE. EVER.

    -7 is a good tip
    -Better than 5 would be to just type out copyright
    -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.
    -If anyone ever handed me website content with normal quotes (not “dumb” quotes) then I would either make them change the content to dumb quotes or dump them as a client, or maybe just disembowel them.

    0
  18. 19

    Isn’t character mapping only good on PCs?

    Where I come from we use

    ©

    and the likes.

    I also think dumb quotes are good, because it works cross browser, while


    "

    will work in some browsers, but not in others.

    Also, does photoshop fonts really matter, we’re dealing with web typography, your fonts don’t matter.

    0
  19. 20

    hmm, my code blocks didn’t work

    0
  20. 21

    Oh my, even though I know of most of these points, I don’t stick to them all the time. I feel so ashamed… what a terrible, terrible inconsiderate web designer I am… :o

    0
  21. 22

    See if I care… Especially regarding 2. and 3. This is so pointless. Fanatic typography designers forcing the world to comply.

    0
  22. 23

    Please do not

    0
  23. 24

    Great article … except for #7.

    0
  24. 25

    Sorry. Missed a closing bracket.

    Please do not use underlining for emphasis on the web. People assume underlined words are links, and get frustrated when nothing happens after clicking on them.

    Regarding ellipses, the Canadian Press Style Guide says to use three spaced periods. That’s good enough for me. Emphasis on “spaced” though.

    Oh, and they’re “primes” not “dumb quotes”.

    Re #10. Em dashes are spaceless only in the US.

    0
  25. 26

    Some of these are more of annoyances than sins. I agree with Karl about 2 and 3. In 6, you should never underline your text unless it is a link. That’s the biggest sin of all!

    0
  26. 27

    Lasse Rintakumpu

    August 11, 2008 8:10 am

    In his 2007 article on hyperlinks (http://www.thinkvitamin.com/features/design/dont-be-the-weakest-link) Paul Boag argues against the use of bottom border instead of underlines (#7). Many of his points have since lost their edge (mainly because of new browser versions), but I think that some of the arguments are still sound.

    0
  27. 28

    Forgot to mention, numbers 9 and 10 aren’t consistent with the rest of the list. The descriptions suggest that you should follow them, and not that they are sins!

    0
  28. 29

    Ummm. . .

    If these are the “Top Ten Web Typography Sins,” then why don’t your solutions involve using HTML Character Entities instead of Windows ALT+ characters?

    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.

    0
  29. 30

    Excellent post!
    Even if I’m French and we do not use exactly the same rules, you’re so right.

    Joffrey,
    Geek and Hype

    0
  30. 31

    I enjoyed the article, but I disagree with the point about the makeshift copyright not cutting it in court. Since around 1989, works are automatically copyrighted, without the need for a notice. It is effectively irrelevant from a legal standpoint whether or not you use a makeshift copyright symbol, because the copyright statement only serves to notify others of the copyright. This provides protection from the “innocent infringement” defense in court, and the makeshift symbol can serve just as well as the real symbol in that regard.
    Source

    0
  31. 32

    I’m figting this owful sins for a long time. Thanks for support. :)

    0
  32. 33

    Kim,

    Either “dumb quote” or “prime” is acceptable, depending on context. When used as an indication of measure, yes, it’s a prime mark, but when used in markup, they’re dumb quotes. Valid criticism, though, I should have pointed out the distinction.

    Y’know, after seeing the reactions the other entries have gotten, I actually told my girlfriend this morning how happy I was that I wasn’t a finalist; at least my writing wouldn’t be ripped to shreds on the most popular web design blog on the planet. Then it turns out they just aren’t notifying finalists… here I thought I’d dodged a bullet. ;)

    0
  33. 34

    Actually, – is not a minus. Minus (−) is as bit wider and has the same width as the + sign and all digits (though it can be different in some fonts).

    0
  34. 35

    Good rules to follow. Maybe it’s just me but if you do not already know these rules then you are probably not a very good designer.

    I would have like to have seen some sort of image representing the overall theme of your article and headline. Maybe something with a devil image or the like.

    0
  35. 36

    No.1 should be use UTF and never quote Windows ALT+ characters when talking about the web.

    Obviously the author never worked on a site outside of the USA.

    0
  36. 37

    So using underline is OK for emphasis but makes hypertext links harder to read?
    Can you explain this to me? =]

    0
  37. 38

    Though those classes will save you the trouble of rewriting the whole title, you’ll still have to go through all your pages and switch the class if you ever want to change your design. You should instead have a class of “title” and have that text-transformed. that way, you’ll only have to change one thing in your CSS as opposed to the HTML on #unknown number# of pages.

    0
  38. 39

    This is a horrible article. Never, never, never use alt characters in HTML or the Mac equivalents. This mistake essentially ruins the whole article, because since you can’t do that, it’s almost always way too much work to put in curly quotes or real ellipses because you have to use the HTML entity. Some software will automatically convert straight quotes (etc.) to their proper versions, and that’s great. But if you don’t have software for that, it’s not worth it.

    Also, primes are a different thing than straight (or “dumb”) quotes. It’s a completely different character.

    The tip about not underlining links is moronic. Underlining looks the way it does on purpose, and the Photoshopped picture here has an extra white stroke around it to make it look much worse than it actually does.

    It’s preferable to use real italics if you have them, but Photoshop’s fake italics will, if anything, work way better on the web than in print. (Notably, you can’t save to a PDF in PS with fake italics intact.)

    Bad, bad, bad, bad article. Even though there are some truths in it, it’s sprinkled with so much bad advice that it’s ruined and would hopelessly confuse someone who didn’t know better.

    0
  39. 40

    @Steven D.

    It isn’t that your writing is bad, its just a lot of the things you highlight as typography sins go against what most of us consider best practices. I would guess that you probably do a lot of design and not a lot of markup, like you pass a photoshop file on to someone else to code.

    I think a lot of people on here are like myself, we design and do the markup. You look at something and probably put more weight into the design while I will usually shy away from a design element if I feel like it hurts usability, accessibility, or compatibility.

    Like #8, how is that relevant to web typography? Faux-italics, or faux-bold for a photoshop document, or formatted quotes in that same document aren’t translated to the web. We use styling for that stuff, and the fonts come from your users computer.

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

    0
  40. 41

    GAH!!!
    That was supposed to be a reply to comment #9 Michael Risser.

    @Smashing Magazine
    Why oh why is there a “Comment” link in every comment box? That implies that I get to reply to that comment.

    0
  41. 42

    Nice article Steven. I agree with some of the criticisms (would be nice to have the mac shortcuts), but I think a lot of them are unfounded or just plain stupid, don’t let them get under your skin.

    @ people who think best practices, standards, and conventions are “pointless”, you might want to consider changing professions. Maybe you could be an inventor! You could invent a time machine so you could go back and design websites in the 90s!

    0
  42. 43

    I’m going to stick with my “dumb” quotes. I already have to take the time to convert them from the dreaded and evil microsoft word quotes.

    0
  43. 44

    One follow-up to my comment: the mac shortcuts would be nice to have for prototyping in photoshop (or whatever you use), and definitely should not be used in markup. I think the extra work of adding in the HTML for quotes ("), ampersands &amp, and ellipsis is well worth the time.

    I agree with Jason (#39) on his points.

    0
  44. 45

    My code tags got jacked in my previous post, but you get the idea.

    0
  45. 46

    Tsahi Levent-Levi

    August 11, 2008 9:09 am

    The use of special characters for dumb quotes and ellipses make a mess for me when I show it on IE, but not on Firefox.
    I am doing that on a Hebrew based PC but for an English post. Is there any way to fix it?

    0
  46. 47

    How did you arrive at #7: Underlining your hypertext links?

    Since when can you change the underline color (without using border-bottom) to make it different from the text color? If the underline and text are the same color then how can you tell if the underline is below or above descenders in your typeface? You can’t change the underline color, hense you can’t see if the underline is above or below descenders in your typeface!

    0
  47. 48

    Embarrassing!!

    To those pointing out that I used ASCII symbols instead of entities, you’re absolutely right, that’s a mistake. I sent in a draft copy of the article by mistake. I’ve asked Sven if I can send in a revised copy of the article, and hopefully he can get that corrected for me.

    0
  48. 49

    Prime mark is U+2032, and is a different character from the straight apostrophe (U+0027). Learn what you’re talking about before you write an article like this.

    I don’t know what people are talking about with regards to “ALT characters on the Web”. Using ALT codes on Windows produces a UTF-8 character which can be safely included in documents. HTML entity references are an old hack we don’t need anymore. If they cause problems, it’s because you’re using old/crappy software.

    0
  49. 50

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

    0
  50. 51

    aai entidade a parada ficou fritante..
    C.V
    R.L

    0

↑ Back to top