Why Every Design Needs Three Levels Of Typographic Hierarchy

Hierarchy — it’s a big word, but an easy-to-implement (albeit important) concept when it comes to typography.

And this guide will show you how to use it to improve your design projects.

Even if you’re not familiar with the term, you’ve likely run into typographic hierarchy many times. Just picture a newspaper, with a headline, subheadline, and body copy. This is a classic example of three levels of typographic hierarchy, an approach that’s still used today, both in print and online. Newspapers from the early- to mid-20th century offer especially exaggerated examples, like this one:

type-hierarchy-1

These days, our headlines or titles don’t have to be six inches tall to catch readers’ attention, but the image above provides a dramatic reminder of just what typographic hierarchy is all about — organizing and formatting your type choices in such a way that readers or users can clearly see what’s most important, which enables them to easily navigate the layout at a glance and quickly scan to find the information they’re looking for.

Enhancing readability and usability are some of the most important benefits of establishing a clear typographic hierarchy. If instead, the front page of that newspaper had looked like one of the first two examples below — with either no typographic hierarchy or very limited hierarchy — the important message being communicated would not have been nearly as easy to see at a glance. Readers would have had trouble distinguishing where one section stops and another begins, making for a harder to read design that has less impact.

type-hierarchy-1b
The first three examples here would benefit from some further variations in font, size, and/or style, along with better spacing between sections, to improve readability.

So how can you create an effective hierarchy in your design? Adding three separate levels of typography is a great place to start and will be sufficient for many designs.

  • Level One: Generally, your level-one typography will be the most important content or information; this should be the most immediately visible typographic element in your design.
  • Level Two: Level-two elements usually help organize your design into sections or group related information together. They shouldn’t stand out as much as your level-one type, but should clearly direct viewers to the different parts of the design and help them navigate it easily.
  • Level Three: For a text-heavy layout, the level-three typography is generally the meat of the design. This is where the copywriting lives, where you get into the message of your design. It could be long or short — a whole article, a short note, a brief description — but the primary concern for this level is that it’s easy to read, since the font size will likely be somewhat small.

As an example, the design of this product page is simple, but still has at least three levels of typographic hierarchy. You could say that the product name (Major Black headphones) is level one; the price is level two, and the product description is level three. Notice how the description paragraph is set in an easy-to-read serif with a generous amount of spacing between lines (also known as “leading”).

You have a variety of approaches you can choose from to visually organize your content. Many of them may seem like small details, but to quote Charles Eames, an influential American designer and architect: “The details are not the details. They make the design.” Let’s look at several options that can help you establish a typographic hierarchy and give your design maximum impact:

How to Create Typographic Hierarchy (And Visually Organize Your Design)

01. Adjust Your Font Sizes

Size is the simplest way to create contrast between different typographic elements in your design, especially if you’re only working with one typeface. With three levels of typography, the font size generally starts out largest on top (level one; your most important information) and decreases in size as you move down the page (with any body copy or text being the smallest at level three). Because we read from left to right and top to bottom, a top-to-bottom hierarchy is the most natural for readers to navigate. This is a very common layout that you’ll see in everything from books and magazines to articles on the web.

Remember — hierarchy is all about helping your most important information stand out visually. Whether that information is a name (maybe on your business card; or the name of a performer or guest speaker on an event poster), the title of an article or blog, or a special discount or promotion on an advertisement, if you set that type at a size that’s larger than all the other text in the layout, it’s sure to attract attention.

