Having a typographic hierarchy tells a read which information is most important and the order in which it should be read. Having established styles for each of these tiers is important and something the designer you hire considers as they develop your brand.

Elements that give type hierarchy include the size, color, weight, alignment, proximity, case (all caps, sentence case, etc.), and contrast. The contrast is usually the contrast between the levels of type. For example, your display type will be very different in style from your body copy in order to contrast well.  

There are many elements of type styles we could dive in to, but lets touch on three of the most common: Display or header type, the subhead, and the body copy.

Display/Header: These typefaces are more eccentric, calling attention to a text, and are used in a limited capacity. You might see these are headers or book titles. The reason they are to be used in a limited capacity is because they were not designed for readability at a small scale or in large blocks of text.

A word of caution here: Those really scripty handwritten fonts can be really cool, but you have to keep in mind the legibility of typefaces. If a consumer gets frustrated because they can’t read the copy, you will lose a customer. This is especially concerning when we have a generation of students who have never learned to write in cursive. So keep these script and decorative typefaces to a minimum and never pair them with each other. They have too much personality and can end up clashing and more of a distraction. Those high personality fonts should be paired with a serif or sans serif.

Subhead: Usually smaller and less bold or eccentric. This style is used to reinforce the display text if the main idea is too long to put in display type. 

Body: The body contains blocks of detailed text. These typefaces are more restrained because they need to be legible at the average 9-11 pt. size. Some tried and true typefaces for body copy are Times New Roman, Garamond, Baskerville, and Arial.

Below are some pairings I’ve put together to give you an idea of how these three tiers work together. As a rule, I like to play with the contrast of serif (type with a slight tick off the end of the stroke) and sans serif (type without serifs, or those little ticks off the end) type as you will see below. 

Hierarchy Example

So in summary, here are five things to keep in mind when you’re pairing your typefaces for different levels of hierarchy.

  1. Your first priority is the legibility of the copy. Content first, design second.
  2. Elements that give hierarchy include size, weight, contrast, alignment, proximity, case.
  3. You can mix and match typefaces, but don’t get too carried away. Too many typefaces can be distracting.
  4. You can use different variations in a font family. For example, maybe you use the bold for the display text, regular for the body, and light for the subhead.
  5. You don’t want to pair a script and or a decorative typeface together.
Share This