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:
- Position and grouping
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.
In short, white space is good.
Here’s a controversial statement: Big text is easier to read.
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.
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?
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 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: