Typographic hierarchy: The design secret all business owners need to know


Typographic hierarchy sounds like a technical design term, but it’s a simple technique that you’re probably already familiar with. In fact, you see it all used all the time in newspapers, magazines, and websites. Typographic hierarchy is a way of organizing your content so that it’s easy for the reader to understand what is most important. It allows the reader to scan the information and easily navigate through the content.

Imagine for a moment that you pick up a newspaper, but it’s all written in 12 point, single-spaced, Times Roman font. Nothing is bolded. There’s no extra space between paragraphs. Where would you start? How would you decide what articles to read? Where does the article end? This is what a newspaper would look like without a typographic hierarchy. This format, with one article running into the next, would quickly frustrate the reader. People today are exposed to an unprecedented about of information with a limited amount of time available to absorb it. It is essential that business owners and designers work to make content as easy to scan and read as possible.

For example, this is a draft of my blog post. What do you see first? Do you feel like reading this article? I would say, no!


Fortunately for us, newspapers do use a typographic hierarchy. Typically, they use a 3 level typographic hierarchy. Each article starts with a headline that usually consists of a large, bold font. Underneath the headline is a sub-header that is in a font that is a little smaller, but still appears quite prominent. Then comes the body copy, which is in the smallest print. This hierarchy helps by allowing the reader to quickly decide if they want to read it. It also increases readability by dividing the article into sections. The 3 level typographic hierarchy is a great starting point for most business owners when putting together their marketing materials (it can be used for anything from brochures, website design, blog posts, and more).

For example, I used a typographic hierarchy. What do you think? Do you see the difference? Easy to read?


How to create a typographic hierarchy

1. Use different typefaces and weights.

As discussed in a prior post (link to post on typefaces), within each font family are several typefaces. Some examples include italics, bold, and condensed. These typefaces complement one another but still add some contrast.  You could also experiment with different weights (light, medium, and bold). By using the same font family, your design will maintain a clean look and you won’t have to worry about pairing fonts.

2. Use different font sizes.

Using different sizes allows the reader to quickly figure out which information is the most important. Naturally, we tend to read from left to right and top to bottom. So it makes sense to make the most important point large. If that interests the reader, they will continue it down to the next point, which is created with a slightly smaller font. Hopefully, they will then be ready to go on to the body copy in small print. It’s a progression that is natural to most of us.

Adjusting the font size is extremely important if you are only using one font. You can still achieve contrast by enlarging the important, level 1 elements while decreasing the size as you add level 2 and level 3 elements. Your reader will still be able to determine the important information at a glance.

3 Add white space.

When we add white space to our layouts, we’re not only giving our reader’s eyes a break, but we’re creating a clean, easy-to-read design. White space also helps to keep your layout from getting cluttered and allows readers to easily distinguish one section from the next.

4 Use 2-3 typefaces for contrast.

Contrast is a critical component in basic design. The most common font combination is a sans serif font paired with a serif font. This is a great starting point for your marketing projects. The one caveat is to make sure that the font combination is suitable for your project. For example, make sure your body copy uses easy-to-read fonts (no script please!).

5 Add some color.

Color is a great way to accent or highlight an important piece of information. Colors can also add a particular mood or feeling (link to prior post on colors) to your design. However, remember to use color sparingly. When you use too many different colors, it becomes distracting and the reader will not know what you are trying to highlight.

6 Use spacing to help organize your information.

Design elements that are related should be in close proximity to one another. Close spacing implies to the reader that the items go together. It also helps to create a sense of balance in the layout.

7 Experiment with subtle changes to the text.

Designers sometimes tilt the text or have it wrap in a semi-circle pattern to create interest and draw attention. It’s a small change, but one that can have a great visual impact on the design.

8 Try adjusting letter spacing and line spacing.

Tight letter spacing and tight line spacing can make a design appear cluttered, confusing, and difficult-to-read. Try gradually increasing the spacing and watch your design achieve a more simple and balanced appearance.

9 Use blocks of color and geometric shapes.

If used sparingly, blocks of color and geometric shapes can highlight certain pieces of content. For example, to highlight a quote or an important piece of information, the text can be placed in a block of color or a geometric shape to draw attention to it. This can help entice the reader to continue reading the body copy.

Sometimes business owners put so much effort into writing the content, that they neglect some of the basic design aspects. The writing is important however, if it’s not designed well, your target audience will never notice it. The design determines how your content is getting delivered to your target audience. Great design transforms content into easy-to-read sections that will keep your target audience reading. The designer organizes your content in such a way, that the reader instinctively knows how to navigate through it. And when the content and design are both done well, business owners will connect with their readers and ultimately generate more sales conversions.

Need help creating typographic hierarchies for your marketing collateral or website?

Contact me and together we can create a clean and simple design to help your business stand out from the rest.