Top Ten Web Typographic Sins

By Steven D.
August 11th, 2008

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

left

The element floats to the left

right

The element floats the right

none

The element is not floated, and will be displayed just where it occurs in the text. This is default

inherit

Specifies that the value of the float property should be inherited from the parent element

absolute

Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties

fixed

Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties

relative

Generates a relatively positioned element, positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position

static

Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations)

inherit

Specifies that the value of the position property should be inherited from the parent element

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.

a list logo
"Going to Print"
with CSS design.

Valid XHTML 1.0!

Valid CSS!

W3C XHTML validation page

W3C CSS Validation Page



Class Project Home