Typographic hierarchy is a way of designing text-based content with the highest level of readability in mind.
As with all good design, you don’t even realise it’s there – you just process the information quicker and easier.
Typographic hierarchy is important for effective communication as the system of organising text by levels of importance allows the reader to not only follow the content easily, it helps them to find what they’re looking for quickly.
So, how should you be using fonts and hierarchy in design?
Hierarchy in fonts
This is simply the design terminology for varying the font size, style and spacing so that the most prominent information is clear.
You can use a simple three-level hierarchy to break up the information (from largest font, for example, to smallest).
Level one is the font size and style for the most prominent information – for example, the biggest and boldest text (the headline) in a newspaper article.
Level two elements usually break up the text into sections or group related information together. For example, the subheads in a newspaper article.
And level three in the typographic hierarchy is where you store the depth of the message. In the case of a newspaper article, it would be the body text.
This article explains in detail why every design needs three levels of typographic hierarchy.
A three-tier font hierarchy has been used in this article for Dine In Dine Out 2016. The headline is bold and draws in the reader (most important) while the subtitles and body copy use a serif font to make large blocks of content easier to read.
Are you just saying we need to mix up our fonts?
No. Typographic hierarchy isn’t just mixing up your fonts and styles willy-nilly so that your brochure or advertisement or online article looks like a dog’s breakfast.
The purpose is to simplify information and direct the reader to process the most important information first.
By streamlining your hierarchy, you’re helping people to read your content easily.
Think of your average web browser – they need to be able to see the headline of an article within a second or two of scanning your content before moving on to the information that follows.
Hierarchy for web
When it comes to designing content for the web, you should consider the design from a readability perspective as well as an interactivity perspective.
The layout should clearly communicate the actions available to a reader. Do you want to lead them down the webpage to move through an article? Structured headlines, subheads and paragraph text will be appropriate in this case.
In the HTML5 specification, for example, tags are handy to establish hierarchy in fonts for web. For example, heading tags allow you to structure the order of importance in content.
A single H1 (heading 1) tag should be used per page or section to denote the most important headline, followed by a H2 (heading 2) tag for subheadings and H3 (heading 3) tags for headings that may need to sit below a H2.
These heading tags range from H1 (most important) through to H6 (least important) and search engines use this information to interpret the importance of content on a webpage.
It’s also important to think about content on webpages if you want them to be interactive for your readers. If you want your readers to take any actions, you can do so by applying this hierarchy method.
For example, if you’re laying out a homepage of a blog or magazine, you’ll usually have a headline, followed by a short snippet about the article and an action button to encourage the reader to click and ‘read more’. The hierarchy of the button text sitting after the headline and snippet allows the reader to understand that clicking on the ‘read more’ button will direct them to the full article.
Design elements and typography work together in this website design for Parc Vue. It draws the eye first to the centre of the page and then to scroll down the page and experience the rest of the site.
When else do you use typographic hierarchy?
Using a simple hierarchy for your fonts is useful in the design and layout of articles, advertisements, campaign materials, brochures, digital advertising, and online retail spaces.
You should be using typographic hierarchy for any kind of collateral that holds text-based information.
What design elements go into typographic hierarchy?
You can use size, weight, colour, position and type contrast to establish typographic hierarchy.
Size is the most common way to differentiate between one ‘level’ of text and another, but spacing is another important element, particularly for web-based content.
When in doubt, prioritise. If you’re confused about which content to prioritise, lead with the key takeaway from the content.
Typographic hierarchy is good for everyone
When used effectively, applying these techniques not only makes your content design appear more attractive to readers, it’s more user-friendly.
When content design incorporates form and function, that can only be a good thing.