Mastering Typographic Hierarchy

What is Typographic Hierarchy?

Imagine picking up a newspaper. Your eyes don't read everything at once. You first see the large, bold headline, then the slightly smaller subheadings, and finally, the main article text. This is typographic hierarchy in action. It's a system of visual cues that tells the reader what to look at first, second, third, and so on.

A strong hierarchy makes information easy to scan and digest. A weak hierarchy creates confusion and can cause readers to lose interest.

To understand the core principles, let's start with a short reading from Figma's official resources.

As the article states, you have several tools at your disposal to create hierarchy. For this lesson, we will focus on the three most important ones: font size, font weight, and font style.

The Three Levers of Hierarchy

Let's break down how to use each of these variables in Figma to build a clear structure.

1. Font Size: The Loudest Voice

Size is the most powerful and effective tool for creating contrast and signaling importance. Larger text naturally draws more attention. The key is not to pick sizes randomly, but to use a system that creates a sense of harmony and predictability. This system is often called a typographic scale.

A typographic scale is a set of pre-defined font sizes that work well together, derived from a base font size using a mathematical ratio. This brings a logical structure to your design choices.

This next video demonstrates a very practical way to build a typographic scale in Figma using the golden ratio (1.618).

2. Font Weight: Adding Emphasis

While size creates the main structure, weight (the thickness of the letter strokes) is perfect for creating emphasis and secondary levels of hierarchy. A font family that includes multiple weights (e.g., Light, Regular, Medium, Semi-Bold, Bold, Black) is an incredibly versatile tool.

In the same video, the creator points out why simply changing size isn't always enough.

To get more specific about how weights are defined, let's return to the Figma article. It explains the numerical system that you'll often see in design software.

3. Font Style: Fine-Tuning the Message

Style refers to other variations like italics or letter case (e.g., ALL CAPS). These are used for more subtle levels of hierarchy or for specific purposes.

• Italics: Often used for emphasis within body text, pull quotes, captions, or to denote a title or foreign word. It provides a change in texture without disrupting the flow as much as a bold weight would.
• Case: Using all caps can give text a lot of impact, making it suitable for short, important headings or labels. As we covered in the last lesson, remember to add a little extra letter-spacing (tracking) to all-caps text to improve its readability.

Putting It All Together: Your Typography System

Now, how do we combine size, weight, and style to create a functional system? This is where you define rules for different text elements in your design.

This image shows a great example of a typography system that defines styles for various headings, body copy, and even buttons, using different combinations of weight and size.

The following video provides an excellent summary of how to think about building a hierarchy for the most common elements: headings, paragraphs, and buttons.

Conclusion

Fantastic work today! You've learned how to move beyond simply placing text on a page to actively directing your audience's attention. By mastering typographic hierarchy, you're building one of the most critical skills for any graphic designer.

Here are your key takeaways from this lesson:

• Typographic hierarchy is the practice of organizing text to guide the reader and communicate importance.
• Font size is the primary tool for creating hierarchy; using a typographic scale helps ensure your sizes are harmonious.
• Font weight (e.g., Bold, Regular, Light) creates emphasis and helps define secondary levels of importance.
• Font style (e.g., italics, all caps) can be used for specific types of emphasis and fine-tuning your message.
• Combining these three levers allows you to build a robust typography system for your designs.

In our next lesson, we will complete our foundation in typography by adding another powerful variable to the mix. You will learn how to combine color and typography to create a cohesive typographic composition in Figma, further enhancing both your hierarchy and the overall mood of your design.