For instance, the price on this special offer stands out well due to its large size in relation to the rest of the text on the right side of the layout. Using a bright red to further highlight the promotion is also a smart choice (for more on using color in your typographic hierarchy, scroll down to #4).

02. Choose a Couple of Contrasting Typefaces

Think again of the “On the Moon” newspaper headline we looked at at the beginning of the article. Doesn’t the bold, sans-serif typeface contrast dramatically with the italic and serif type on the rest of the page? While pairing typefaces doesn’t always have to be quite that dramatic, contrast is a key component of any successful font combination.

And combining a sans-serif with a serif typeface has been common practice among typographers and designers for ages. It’s a classic rule-of-thumb that serves as a good starting point for any design. Even if you put only your level-one typography in a different font, that can create a big impact visually.

Keep in mind that you don’t want to choose too many typefaces, which will only clutter and crowd your design; two to three will suffice for most layouts. You’ll also want to make sure that your choices are suitable for the style and context of your design.

For instance, you wouldn’t want to set important information like the time and date of a corporate event in a funky, hard-to-read novelty font. Or choosing a script font for long paragraphs of text would be similarly hard on the eyes. Some fonts get difficult to see clearly when they’re reduced to small point sizes. These types of issues and how they affect the readability and overall look of your design are important to consider for any project. For more tips on how to effectively combine fonts, check out another Design School article, “10 Golden Rules You Should Live By When Combining Fonts: Tips From A Designer.”

03. Experiment with Different Styles and Weights

Many fonts come with a variety of style and weight options. Different styles might include italics, small caps, or condensed or extended versions. Weight refers to the visual lightness or heaviness of a typeface. If a font you’re using comes with light, medium, bold, and heavy versions, those are all different weights.

These characteristics give you lots of options when it comes to assigning different roles (or just a different but complementary appearance) to various typographic elements in your design. Take this branding for a newsletter, for example. All the sans-serif type here is in the same font, but different weights. The bolder letters of the newsletter title make it extra visible; that visual weight signals that it’s the most important part of this design’s hierarchy.

And these labels have been designed with a variety of regular and bold weights, along with italic and small cap styles — all using the same typeface.

04. Add Some Color

Like font styles and weights, color is just one more way to make certain parts of your design stand out a little better. Because colors often do carry their own meanings and associations, you’ll want to make sure your choices match up with your brand and/or the purpose and mood of your design.

This invitation for an event hosted by a sustainable coffee company does just that, with natural, earthy colors for the typography that support the brand’s characteristics and the theme of the event.

Likewise, this business card set features a distinctive, blue-and-yellow color combination for its typography that’s very eye-catching. The colors have a fresh, clean feeling, so — though there’s no traditional black or navy blue in sight — they’re still appropriate for the orthodontic practice that the cards were created for.

05. Pay Attention to Spacing

In a design, the spacing between typographic elements — both letter-spacing and line-spacing — can make all the difference between a balanced, easily readable design and one that looks cluttered and confusing.

Remember the examples of no hierarchy and limited hierarchy several images back? Neither of them had any spacing between the sections of the newspaper article, which made for a harder to read, less effective design. That’s because spacing (or white space) visually separates different parts of a design but also helps the viewer understand and visualize how all the pieces work together.

For example, the generous spacing (along with a variety of creative type treatments and well-placed dividing lines) make the typography here look balanced, even in a space as small as a clothing tag.

When you’re looking at a layout that is spaced well, it’s immediately obvious how you should go about reading or getting information from the design. But when you’re looking at a design where maybe the designer felt that he didn’t have enough space to work with (so he crammed a lot of content together without considering spacing) — then you might find yourself squinting at text that’s too small to read. Or looking for information, perhaps an address or phone number, but it’s not immediately clear where to find it. Or not even wanting to bother interacting with the design because it looks like a mess.

These presentation slides avoid that problem by using generous line-spacing and surrounding text and other elements with plenty of white space. Blocks of color and geometric shapes also help organize and separate the different design elements.

You don’t want readers or users feeling frustrated by your design. So putting a little extra effort into crafting a balanced design with plenty of white space is worth your time.

06. Pay Attention to Spacing, Cont.: Proximity

Spacing isn’t just about separating typographic elements; it’s also about proximity, or moving related items closer together. Reducing the spacing a bit between pieces of text that go together (to make it more obvious that they go together) is another visual tool to help viewers navigate a design more easily.

Particularly for content-heavy designs, such as infographics, proximity is key to creating a balanced design that makes sense visually.

07. Play with Orientation

Sometimes a straight line of text just doesn’t cut it when you want to make a statement with your typography. In that case, a bit of tilting, slanting, or warping might help set your design apart from the rest and attract some extra attention.

It’s likely that you’ll use all or most of these methods of creating typographic hierarchy in a single design project, as with this bridal shower invitation. It uses font size, contrasting typefaces, color, spacing and proximity, and orientation all to good effect.

Applied effectively, these techniques not only make your design more attractive, but also make it more user-friendly — and when a design combines form and function, that’s a good thing. So next time you’re working with typography for a design project, try some of them out. Happy designing!

Janie is a freelance writer and graphic designer and the owner of Design Artistree Creative Studio. After college, she built on her background in art to explore design...and loved it. Now, she enjoys finding ways to combine the craftsmanship of traditional fine arts with the digital possibilities of graphic design.