A Capital Idea: Setting the Record Straight on Capitalization Online

by Brooke Marshall — Feb 23, 2009

American English grammar is fraught with peril, filled with constructions, conventions, and exceptions seemingly designed to trip you up. Is it who or whom, further or farther, lie or lay? Should you use which or that, however or while, i.e. or e.g.? And let's not forget about more intimidating mistakes, the ones that sound like Spanish Inquisition-era torture devices (split infinitive, comma splice) or gross bodily functions (dangling participle, double copula).

Even capital letters are complicated. Just throw 'em at the beginning of every sentence and use them with proper nouns, right? Yeah, right. Don't let capitalization fool you — it's just as fickle and prone to exception as commas, hyphens, and the past participle of irregular verbs. Marketing types use capitalization as An Attention-Grabbing Device. Formal titles get capitalized in some instances but not others. And don't even get me started on the many different ways to capitalize a headline.

Looming over all this is the simple truth that capitalization is one of those things that can make the difference between a mediocre Website and a good one. Even a sound layout and solid content can easily be undermined by careless — or even just inconsistent — capitalization. Like everything else on your Website, your capitalization should serve a purpose, matching your message and intent while giving the impression of professionalism. The best Web designers know that no detail is too small, and that's why the best-designed Websites have consistent, correct capitalization.

And what exactly constitutes correct capitalization? I thought you’d never ask:

  • Capitalize the first word of every sentence. This includes complete sentences within parentheses.
  • Capitalize proper nouns (e.g. Brooke Marshall, Vermont, Boston University).
  • Adhere to the capitalization in proper nouns, even if it doesn’t follow typical conventions (iPod, CoffeeCup Software, MySQL).
  • Capitalize common nouns such as north, river, and street if they’re a part of a proper name (e.g. North Carolina, Chattahoochee River, Main Street). Don’t capitalize these nouns if they aren't being used as part of the proper name or if you’re using one common noun with two proper names. (E.g. Visit the Chattahoochee if you're into swimming, because the river is calm and warm. The Winooski and Lamoille rivers are better suited for rafting.)
  • Treat commonly understood nicknames the same as the proper names they stand for — that is, capitalize them (e.g. the Big Easy, the Badlands, the Series).
  • Capitalize the principle words in the names of composition titles, like publications, books, works of art, movies, songs, TV shows, articles, etc. This usually means words with four or more letters, verbs, and the first and last word, although other important words may be capitalized (e.g. “World of Warcraft,” The Catcher in the Rye, “Avenue Q,” “Deal or No Deal”).
  • Capitalize formal titles only if you want them to be read all as one name (e.g. President Barack Obama, Vice President Joe Biden; but Barack Obama, who is the president, and his vice president, Joe Biden, work in the White House).
  • Unless you’re writing poetry, there is absolutely no grammatical reason to capitalize words not described in the previous points. There is some marketing value to capitalizing words for emphasis, but this practice is generally seen as sloppy or amateurish, and can even be interpreted as untrustworthy. Hype may sell, but it can also undercut your reputation, making you seem like a sleazy carnival barker instead of a serious Web designer. Rather than using capitalization, consider using other ways to draw attention to your text, such as color, size, and style.

Keep in mind that these are only the basics. For more information about capitalization, as well as other aspects of grammar, I’d recommend picking up copies of The Associated Press Stylebook, Read Me First! A Style Guide for the Computer Industry, and The Merriam-Webster Dictionary. There are other similar resources, but these are the cream of the crop. The AP Stylebook represents the standard in the newspaper and magazine industry; Read Me First! is an authoritative guide to the unique grammar questions that arise when dealing with software and the Internet; and Merriam-Webster is a trusted resource in the print and publishing world.

Most publications also keep a personal style guide that covers common errors they encounter that may not appear in a broader guide like The AP Stylebook, as well as what to do in situations where there are no hard-and-fast rules. If you haven’t already, it's definitely worth compiling one of your own.

