This is the most important lesson in the entire course. Pay attention! If you get comfortable with creating a type hierarchy, you’ll be able to do anything 😈.

https://tella.video/type-hierarchy-1-dq1b

Principles for creating type hierarchy

How you approach each of these principles will define your personal visual style. Dramatic styles tend to use more visual contrast and minimal styles tend to have less visual contrast.

  1. Create just enough contrast. Your goal is to create a visual distinction between layers of text: typically this involves a combination of headings and body text.
  2. Change one axis at a time. In order to accomplish (1), change one visual axis at a time. This will help you assess if you’re creating “just enough” contrast. Often, you’ll only need to adjust 1-2 axes to create contrast between two levels of text.
  3. Spacing is a powerful tool. Don’t forget about spacing! Spacing is an important tool for separating groups of text that are related.

The axes

This is what a bunch of text looks like without any contrast. (Omg all the text blends together.)

5.png

If you want to create hierarchy, adjust these axes one at a time. In order of effectiveness and importance:

  1. Size
  2. Weight
  3. Color
  4. Style

There’s one last axis: the typeface. However, when you’re new to typography, I recommend sticking to one sans serif or serif typeface (Inter, Source Serif Pro, Open Sans). Understanding how to create a hierarchy with one typeface and the 4 axes: size, weight, color, and style is level 1.

We will touch on the last axis: the typeface later in Iterating on type: Font pairing.

Size

I increased the size of “Chapter 1” and “Down the Rabbit-Hole.” Many times, using size is enough! (This is the same as the principle of scale from Principles of composition).

6.png