Infographic Day 5: Typography & Visual Hierarchy

Today’s essential question: How can I use typography to create a professional, easy to read infographic?

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

legibility.png

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

Here are some tips on how to combine typefaces to achieve professional results:

Establish visual hierarchy
01_hierarchy_01B

Visual hierarchy tells people where to look first and what is most important. It can be achieved with size, weight, color, texture, orientation and space, or any combination of these tools.

Use different weights of the same typeface
styles_within_typeface

To pair fonts that come from the same family, plan carefully to create contrast, varying things like font size, weight (such as light, regular, and bold), and case (upper, lower, small caps). One of the benefits of limiting your fonts for a presentation to one font family is that it creates a more consistent look.

 

Create Contrast
contrast

hipsterTrade-410x215

Using contrasting typefaces makes it clear which text are headings and subheads and which are body copy. The differences help create distinct roles for each font, allowing them to stand out as individual pieces of information.

Mix serifs and sans serifs
serif_and_sans_serif

One of the most popular ways to combine fonts effectively is to pair a serif and a sans serif. This is a classic combination and it’s almost impossible to get wrong. Serif fonts have the small numbs on the ends of the different strokes of the letters. Sans serif fonts do not have these little nubs.

Avoid combining fonts that are too similar
too_similar2

Conflicts between fonts happen when the fonts look too similar. As you can see in the example above, the two fonts share the same weight, size and decoration. As a result they’ve become too alike. They’re performing very similar roles, but the small differences are conflicting which makes for an awkward overall effect. This makes it difficult to establish a hierarchy, because the fonts aren’t visually distinguishable from each other. In fact, font combinations that are too similar can often times look like a mistake—as if you’d been experimenting with different fonts and had forgotten to clean up after yourself.

Limit your number of fonts
two_fonts

As mentioned before, it is generally wise to stick to only two or three fonts. Too many fonts can distract and confuse your audience. Limiting the amount of fonts you use will help create a harmonious, unified design.

Today we will:

  • Continue working on our infographic projects, making sure any typography we add is legible and displays a clear visual hierarchy
  • Upload the newest PDF of our progress to our Google Drives
  • Post both a PDF and PNG 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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s