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

    @Kit Grose :

    Thanks for pointing this out, I was about to say the same ;-)

    It would be a nightmare to use entities for every special char we need, especially with accented languages like french or german! No to mention the puzzle when you store your content and want to search it through a database or manipulate strings with server-side scripting…

    0
  2. 102

    Mostly useful. I don’t agree with point 7. Unless you want to change basic conventions, leave the links underlined, it’s just going to look a bit weird.

    0
  3. 203

    Using character encoding is about as annoying as using Adobe Color Management, especially when it involves database collation. Such is life.

    0
  4. 304

    I liked it, cheers!

    0
  5. 405

    Great top-10 :-) First really good article in the contest, IMO – technical, not some philosophizing. I kinda disagree with #10, but it’s ok, I’ve just never found this property useful.

    0
  6. 506

    Most of these are difficult to do casually and naturally unless your text editor has autocorrect, or if this is a web-specific dev environment which can help.

    Furthermore, some of these non-standard characters get mangled across various encoding sets when input as-is, making them more discouraging to use — em dashes are a prime example. (I’ve seen that go out fine in emails, but come back as a “?” I also think Atlassian’s JIRA doesn’t have full support for those extended characters.)

    I

    0
  7. 607

    i dont know. web is web and speed is paramount. a nice display of anachronisms. like wearing a tie on sunday.

    0
  8. 708

    This isn’t typography — it’s copy editing, and to be blunt: “common standards” are as varied as the publications around the world. Though, I do still have my personal pet-peeves when it come to certain copy-edit quirks.

    0
  9. 809

    Many web design company make the mistake of using different fonts that don’t go well together. It is very important that the fonts are corresponding to one another. If you do decide to go a little wild with the font make sure you pick a font that has many different choices aside from bold and italic. If you’re working in InDesign there are many fonts that offer semi bold, book, etc. Therefore when you do go wild, your different fonts will still be in the same family.

    0
  10. 910

    The big one I do all the time is quotes mostly because I don’t care how they look . The point still comes across either way.

    If I am copying from word in to a utf-8 page I will just leave the proper quotes in. I still work on sites or emails where I don’t get to use utf 8 and rather than going through and replacing them all with special characters I prefer to just use the “.

    Big takeaway for me was using a border on a link and not text-decoration. I am going to try it out when I get a chance.

    0
  11. 1011

    I have to respectfully disagree with most of this article. We are web designers, not print typographers. Our top priority should be usability and consistency, not “looking pretty.” There are far larger issues to address with readability, such as contrast, defining sponsored content spaces, inconsistent link underlining (ahem, Smashing!) and accessible font-size coding. I can usually call out someone who was traditionally schooled in typography, because their designs break in my RSS feeds, or on my mobile devices.

    Often our designs are built for applications with user input, and those users are usually HTML-ignorant. Two examples off of the top of my head: this web form (notice I did not spend time using curly quotes), and editorial/business staff using a site administration tool. Anyone who has dealt with encoding issues, international users, and special character parsing (to remedy users who copy and paste in windows-1252 characters from Microsoft Word) knows why I might complain about the print design world invading the web design world. A bottom border is also not an underline, but a bottom border. You are making more (unnecessary) work for yourself when you change the box model display of your links, or when they wrap.

    I’ve also often seen times where three stops seems more appropriate than an ellipsis character. There has been a debate about its display in the print world, but in the web world, wouldn’t it make more sense to use something simple and clean? Even Google uses three stops in its web results.

    The capitalization line is a valid point, however. I’ve had to deal with old CMS systems where user content was converted to caps before being stored in a database. It’s always nice to have the flexibility to go back and alter the presentation, which we didn’t have with the legacy content, but you will if you control via stylesheet.

    And yes, for places where special characters are very appropriate, use entities!

    0
  12. 1112

    I did not read all of the comments, but did anyone of you mention SmartyPents? It’s a small library, that fixes some of these problems. There are implementions for other languages (python, for example) as well.

    0
  13. 1213

    Sorry, but I completely disagree with the double spacing between sentences. It just makes reading a paragraph much easier. That little period isn’t enough of an indication that a sentence is ending when the font is small. The double space gives your eyes more of a visual cue, and reading becomes much easier.

    Stick with the double space rule.

    0
  14. 1314

    I loved it. Very well thought out and informative, but I just wish that he elaborated more! That was very annoying to be left with quesitons after reading it. I rated a 4 none-the-less.

    0
  15. 1415

    Bincom ICT Solutions

    August 13, 2008 1:26 am

    Thank You! I am guilty of a couple of these errors. I’m not sure about the border line instead of underline though. I guess I will start corrections from here onwards.. Thank You once again.

    0
  16. 1516

    Terrible article. Especially the bit about underlining. You’re talking about breaking a convention of the web that’s been around nearly 20 years! This is basic usability stuff, FFS. The rest of this article is just nitpickery and nonsense.

    And I can’t believe there are people comparing this crap to accessibility and other best practices. As a disabled person, that’s beyond insulting. As a web designer, I weep for the future of our profession.

    Plus, double spacing between sentences is awesome. :-)

    0
  17. 1617

    Very nice article. The first one I’ve read in a long time that was informative and made me smile, chuckle even. Thank you Steve. I’m sorry to hear you won’t be writing more articles.

    I do have a question: when you use the em dash, do you space between the dash and the words? I’ve actually had clients tell me to “get rid of that long dash and replace it with a regular one.” Such is life.

    0
  18. 1718

    simply great

    0
  19. 1819

    I have to disagree with #7. Removing the underline from hyperlinks is an accessibility issue and using a bottom border is simply not appropriate. People who remove underlines from links are making it harder for people with visual disabilities to actually find the links, especially if you’ve used only color to indicate a link – some people with color blindness may never see your links at all.

    While I agree with most of the points here, getting all twisted out of shape over an underline on a link because it cuts the descender is ridiculous.

    0
  20. 1920

    I hate anything which doesn’t encode nicely into HTML. Weird quotes and em dashes are a no no.

    0
  21. 2021

    I like this article, but I’ve got two gripes: First, what’s wrong with double spaces after a period? I don’t care what the standard is, I think it looks better.

    Second, I’m not going to take the time to encode all the up and down quotes when a straight up quote is sufficient.

    0
  22. 2122

    When we start wiritng a page we define the language. I write in en-gb, which has accepted typography standards that differ somewhat from en-us, and noticeably from fr-ca, etc. It also means that a screen reader will garner clues as to what to expect.

    The only problem with quotation marks is browsers that don’t display the Q tag. Get over that, and we dispense with all the other disagreements, and it becomes language sensitive too. M$, are you listening? Meanwhile I use the entity codes ldquo and rdquo – it’s a pain, but they work better from a readability point of view in my opinion, as the slight directional slant even in a non-serif screen font gives the user a clue as to what’s happening.

    I’m off to have a think about how I style my hyperlinks, since it had not previously occured to me that underlining reduced the readability. (I’m not going to switch to border-bottom because of the reservations expressed by previous commenters. I also want the links to show up in print, as I primarily write for my employer’s Intranet, where users frequently print the articles to take with them when away from the office.)

    The other nine points – great. Thanks for being brave enough to weather the storm that you must have known would come (and duly has).

    0
  23. 2223

    So what are the rules regarding the following:

    #1: Do we type what’s or what’s. Which apostrophe sign do we use?

    #2: Single spacing or double spacing between two sentences. I was tough years ago that I must use double spaces between sentences.

    Nice article by the way!

    0
  24. 2324

    I’ve had my experiment with hyperlinks and done some further browsing. My conclusion is that I’ll leave the underlines in and “pave the cow path” – the slight reduction in readability is more than offset (IMHO) by the probable frustration of users hunting or straining to find links.

    I decided against the border-bottom method because I found it bumped into the ascenders on the line below with links in paragraphs.

    I guess that an icon after each link would be an option (and there are plenty of methods for styling them), but I’m not going to bother for now, since I’ve already got one specific icon for external links. Also, any pages with lots of links would look like the page has measles!

    0
  25. 2425

    Yes, entities for accented characters is crap. Just go UTF-8 an be done with it.

    0
  26. 2526

    Number 7—crap. Please delete this tip! thx

    0
  27. 2627

    It’s a pitty to see so many people that do not agree to established terms of typography. Especially those people that probably call themselve “designers”. The web is like print a medium where the most usage is reading. Coming along to pronounce that all the good things in print are senseless in web is ignorant and pathetic. So called designers that don’t have the sensitiveness for good, readable content with all the stuff that good typography can deliver, are no designers.
    Complaining about the usage of correct encoded glyphs instead of entities is also absolutly hilarious. Why do you think intelligent people developed UTF-8? You have problems using UTF-8? Probably it’s not the problem of UTF-8 but a tool you’re using?
    Think about that … Think about the term “typography”, its rules, its usage. When you understood it, come back and think about your first statement.

    But indeed, #7 is very obscure.

    0
  28. 2728

    @Michael Risser (Comment #9):

    Naming the classes by their look doesn’t make it any better.

    .uppercase {
    text-transform:uppercase;
    }

    may be in 10 days (Clients are like this sometimes :-) )
    .uppercase {
    text-transform:lowercase;
    }

    in my opinion it would be better like this:
    .important {
    text-transform:uppercase;
    }

    or something similar which explains the function of the class.

    0
  29. 2829

    This is a guest author contest article and not a Smash Mag author article. The author is given the opportunity to voice his or her opinions. Kind of like what I will do here. I don’t like the border bottom for links. I think, if you don’t want to dice up your descenders, omit the underline and use colored text.

    0
  30. 2930

    Cruise control for cool reference = instant win. Good article for those who don’t know these basically essential rules!

    0
  31. 3031

    It’s obvious that with some of them, Stephen D has been really struggling to fill up the required 10 points.

    0
  32. 3132

    I recongnize some of this tips from Ellen Lupton’s Thinking with Type (http://www.papress.com/thinkingwithtype/).
    How hard is to give some credit?

    Also reading a book instead of a google search sometimes can be good for you.

    0
  33. 3233

    Great article! Although I have to admit I have faked the copyright thingy a lot in the past :P

    0
  34. 3334

    hmm first year graphic art college class stuff, if I can recall
    the mac in not a typewriter book covered this. I suppose these
    days lots of people do not go to school and just jump right in.

    0
  35. 3435

    #7 is absolutely wrong! The rest is so so

    0
  36. 3536

    Yes, Max that’s what I was saying (#46). #7 is total BS!

    0
  37. 3637

    Shapes of Sweetness

    December 1, 2008 2:50 am

    Sweet post. I’ve gotta stop making web typographic sins.

    0
  38. 3738

    If you can tell me WHY I should use an em dash (which is more effort than a hyphen), an elipsis (which is more effort than typing three full-stops) or use “proper” quotes instead of dumb quotes (which is, again, much more effort) then perhaps I’ll take you seriously, but instead your article simply reads like a list of complaints with no explanations given for why any of these things are bad.

    Until you can explain otherwise I will continue to commit these ‘faux pas’ because, frankly, I see nothing wrong with them.

    0

↑ Back to top