Focus On Typography, Part 2: Hierarchy

Tweet

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.

Typography

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.

image0023

AIGA

image0042

Bearskin Rug

image0062

Typographica

image0081

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.

image0101

Tomorrow, we’ll continue the series by look at how the size of type is also an important function of legibility.

Related Reading:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • rajesh

    Good Article you provide here for all.particular web desgin information i like your way to saying here, it is easy to understanding any one.i will suggesting to learners to read this blog, i am also visit this blog if you upgrade any thing i will share this information thank you for sharing this information.