Web capitalization?

In web design, you have to deal how to treat headers, field names and links within a form. I seem to struggle with it everyday. The question always comes down to how I should apply  capitalization?  From example, in a simple form where a user has to fill out basic personal information (first, last, email,…) can be treated in a number of different ways.

Example 1 – Capitalize first letter of first word only

Your information

First name:

Last name:

Email address:

Work phone:

Cell phone:

I like this approach the best because it’s more conversational. Almost as if you are reading a book.


Example 2 – Capitalize first letter of all words

Your Information

First Name:

Last Name:

Email Address:

Work Phone:

Cell Phone:

I like this approach less because the capitalization on every first letter interferes which readability. Each word is given the same weight.


Example 3 – Capitalize all letters

YOUR INFORMATION

FIRST NAME:

LAST NAME:

EMAIL ADDRESS:

WORK PHONE:

CELL PHONE:

I really don’t like all-caps. The readability is terrible. There is no flow. Every letter has the same weight.
The capitalization style also poses problems for action hyperlinks.

Example 1: Add new category

Example 2: Add New Category

Example 3: ADD NEW CATEGORY

There are rules around this from a print aspect (The Chicago Manual of Style), but they don’t take interaction into consideration. Is there a good guide out there? Currently it seems to be all over the board.

This entry was posted on Thursday, September 24th, 2009 at 7:15 am and is filed under user experience. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  1. graham says:
    September 24, 2009 at 11:04 am

    My rule: use sentence case. If there is a proper noun (ex. Mt Rushmore), then capitalize it.

  2. chance says:
    September 24, 2009 at 11:28 am

    That’s the same rule I’ve been using. I still go back and forth with action type hyperlinks which need to call attention, but not too much attention (like the example “Add new category”). This is where you have to apply color and/or font weight. Another decision I can never get right in my head?

  3. Michael McWatters says:
    October 2, 2009 at 7:25 pm

    I prefer initial caps, so each word is easier to read as label. Scan this list and tell me which is easier to read:

    First name:
    Last name:
    Phone number:
    Street address:

    or

    First Name:
    Last Name
    Phone Number:
    Street Address:

  1. There are no trackbacks for this post yet.

Leave a Reply