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.




Bearskin Rug




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:

Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • 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.

Ending Soon
Free SitePoint Premium

Get one free year of unlimited book and course downloads on SitePoint Premium!