World Wildlife Fund: Simple professionalism

The Internet has seen many changes since its inception. Today, especially, it seems like many websites are focused on including as many elements as possible. It’s nice to know then that one thing has remand simple: typography. Obviously the major reason behind this is readability. Information becomes useless if the type is too small or the background color doesn’t provide enough contrast. I looked at a portion of the World Wildlife Fund’s website and found the typography was simple, yet had important details to set it apart.

Overview

This screen grab is the first text you see on the page about tigers. It uses a typical sans serif font, in this case Helvetica. All the section headers and the subheads are uppercase; this provides consistency and creates a clear hierarchy of information on the page. Color is used for emphasis but otherwise there is a high contrast between the background and the text color. The amount of leading is neither too much nor too little which also contributes to the readability of the text. Another detail worth noting is the drop shadow of the section headers. This subtle addition adds dimensionality. For the most part, the text is also placed in columns which is familiar to users and easier to read than a page wide sentence.

Black background
Further down the page, the background color switches to black. Luckily there is still enough contrast with the white and red type to read the text easily.

My only hesitation with the type is its size. Section headers are 48 px and though I could not find the exact measurement of the paragraph text, it’s probably around 12 px. I think the website designers could have afforded to increase these sizes but wanted to let the pictures lead (the image above is just “below the fold” after a large picture). Also these sizes are fairly typical of business documents. By following this style, users know the information is serious. The muted color palette and otherwise no-frill typography and text design also convey professionalism.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s