type hierarchy

Published on December 4, 2025

This lesson is from my course The Art of Visual Design (Elizabeth’s Version).

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 😈.

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

Weight

Bolding is a really effective tool especially when you’re designing a small interface component where the text all needs to remain small.

7.png

Size & weight

Adjusting size and weight is probably the most common form of hierarchy you will see. It is extremely effective and high contrast.

10.png

Color

Sometimes people will also adjust color. Color doesn’t necessarily mean adding a hue! Using a shade of gray is also introducing color.

11.png

Style

Style includes things like italics, underlining, and all-caps text.

13.png

Style is typically not used to create contrast across multiple lines of text.

12.png

It’s more common to use style as a way to separate a word or phrase within a sentence.

14.png

⭐ Activity: Type hierarchy challenge

Follow the exercises by using this Figma community file.

  1. Practice creating a type hierarchy using this excerpt from Italo Calvino’s Invisible Cities.
  2. Share your work in #4-typography when you’re done! Which prompt was your favorite? How did you approach “Your choice”?
  3. You can repeat this activity with any body of text that has multiple headings and paragraphs.

Untitled.png

✨ Elizabeth’s version

Here’s a video of me doing the same challenge!

Some final typography tips

Before you set off on your typography journey, here are some final typography tips I want to leave you with.

  1. Stick to 1 font family. When you’re comfortable creating a hierarchy with one font family, you can check out Untitled 😈.
  2. Avoid using all caps. ALL CAPS IS ALWAYS HARDER TO READ. All caps is almost always more difficult to read because the letters are all the same height and it’s harder to differentiate the characters. ALSO IT LOOKS LIKE YOU’RE SCREAMING.
  3. Don’t change the letter spacing. Avoid changing letter spacing for lowercase characters. If you’re using a popular font, trust the spacing that the designer has set for you! Oftentimes, changing the letter spacing will make the text more difficult to read.
  4. Left-alignment is the most legible. Using center alignment gets complicated because you might run into alignment issues with paragraph text and other design elements you want to incorporate.
  5. Line length should be around 45 to 90 characters. It always depends on the font you’re using, but typically something between 45 to 90 characters is good! If your text is too wide, it is a lot harder for people to read.

✏️ Activity: Fix the typography!

Follow the exercises by using this Figma community file.

Now that you’re at the end of the typography module, try putting your skills to the test by fixing the terrible typography on this page 😱.

Untitled.png

✨ Elizabeth’s version

Here’s my take on fixing the typography on this recipe page.

Learn visual design

Interested in learning visual design? Sign up for my course The Art of Visual Design (Elizabeth’s Version).