Focus On Typography, Part 2: Hierarchy
Previously we took a look at how using contrast in typography ensures that a web page is actually legible. Today, we’re taking a look at the idea of hierarchy in Typography. By varying the size of type, you can differentiate sections of content.
This concept is something that we’re all familiar with, and see on a daily basis, but may not be aware of the term. Hierarchy leads us through an article, or across a web page. It shows us where we start reading, what’s the most important part of the page, what’s the next most important part of the page and so on. The most obvious offline example of this is the newspaper – big headline at the top of the first page, sometimes followed by a byline, followed by the main copy. The smaller less important stories have a smaller headline. So you can use this theory, to guide your visitors around your page. The main headline is (nearly) always at the top, but you may also have important information in your sidebar, so use a large headline to set apart that section.
Of course you can always use colours, or background box colours to achieve this effect, but if you’re consistent with the size and weight of the type on your headings, sub-headings and copy, you are letting people know about the relative significance of the elements on your page.
Hierarchy is not something that exists in isolation and it is very much related to the fundamental we’ll talk about tomorrow, namely font size. Here are few examples from around the web.
The Irish Times, like many newspaper sites follows a fairly standard hierarchy.
Newsmap. I wanted to include this one because I think this is really an atypical hierarchy as sections are demarcated by colour as well as the size of the headline.
Tomorrow, we’ll continue the series by look at how the size of type is also an important function of legibility.
Related Reading:
