Typography & Visual Hierarchy

Many of us are ready to add text to our infographics. When trying to make your text look interesting, don’t use too many different “fun” fonts or your project will look like a hot mess:

we-all-know-this-looks-bad

As a general rule, you should use two different typefaces to keep things interesting yet unified. These typefaces should be fairly different to show contrast, and you should use the more decorative one for headings. NEVER set body text in a decorative typeface – it will make it illegible and look unprofessional. The image below explains why:

papyrus

Find the above examples entertaining? There’s an entire blog post, titled, “Does your choice of font signify you as a terrifying beast?”

Here is an example of how to correctly juxtapose basic and decorative typefaces. Notice how the heading is in a decorative typeface, the subheadings are in a simpler, but easier to read typeface, and there is enough contrast between the type color and the background to keep things legible:

QOTSA

Bayleigh, Grade 11

The next example contains a gorgeous color scheme, but the text is hard to read for two reasons. First, there is not enough contrast between the color of the text and the color of the background. Second, all of the text is written in a decorative typeface.

The Weeknd

Angela, Grade 12

In the example below, I have lightened the color of the text, and changed the body text to a simpler typeface (Helvetica):

The Weeknd

Here are side-by-side comparisons of the typography before and after changes. Why is the “after” easier to read?

The Weeknd

The Weeknd

Today we will:

  • continue working on our infographic projects, making sure any typography we add is legible and displays a clear visual hierarchy
  • post a PDF of our progress to our blogs
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s