Typographic Hierarchy: The Art of Making Words Look Good

What’s so great about typographic hierarchy? Why can’t we have a typographic democracy?

Well, folks’ eyes tend to get bamboozled when they’re trying to parse an indiscriminate wall of text. Typographic hierarchy is a way around that: at its most basic, it means giving readers visual cues that establish an order of importance. This helps eyes to flow across your document and grok it easily.

So why wait any longer for grok-able projects? In this article, we’re going to focus on creating a hierarchy for the text in your design using the following elements:

Spacing

Position and grouping

Size

Weight

Alignment

Color

Spacing

Here’s how simple typographic hierarchy can be: the very simplest way to get it rolling is with spacing.

In the quote on the left above, all of the text runs together, making it hard to read. In the one on the right, one simple adjustment improves the layout: adding a break after the quote to create space between the quote text and author’s name. This baby step into typographic hierarchy enables readers to easily distinguish the quote from the attribution.

Position and grouping

Now that you know about space, let’s talk grouping.

Grouping similar items is a thoughtful way to create impact and reinforce meaning. Take our new BFF quote above, for instance. Separating the first and second clauses emphasizes the contrast between them, giving readers a big “tada” moment when they hit the concluding clause. This segues handily into our next hierarchy lesson: when we separate text elements and add non-regular spacing between them, we’re creating what is referred to as “white space.”

White space doesn’t have to be white. White space (or negative space) is just a term for the spacing between different elements in your design. You can use white space between paragraphs, sentences, letters, and objects to help emphasize concepts and improve readability.

Weight

Changing the weight of the font (as in “regular, bold, light, extra-light,” not pounds or kilos) changes the emphasis of the words as well. If you ever find yourself doubting the power of weight, try changing up the emphasis in the following sentence: “I didn’t say we should kill him!”

Pretty important to the meaning, right?

Alignment

Left-aligned text is the alignment of choice for large chunks of text (see also: this blog post), because we read left to right. It works well with text inside graphics also.

Right-aligned text looks nice for pull quotes in an article, but should be used sparingly in design because it’s harder to read across a ragged left edge. Right-aligned text works particularly well in designers that feature a prominent image on the left side, like the tree in the upper-right image above.

Centered text can likewise be hard to read, but works well in design contexts like the baby announcement above.

The justified alignment style is an interesting one. Justified text creates space between words such that both left and right sides have a straight edge. This can make designs look very polished, or it can make the spacing between your words and characters look craggy and haphazard.

Color

Color can also be used to move an item up or down in your hierarchy. Sometimes, successful design means knowing when to keep color tamped down: for example, if your background is busy, keep your text colors simple. In contrast, a muted color on a muted background can make your text feel like a more organic piece of your design.

PicMonkey

This article was written by PicMonkey Staff, a multicellular organism of hive-minded sub-parts who just wanna get you the ideas and information you crave, so you can make good pictures and take over the world.