Typographic Hierarchy: The Art of Making Words Look Good

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

Typographic hierarchy: it all begins with 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 Typographic hierarchy: examples of grouping and use of white space.

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.

In short, white space is good.

Use it.

Embrace it.

Size

Typographic hierarchy: examples of using font size and weight to change meaning.

Here’s a controversial statement: Big text is easier to read.

What???

Yes, changing a font’s size changes its eye-catching-ness, and thus its level of importance in your design. Big text tells readers, “Yo! Eyes here!” while smaller text lets them know that they’re looking at supporting information.

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

Typographic hierarchy: examples of using text alignment to enhance designs.

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

Typographic hierarchy: example of using font color to enhance designs.

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.

Keep the font party going when you upgrade to Royale:

Start your free trial!

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.
  • Another excellent article! thank you ♥

  • I love these fascinating tips. As a self-taught designer it gives me an abundance of inspiration!

  • Awesome!

  • This is super helpful. One thing – I tried to pin the article and you don’t have a set image with a Pinterest-friendly description of the article. Might be hindering people from pinning it…

    • Hi Honest Mom! Thanks for the feedback!!

  • Blade

    question-can you make pic monkey edit videos too?

  • LOWLIFE

    Just following up what blade asked,why cant you use video on pic monkey as its such a great program,that would make it even better,love what you do,keep up the good work,cheers.

  • ALETTA

    why don’t you make picmonkey gif-made. we will could make gif much easily ^^