Are you new to Designerside? You should subscribe to our RSS feed so you can keep up with our great content. Thanks for stopping by!

I’m more important than this.
Typography hierarchy refers to the different levels of importance placed on information being delivered. Using type is about balancing and the form of letters on a page. Verbal and visual are used to interpret and understand the page contents. It’s about making the message get across amidst often a mass of text information. Text is given a structural relevance by using hierarchy when styling and formatting it.

Stand out from the crowd
The majority of readers will scan a page and then drill down to the information they are attracted. Attraction can be if they are looking for something or just something that stands out. Not using typography hierarchy means your message can get lost. You aren’t controlling the focus of the reader and as a result can’t predict what parts of your message will be delivered and what lost amongst the mass of text. Typography hierarchy organises the content and emphasis to point towards specific information. It allows the reader to know where to go on your page and where the key information is.

Ye olde hierarchy
To start using typography hierarchy it’s a good idea to take a look at the traditional structure order associated with text. Traditionally there are 5 types of hierarchical places in typography:

1. Headlines
2. Subheadlines
3. Body text
4. Captions
5. Pullquotes and other breakouts - these add interest.

Often you find that you use these places without actually thinking about it. A new line after a paragraph, single spacing after a full stop and a larger font size for a title, are all examples of where everyone uses hierarchy without actually realising it. When thinking about typography hierarchy and using it you design with these relative positions in mind and by using these create emphasis, legibility and direct the eye to where you want the focus.

Tools at the ready
There are a range of cues you can use to get across your hierarchy. If you think of these as tools to get what you want out of your text.

1. Spatial
   This is spacing both in the page, line and words themselves. You can also use it to divide up the page into sections using space. Whitespace is a great tool to use as a quick fix to unreadable text masses. By increasing the line height you are able to allow the reader’s eye to take in each line. This has to be done carefully of course, otherwise it just looks like a mass of one line paragraphs. Using spacing for a new paragraph is often the most common use of spacing.
2. Placement on a page

   It sounds logical, but where you put things on a page is a very important consideration. If you think back to the typography hierarchy places, you can see the flow down the hierarchy. By using this in relation to graphical elements of your design you can infer hierarchy. Grouping relevant information together in a block linked through style can distinguish information and make what you want stand out.
   Always remember that naturally a reader’s eye will fall to the near center of a page. In western cultures text is read left to right, top to bottom. You can use this to draw to a single focal point on the page, or to create various type focal points in the design.

3. Leading lines
   Leading lines do what they say on the tin, they literally lead into larger text blocks. These can also be seen as headlines which draw the eye into the text. Give headers that break the message into chunks. People rarely read all the information so chunk it and break down what the message is. This also works as it reinforces what you are trying to get across as a message. Think of it in terms of advertising slogans. The leading line sums up the contents of the text block and both draws the reader into that box and allows an understanding of the text by scanning the headlines.
4. Size
   Bigger is better in terms of what readers will focus on first. By using a range of font sizes you can priorities visually what text should be read in what hierarchy. Size changes should be noticeable though, a 1 point (points here could be em, pixel, text points, mm - whatever you are measuring your text in) difference is rarely noticed in a mass of text and often just looks wrong. Try using a 2 point difference for a subtle difference or for a more dramatic one a 10 point difference.
5. Content relationships
   Similar content types can be displayed in a similar visual style or text area style. This unites them into a group even if apart from each other in the design. You can also use a contrasting type face - if your primary typeface is a serif, by using a sans you can contrast this face. This should be done carefully though as can grate with a typographical design and work against if overused.
6. Colour
   Using colour in your typography along with weight can lead to enforcing a hierarchy. Certain colours can draw attention to them (depending on your graphical colour scheme). Traditionally, red is the colour for error messages or warning information, black is a useful colour for easy to read text and green is a great colour on a neutral design to use for subheadings as it’s an easy on the eye colour.
7. Case

   UPPERCASE makes something stand out, but you can also use lowercase to distinguish from UPPERCASE statements. It’s always best to use UPPERCASE sparingly otherwise it reduces from the impact if overused.

8. Emphasis

   Emphasis can be made using italics or bold text, it also can be used by graphical denoting of a word or text block and even by a change in size in the middle of a sentence. It could be an illustrated first letter of a paragraph or a arrow at the lead of a headline.

Less is more readability
Above all which ever technique you use you have to add to the mix a large dose of consistency. By being consistent about what you do you don’t confuse the reader. You lay down your rules of typography hierarchy and reinforce them by using techniques. Similar can be said for drumming the hierarchy point too far - don’t use a sledgehammer to break the nut of your message.