Well set typography guides the reader through the content on a particular page, website or poster, drawing their attention to key messages before leading them through the full content. To do this, the hierarchy needs to be decided upon, and then used as the basis of the typesetting. The key messages must be the first elements to grab attention. This does not necessarily mean it must be the biggest - it can be as simple as a different colour, typeface or weight which makes this stand out.

To keep the hierarchy clean and effective, we try to stick the basic rule of using no more than three or four typefaces or fonts at any one time. Of course, these rules are made to be broken when necessary and possible to create beautiful design. (You might be interested to know the subtle difference between a typeface and a font. A typeface refers to the overall design of the letters; a family such as Helvetica or Garamond, while a font describes a typeface in a particular size and weight e.g Helvetica Bold, 12pt. This comes from the days of printing using metal blocks, where printers would have to layout each individual letter to print!)

As we move further into the digital age, the choice and legibility of web fonts is becoming increasingly important in the design of websites. The choice of fonts available is growing, thanks to font services such as Google Fonts and Adobe Typekit, allowing us to select from hundreds of different typefaces. Where previously the typeface used on a website would quite often differ to that used in printed literature for a company, we are now able to select fonts during the brand development stage, which will appear consistently across all material both printed and digital. However, we must still consider the legibility of these when designing the website. Individual fonts can vary between different browsers and a key part of the design and testing process now is looking at how fonts appear across the different browsers, on different operating systems and devices. 

While a sans serif typeface is usually the obvious choice for a clean, legible font, the wide range available now means that many serif typefaces are just as effective, particularly for headings or key messages.

The new Guardian website only uses a serif font, and is a great example of a beautiful, clean site that is easy to navigate, with key messages and headings pulled out in a larger size or stronger colour

The new Guardian website only uses a serif font, and is a great example of a beautiful, clean site that is easy to navigate, with key messages and headings pulled out in a larger size or stronger colour

The site promoting 'The Harriet Series' typeface is a great example of the impact that typography can create. Although breaking the rule that I mentioned, it is a beautiful site which immediately grabs your attention, telling you the most important pieces of information and encouraging you to explore further

The site promoting 'The Harriet Series' typeface is a great example of the impact that typography can create. Although breaking the rule that I mentioned, it is a beautiful site which immediately grabs your attention, telling you the most important pieces of information and encouraging you to explore further

The hierarchy of the content is just as, if not more important on websites. Visitors will often only browse a page for a few seconds before deciding whether to leave or continuing viewing your site. Beautiful typography ensures that you engage people immediately, encouraging them to stay and explore the rest of your site.