Visual Design - Typography

In my previous blog-post I explained I am blogging all through the summer about Visual (Web)Design. This is part 2, where we'll focus on typography.

Typography

According to Wikipedia typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. I feel typography is not often valued correctly. Typograpy is one of the key aspects to Visual Design. It helps in setting an emotion, when done well it helps in brand recognition. Looking at webdesign there are more things to take into consideration.

Emotion

Typography sets an emotion. Often people frown when I say this, but showing one particular font helps explain my message. Yes, I am using Comic Sans in this blog post!



Which of the two words above looks more important? When you're using Comic Sans for the word 'help' I wonder how many people see the urgency of your request. When using the Impact font (especially in all-caps) it looks more important. So you see, the font helps set an emotion and can motivate your viewer into action-mode. I think the most famous example of this is the picture below.

Brand Recognition

When fonts are made specifically for a brand or a font is well chosen it helps in brand recognition. You don't always need to see the logo to understand who is communicating with you. For instance, the Coca Cola font (Loki) is so famous for Coca Cola, that you will think of Coca Cola even when I type Pepsi Cola with the font.



Just take a look at the image above. I've written Pepsi Cola - but surely you had to think about Coca Cola. The other word 'Jumbo' is a Dutch supermarket, but I've written the name with the Albert Heijn (Hamburg) font. This isn't as clear an example maybe, but people who know both supermarkets will feel something isn't right here. Choosing a proper font for a brand is very important!

Web

Before this post turns into a very big story about everything there is to fonts and how to choose one - let's move to the web. There are various things to consider when using fonts in your visual webdesign, such as the Golden Ratio, Typographic Grid, amount of fonts and loading/fallback.

The Golden Ratio

When you're designing for the web its a safe bet to imagine no-one will read your text. People scan pages to find information they find interesting and then read just what interests them. For a designer this means you have to think about your headers. Help your viewer with scanning the webpage(s). Be consistent and correct in your headers.



For me personally I feel the Golden Ratio, pictured above, works really well. Basically there's a mathematical principle in the ratio of your text. The relation from your H1 to your H2, H3, H4, H5 and even body text should follow the mathematical principle. This golden ratio works well because it helps your visitor to define which information is most important and which information might be slightly less important.

Typographic Grid

One of those things that really annoys me is when the whitespace on websites isn't consistent. Often this is down to programming (paddings vs margins, etc.). I always try to deliver websites following a typographic grid. This results in even spacing and helps your audience in scanning the page.



The image above shows a website where no typographic grid has been followed. The whitespace varies constantly - resulting in a cluttered website (to the trained eye). Its not necessarily easy to scan. This is a common issue which you'll find on many websites. To show the difference when it is placed on a typographic grid, here's the image with a proper grid:

Amount of fonts

When working for the web its important not to have an overkill on fonts. Fonts have to be loaded. Now imagine someone using his mobile phone on a train where the connection isn't too stable. You don't want this person to first have to download 2MB in fonts before a website is shown. There are various options to use fonts.

One is to limit the amount of fonts. Use 1 or 2 fonts in your webdesign. Another is to use fonts that are available on every system so they won't have to be loaded. But having a website in Arial isn't good enough for the big brands. A third option is progressive enhancement. Use fallback fonts that are available on all systems and enhance them when the bandwidth allows you to. The website loads really fast and gets better when its possible.

Readability

Choosing a font for the web isn't always an easy thing. As mentioned above we don't all want to use the same font for every website. Selecting a great font, which reads well online, takes time if you want to deviate from the standards.



The image above sums it up for me. The spacing in the font is off. Sometimes the letters are close together, sometimes they are a bit apart. Some lines are too close together vertically, while other are too far apart (remember the typographic grid?). Big companies often have styling guidelines which were developed for offline use. Translating fonts from offline to online often isn't advised as people read from a screen differently.

Summary

I've tried to show a few of the big issues on typography. Obviously there's way more to it. I haven't even dived into Serif or Sans Serif, how letters are built or any more technical information. The history of typography is old and I haven't really touched that either. I'm hoping this article is telling you to care about typography.

Typography is a joy and sometimes a curse. But when you get it right, its awesome! And although people won't notice - because great things go unnoticed - other designers will. And in user testing you'll feel great when you notice people find their way thanks to your choices in typography.

Thanks for reading and be sure to check my blog next week when we'll dive into the third part of my summer blogs on design: shapes.

All the best,
Corné