Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

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

Top Ten Web Typography Sins

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 Link

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 Link

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 Link

  1. 1
SmashingConf Barcelona 2016

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

↑ Back to top Tweet itShare on Facebook


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

  1. 1

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

  2. 2

    Entities are IMO better idea, for example: ©

  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

  4. 4

    Good tips for anyone to follow.

  5. 5

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

    Great article.

  6. 6

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

  7. 7

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

  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.

  9. 9

    Michael Risser

    August 11, 2008 7:42 am

    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.

  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.

  11. 11

    August 11, 2008 7:48 am

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

  12. 12

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

  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.

  14. 14

    it sucks a lil’ bit

  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.

  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.

  17. 17


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

  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.

  19. 20

    hmm, my code blocks didn’t work

  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


↑ Back to top