Typography Matters: Typeface edition
This lesson is brought to you by the letter "T" for typeface, and is all about making a case for effective typography.
You might already be asking yourself, "what is typography?" Ask no more! Typography is the technique of arranging and styling type to make words visible. That's the old school definition, but what it really means is choosing the style of font, line length, letter size and shape, and spacing in between letters and words. All of these things add up to determine how vibrant and prevalent words appear on various backgrounds.
Typography became prominent in the origins of printed text. It started with Egyptian writing on papyrus, evolved to its common use on printed paper, and arrived in the virtual world of the text on the Internet. Typography arose from the handwritten word, but became universally used in printed text over time. You can find countless examples from the past in newspapers, billboards, and even food logos.
What and where is typography now? Typography's more dynamic and creative than ever before. It's used in all printed and typed work to brand, entice, and excite people. How does this relate to a person or company online? If you want to have a top echelon website, then you have to choose the best typographic style for your website content.
How can typeface make or break a website? There are three basic reasons why typeface matters: 1) it brings the text to life; 2) it compliments the content of a message, and 3) it conveys certain feeling to the reader.
1. Typeface should make text readable, usable, and digestible
The typeface you choose for your website determines its readability and usability, plus, it helps the reader retain crucial information. If people have to struggle to read the text on a website, they likely won't be on that site for long.
Check out these two pieces of text.

See how the Jenkins v2.0 is difficult to read and is not aesthetically pleasing to the eye? In technical typography talk, this is referred to as having poor readability and usability. This style of font will discourage people from attempting to read the piece, and will likely motivate them to find a different website that has higher readability and usability. Fortunately, the Jenkins v2.0 is not readily available for writing on the web, so designers can avoid using it. Contrasted with the Arial & Arial Round text, the one on the Arial is far easier to read. Arial & Arial Round uses clean and simple font. It's readable, usable, and helps readers retain information. Searching for a font like Arial & Arial Round is not difficult, as it's readily available for users on the web.
If you simply want to inform your readers and display data, such as a legal disclaimer, then an expressionless font might be appropriate. If it's an opinionated blog, then you'll want to choose typography that engages readers and encourages them to become engrossed with the entire text. Whether you're lessening or raising the importance of text, typeface is a major factor in controlling your reader's ability to read and absorb the information your website provides.
2. It's not what you said, it's how you wrote it
On many websites, the content of a piece of writing isn't supported by the choice of typeface used. A serious message can be misconstrued as sarcastic or vice-versa if the typeface doesn't align with the tone of the message.
Look at these two pieces of text. See how each portrays a different tone to the reader.

The Curlz MT is frilly and playful, whereas the Trebuchet MS is neutral and more appropriate for serious messages. The Curlz MT should be more universally used in writing on the web, and the Trebuchet one sparsely used for very specific types of writing. The Curlz style should be used for things that are personal and informal, like a quote or a caption for a photo on a blog. The Trebuchet style could be used in writing that is more formal and impersonal, like information about medical news or clothing sales promotions.
If there is conflict between content and tone portrayed by the typeface it may confuse the reader. Think of a serious obituary written in a frilly style.
Text on the web is as much about the content of a message as it is about presentation of that content. If a message is supposed to be light-hearted, then the typography should be light-hearted. The tone of a message is essential because in most cases, it's not what you say, it's how it comes across.
3. Readers should be hooked on a feeling, as long as it's the right one
The previous two reasons that typeface matters relate to how they effect the text and how the text is received by readers. The third, and arguably most important reason typeface matters, is that it embodies and reflects the brand of the website it's on.
The first impression people will form when they visit your website will be based on the images and text used. As many people can attest to, it's very difficult to change a first impression.
Compare the different impressions of these two pieces of text.

While both styles are readable and usable, they say different things about the person or organization that uses them on their website. The Klavikal style is more artistic, and might be seen on a graphic design gallery site; whereas the Helvetica Neue gives off a corporate feel, and would be seen on an oil and gas company's site.
Simply looking at the text say tells a lot about the brand of a site. This includes the headers, titles, logos, and bodies of text used. Every typography choice you make reflects the brand of your website. If your site is about tax returns, you'll want to use neutral and plain typography. If your site is about children's toys, you'll want to use vivid and slightly frilly typography styles. The motto is ‘the right type for the right site'.
There you have it!
Typeface is a powerful tool that can make or break your website. Used correctly, it can deliver messages in a lively and appropriate tone. It personifies who you are and what you want to say. So when creating and writing for your website, remember that typography matters, especially typeface.
Posted by: on March 21, 2012 at 7:35 pm
Want to submit a tutorial? Awesome! E-mail smile@fotolia.com