Who’s Your Daddy: Creating Font Hierarchy

If you read the first article in our series on fonts, you are well on your way to a PicMonkey graduate degree in font mastery (how cool would that be?) because you know how to pick and pair fonts. In this article, we’re going to focus on creating a hierarchy for the text in your design.

Hierarchy is your friend

You’re probably familiar with hierarchy if you’ve used a word processor like Google Docs or Microsoft Office. With a click of your mouse, you can easily format text as a title, subtitle, heading, or body text, using preset treatments in the software. These text treatments establish an order of importance, which helps the reader’s eyes to flow across your document and make sense of it easily. The same idea applies when you are creating a design, but you’re doing it without built-in presets. Here are four properties you can manipulate to create that hierarchy:

  • Spacing and grouping
  • Size and weight
  • Alignment
  • Color

Spacing and grouping

two quotes showing effective choices in spacing of fonts

In the quote on the left above, all of the text runs together, making it hard to read. In the one on the right, just a few adjustments improve the layout. We simply added a break after the first and the second sentence. Then we created more space between the author’s name and the text above it so that reader can easily distinguish the quote from the attribution.

graphics showing grouping of fonts

Grouping similar items is another thoughtful way to create impact and reinforce meaning. Separating the “logic” sentence and the “imagination” sentence emphasizes the contrast between them. When we separate them and add non-regular spacing between the items, we are creating what is referred to as “white space.”

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

Size and Weight

graphics showing size and weight choices with fonts

Don’t be afraid to go big with your fonts. Large font sizes are not just for titles at the top of your document. You can use larger fonts within a design to bring out key elements and to tie different pieces of information together. On the flip side, you can also decrease the font to push items back, so they don’t compete with your main message.

But you don’t have to just rely upon the size of the font. Changing the weight of the font (regular, bold, and italic) changes the emphasis of the words as well.

Alignment

four designs showing text alignment choices

Left-aligned text is the right choice for large chunks of text, because we read left to right, and it works well with text in 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. In the bokeh hearts example above, it manages to flow the text around the vase in the photo. Centered text is also hard to read, but works well in design contexts like the baby announcement above.  The “Spring” design above shows a justified alignment style. This is one most people try to avoid because not only is it hard to work with, but it’s also cumbersome to read. Subway art designs often use justified text.

Color

two designs showing use of color for fonts

Color can also be used to move an item up or down in your hierarchy. In the bridal shower example above, if “Audrey Matthews” was black, it would jump off the page at you. By using a darker color sampled from the background image, the text is softened and tied well to the overall design. In the lip tint example above, color gives a smaller piece of text (“Lip tint”) more weight without overpowering the main message.

two designs showing effective use of non-color in design

Sometimes successful design means knowing when to keep color tamped down. In the fireworks design, there is a lot of brisk movement and color in the image, so we don’t need to introduce another color in the type. The playful font choice and sizes give the text plenty of focus. In the Movember image, adding color to the text would have taken away from the black and white feel of the overall design. Using dark gray for the fonts makes the text feel like it’s part of the image.

Now that you know all the ins and outs of working with hierarchy, rock it in your next design project! Remember to use that white space to give your design elements a little room to breathe. Stay tuned for our next article on how to to make the PicMonkey text tool an employee in good standing, among your design staff.

Read more:

Now Serving: All the Fonts in the Galaxy

Video Tutorial: How to Access All Your Fonts

11 Responses to “Who’s Your Daddy: Creating Font Hierarchy”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>