Good typography – An introduction to Hierarchy

Design can be a very complex exercise be it web or print. Its a bit like a puzzle. You have lots of information and you need to decide how to best fit it all on the page. Generally the best and most popular practice is to divide it into blocks of information, but thought also needs to be given as to the order these are read and the prominence they have on the page. That’s where Hierarchy comes in.

Hierarchy, essentially is the organisation of elements into levels of importance. Why is it important? because it helps to communicate, which is what design is really all about. We are all very good at picking up information, we do it all the time. A good hierarchy, helps us do this. It allows us to scan a document and pick up the visual clues that help us distinguish what is important.

When someone first reads a page, they often have very immediate questions in their mind. Is this what I am looking for? What is this page about? How do I get what I need? By creating hierarchy, a designer or typographer can help the reader get this information more quickly.

Below is a quick example of a page with hierarchy. The first page, has virtually no hierarchy at all, the text is just flowed in. In this case the reader would have no choice but to read all the text in order to find what they are looking for.

hierarchy-1

Now lets have a look at a page with a better sense of hierarchy. The reader can clearly see what the page is about. The title is defined by using much larger text. Secondly, they can spot the intro in the next largest sized text and read instantly what they will find on this page. Lastly, the highlighted headings make it easier to scan the page and pick out the information they require.

hierarchy-2

In the example above, hierarchy is defined mainly using size. But now lets take a look at layout and the positioning on a page.

page

In a page which contains information spread evenly, a readers eye will usually follow this example. They start in the top left hand corner (section 1) and work down to the section 2 and then section 3. Finally, they will move back up to the top right hand corner towards section 4. Of course this is quite a simplistic view and a bold headline or powerful image is always capable of taking the attention immediately. Take the example below for example; Although the image is full bleed and much bigger, the type pulls the attention up towards the right hand corner, typically an area not looked at first.

page2

The point is that every page needs an entry point. And this is one of the things the designer must consider. Thought must be given to the readers journey, where they start and where they should finish. This is often what drop caps are for – they introduce entry points to the reader.

In magazines and other printed booklets the reader usually looks at the right hand page first as when flicking through or turning a page, this is the first one we see. This is why advertising is usually more expensive on the right hand side and why certain publications reserve this space for quality editorial.

To finish this article, here are a few things to consider when planning your page hierarchy.

Size:
Size is one of the most obvious ways of dividing information. Put simply, larger text will usually be read before smaller text. This is not always the case of course, as sometimes smaller text can be viewed as a block and therefore not read at all, where as larger text can encourage skim reading. Usually though large text will be read first. Something to remember with size however is to not have too many contrasting sizes, which will make your layout appear messy and reader won’t know where to begin, which brings us to our next point…

Consistency:
Consistency is a less obvious thing to think about with hierarchy. But the main goal when planning hierarchy is to organise your elements of information. Consistency helps us do this. By maintaining consistency across all sub headings for example, the reader knows that these are all of similar importance. A good example of consistency is in web design. It is good practice to have all links consistent so that the viewer will always recognise them. This consistency helps them find the information they are looking for quicker.

Colour:
Strong colours can always attract the attention first. Certain colours are more legible then others and considered stronger. On a white background red is often very powerful where yellow often struggles with legibility. On a black background however, yellow supposedly offers the heaviest contrast.

Contrast:
Contrast helps you define importance. Usually a reader will look to the darker objects first and place more importance on these. This can be utilised in typography to emphasise certain words or sentences. Often a heavier grey than normal for body text can be a elegant way of emphasising something.

Negative space:
Negative space is a sure way to place emphasis on other objects. A perfect example is the think small mini adverts. Though the picture of the mini is not particuarly large, the white space draws the eye straight to it, enforcing its importance.

hierarchy-2-212x300 mini

Alignment:
Alignment again helps to keep a page organised and make it easier for the reader to navigate. Again this can help define importance by grouping elements together. Likewise, other information can be emphasised by breaking alignment. This is often the case in newspaper design with pull out quotes.

newspaper

Well that’s it from us about hierarchy, so hopefully it gives you some things to think about. Our intention with this article is, to encourage typographers to think about the information on the page before laying it out. Too often it is the case where pages are designed without all the content being read by the designer. This should never be the case – it is only when you know and understand the information that you can start to think about which is the most useful or engaging.

Have you anything else to add? What elements do you use to address hierarchy?

Happy designing.

Leave a Reply