Now that I've covered the rules of how to properly use capitalization, let’s look at different ways to break them. After all, any good artist knows that rules exist to be broken, and that the coolest effects can be achieved by subverting the system.

ALL CAPS

All caps get a bad rap. Sure, they’re the textual equivalent of yelling in a person's face, but if used with a little finesse and consistency, they can gracefully draw a reader's attention to certain page elements. Here are a few examples of how to use all caps to your advantage:

This American Life

This American Life homepage

The site uses caps in its headers and menu to distinguish it from the rest of the page text. And because there's plenty of padding around the text in caps, it's easy on the eyes.

Giant Creative

Giant Creative homepage

The chunky lettering works with all caps because it's going for visual, rather than literary, effect. In the case of larger blocks of text, however, this site reverts to the normal rules of capitalization.

You do have to be careful with this technique. Although many sites have achieved a tasteful effect with all caps, some take it too far. FOX News features a front-page graphic overlaid with text, usually with disastrous effects, as this compilation page illustrates.

Inflammatory FOX News headlines

The use of caps for inflammatory phrases like "UNDERAGE DINO SEX" and "ARMY OF TERROR" is sleazy, sensational, and totally tacky.

all lowercase

Lowercase letters wear a lot of hats. They can present a funky alternative to regular text, transform less important words into attractive highlights, or communicate a demure loveliness. As an added bonus, because most of the text we read is in lowercase letters, it's really easy to read.

Craigslist

Craigslist homepage

Craigslist's consistent use of lowercase letters works well with the minimalist, no-frills philosophy of the site.

Inspiration Bit

Inspiration Bit homepage

Inspiration Bit’s use of a chunky font and fun colors helps its lowercase headings stand out.

The Darling Tree

The Darling Tree homepage

The overall effect of lowercase font here is one of modest beauty.

Vito Lourenco Vito Lourenco homepage

Lowercase letters give this site a simple, elegant feel.

Design Sponge

Design Sponge homepage

Here's another sophisticated, artistic use of lowercase letters.

By the Book

Just because breaking traditional rules of capitalization can yield interesting and exciting results doesn't necessarily mean that using proper capitalization looks bad. On the contrary, adhering to the rules can actually make your site look tasteful and professional. In addition, drawing attention away from the artistic value of the text can place more emphasis on its meaning.

Apple Apple iPhone page

You really can't go wrong with Apple. The text on this page is clean, tasteful, and professional.

Vann’s Spices

Vann's Spices homepage

This site keeps its properly capitalized text from being boring by mixing it up with different font sizes and slight smudging.

Best of All Worlds

By incorporating all caps, lowercase letters, and properly formatted capitalization, you can achieve a mixture of any of the effects we’ve seen thus far.

Whitehouse.gov

White House homepage

Whitehouse.gov got a much-needed makeover when Barack Obama assumed the presidency. Putting "the" in lowercase italics adds a touch of elegance that ties in nicely with the powerful use of all caps in other, more important words, such as "administration" and "government."

MacAllan Ridge MacAllan Ridge homepage

This Website utilizes a similar strategy, but its choice of font makes the caps look graceful and stately instead of authoritative.

FortySeven Media FortySeven Media homepages

This site takes the trend we've seen thus far and flips it on its head. The name of the company is in lowercase letters, whereas the subhead is in big, blocky caps. This exudes an edgy, creative attitude.

Singularity Concepts Singularity Concepts homepage

Another site using lowercase letters for important text and uppercase letters as accents.

Developing Your Own Style

When it comes to using capitalization for stylistic purposes, it's all about making sure your use of capital and lowercase letters reflects your Website's message and mission. All caps command attention; lowercase letters are edgy and exciting; a mixture of the two yields tons of possibilities, from the sleek and sophisticated to the edgy and experimental. Do keep in mind that consistency is key. If it looks like you've chosen at random whether to use capital or lowercase letters, the overall effect will be confusing and unprofessional — in other words, a capital offense.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float