article

Typographic hierarchy: everything you need to know.

10 min read

Dmytro Trotsko Dmytro Trotsko
8 Jan 2020

Before you start reading

This is a follow-up article to the walkthrough we did on UX writing. In order to get a more holistic view on typography and how it fits into the world of UX writing, we recommend reading through both pieces of content.

What is typographic hierarchy?

Before digging deep into the practical implications of typographic hierarchy, let’s make sure we understand what it is. 

Typographic means that it has to do with typography; in turn, typography is the process of arranging letters, numbers, symbols and other text elements.  

Hierarchy implies that elements in the text are not equal in terms of their importance. This inequality is manifested through font styles, sizes, weights, colors, and other attributes.

All in all, this means that typographic hierarchy is a system of relationships among text elements that should emphasize the elements that matter most, and subsequently, deemphasize elements that are more supplementary.

You can find plenty of examples of typographic hierarchy in your day-to-day life. This article, for instance, is structured with headers, subheaders and other formatting options to make it easier for you to read.

Why is hierarchy important

Now that we know what typographic hierarchy is, let’s break down why it is important. We, at Cieden, believe that visuals speak louder than words, so take a look at the example below. Which copy is easier and more pleasant to read?

example of bad and good typographic hierarchy

We think the answer to the previous question is quite obvious. Typographic hierarchy makes large pieces of text legible and skimmable. This, in turn, has numerous business implications. More on that later.

Elements of typographic hierarchy

Since this article is about hierarchy, let’s imagine that you’re working on a design project and have already chosen a font to work with. Let’s now list the ways you can harmonize the text within your product or marketing campaign:

  • Size
  • Weight
  • Color
  • Contrast
  • Case
  • Position and Alignment

Let’s break down all of these in more detail.

Size

Size matters. Especially when it comes to typography. It is the most obvious and intuitive way to differentiate one piece of text from another. Larger equals more important.

Size as a means of typographic hierarchy

Typically, headers and titles are significantly larger than regular body copy.

Weight

While shaming people for being too skinny or fat is bad, typography is a different ball game. The fatter the letters are, the more important and conspicuous they appear. Take a look at the example below.

Using weight to balance out the typographic hierarchy

Color

Typically, brands have two or three main brand colors. This means that you should exercise caution when using additional colors to differentiate elements from one another. Your website is not a rainbow, so be mindful of introducing new colors.

When using color to emphasize a text element, be sure to use colors that you already use on your website/app. 

Contrast

Contrast is less about emphasizing and more about the text being readable. For instance, the grey text on the black background is barely legible. So, while choosing a background and the font color, be mindful of the contrast issues. 

Case (lower / upper case)

Using all-caps might come in handy above and beyond having online arguments; it can also be helpful in product and marketing typography! Upper case words and phrases are regulars in landing page hero banners, for example. 

Position and Alignment

Position and alignment are most significant when it comes to copy structure. When writing about complex topics that have a multilayered structure, be sure to make the hierarchy of elements crystal clear. 

UX and business implications of typographic hierarchy

Now that we broke down all ways of establishing typographic hierarchy, let’s take a look at why it’s critical for your digital products and marketing.

1. All digital products rely on text 

For the sake of an experiment, we took a screenshot from Amazon and removed all the text. Sans text, the interface immediately stopped making sense. We’re sure that the same thing would happen with any other website/app we chose. As you can see, all products, both digital and analog, heavily rely on text. 

Since pretty much any product relies on text as the core means of communication, our job is to make this text readable and skimmable. This way, users are able to consume important information in a logical manner and thus efficiently use your product.

2. Guide users through your product

As soon as users land on your website or app, they begin to actively interact with it. It is your job to easily convey what you do, why people should choose you over your competitors, and what next steps they should take.

Take a look at the example of our homepage below. Even at first glance, It’s quite conspicuous that we do design. Since we are a service provider, the key call to action is “contact us”. Upon scrolling further, the information is logically structured to provide leads with everything they need to make a decision.  

3. Increase conversions

On average, a user spends about 15 seconds on a website while looking for information. That means you have 15 seconds to capture someone’s attention and encourage him or her to keep investigating. You can read more on this critical timeframe in an article by quicksprout.

Let’s be pessimistic for a second. Let’s assume that a website visitor quickly scrolled through your page, didn’t find the information he/she was looking for and left your website. Google would notice this behavior and deem the webpage irrelevant to that person’s search query. When this happens at scale, the results can be disastrous for your website’s SEO (search engine optimization). As a result, you should do your best to capture the reader’s attention and make finding information effortless for the sake of your SEO and actual conversions.

Conclusion

Through this article, we’ve established how typographic hierarchy is a system of relationships among text elements on a page. The hierarchical system implies inequality among these elements. The more important the element, the more effort should you put into emphasizing and differentiating them. You can do that through changing the size, weight, color, contrast, case, position and alignment.

Keeping these principles in mind will help you make your copy legible and engaging, which, in turn, will help you boost conversions and retain users on your website longer.

Dmytro Trotsko
by Dmytro Trotsko

start your project with us.

But we
can’t do it
unless you
decide to
reach out

what are you looking for?