Skip to content

Web Typography

posted by Eric Puidokas February 20th, 2007

When compared to print, web design is a relatively new . Many of the rules of print design end up getting thrown away because the digital medium has different contraints from it’s paper-based counterpart. But that’s not to say some of the most basic rules for print design don’t still apply to the web. The trick is realizing which rules can still be applied to create effective design.

Alignment

When done correctly, alignment can make your complicated, text-filled page appear simple. Piles of content become manageable for the user by keeping alignment consitent. The following are a few simple rules that should help you avoid some typography no-no’s.

  1. Align related lists of text

    A easy place to look for this mistake is on news sites. Look at their lists of articles. Are all of the article links aligned or do they have some images throwing off the alignment? Below are two examples from nytimes.com.

    Alignment1

  2. Push punctuation outside of alignment

    The most common place this occurs is in quotations. 37signals is known for using customer quotes to market their products. Their buzz page for Basecamp could look a lot cleaner if they moved the quotation mark outside of alignment.

    “This is an example of text that is aligned to the quotation mark.”

    Eric Puidokas

    “

    Notice how much better it looks when the quotation mark is pushed outside of alignment.”

    Eric Puidokas

  3. Only break alignment when it serves a purpose

    Alignment can be broken when you want something to stand out. This could be used in a navigation when you want to show the user which section they are currently in. It’s important to use this technique sparingly. Remember, you are breaking alignment to make one item stand out from the rest. If you have multiple items breaking alignment, your design just won’t have any alignment at all.

    Alignment 3

Those are all the typography tips I have for now. In my next post, I’ll be bringing up some of the ways that web typography varies from print. Stay tuned.

Comments

There are no comments for this post.

Post a Comment

Extra information for this entry