Good design is often silent. Since our interactions with good design feel effortless and intuitive, we rarely think about how much work goes into creating it. Indeed, if design is done well, the reader shouldn’t have to think about it at all (though appreciation is always welcome!). One of the most important design decisions is selecting a typeface and tweaking it to match your messaging.
To prove our point, we’ve reimagined today’s best-known and loved apps to explore what they might look like with bad design and the wrong typeface. Here are 8 insights to keep in mind when selecting and arranging your perfect typeface.
Perception matters
Insight: Your typeface can dictate the tone
Like your outfit selection for a special occasion, typeface dictates tone and how you’ll be perceived. Save yourself the embarrassment of showing up in sweats when your audience was expecting fancy wear by thoughtfully matching your typeface to the tone you hope to convey. For example, if you are a bank and want to instill trust and reliability, it’s best to stay conservative.
Instead of using a font with playful curly edges and tight spacing between letters as shown in this graphic, Bank of America opted for a streamlined sans serif type with evenly spaced letters ultimately producing a more reliable tone.
Stop yelling at me
Insight: Choose appropriate casing
Ever worry that someone will misunderstand your tone in a text message because they aren’t hearing you say it aloud? In visuals, it’s hardly any different. Your type choices influence how a reader interprets your message, and using type well will give you some control. For written communication, variations in letter case and size impact how your audience reads your content.
Even though the Yelp reviews in this graphic are positive, the reviewers appear to be yelling about their experiences thanks to the overpowering all-caps casing. The Yelp mobile app uses sentence casing and a clean sans serif font to let the words speak for themselves.
Show them where to look
Insight: Establish a visual hierarchy
Don’t make your readers wade through a bunch of content to find what they’re looking for; tell them what you want them to know! Using the same type treatment for all the text on the page and laying out information in an unstructured manner will only confuse your readers. The key is to organize the content on your page in a logical manner, then use design elements to convey the hierarchy.
Without a logical organizational structure, Facebook’s mass of information would overwhelm its users and leave them unsure of where to look first. Facebook prioritizes information by selecting the location and size appropriately, directing your eye to the most important points on a page.
Map it out
Insight: Typography is a guide (don’t get lost!)
It’s all about prioritization. Think of it like exploring somewhere new; one of the first things you do is get oriented. In the same way, new users who land on your page need to easily find their way around. It’s your job to help guide them. By using different line weights and sizes, you can communicate the relative importance of text. Without it, there is no visual priority and the content becomes a jumbled mess.
Here’s what Google Maps would look like without font adjustments. You’d have a difficult time quickly discerning street names from neighborhoods. The thickness, size, and casing of words lets you quickly tell the difference.
Add a splash of color
Insight: Use color with purpose
It’s easy to get lost in a sea of words. Text-heavy visuals can disorient readers, but purposeful color choices can come to the rescue to make sure readers can easily differentiate blocks of text.
In this graphic, it’s not as easy to tell who’s sending which message. In reality, WhatsApp does this well by color-coding user names in a conversation, but imagine the confusion if that wasn’t built into its design.
Give letters their personal space
Insight: Space out your letters purposefully
Adding extra spacing to meet the page count on your college essays may have worked then, but now you have a larger purpose to serve. Space your letters deliberately to provide better readability and ease reader fatigue. Even if your chosen typeface makes for weird default spacing, you can generally use a mix of kerning (the spacing between individual characters) and tracking (the spacing between letters in a range of text) to find the right fit—otherwise, no one will stick around long enough to read what you have to say.
Piling letters together makes it very difficult for readers to absorb the information presented. In reality, Instagram gives their letters more room to breath so that everyone can enjoy your clever captions.
Clean and simple
Insight: Minimize the number of typefaces you use
The old adage “clean space, clear mind” rings true in design. After all, it’s hard to focus with a messy desk or room; even the owners of those so-called “messy” spaces have a system of organization. When applied to your design, a consistent number of typefaces on a page can create clarity. Using only a few typefaces, ideally 2-3, makes your design cleaner and easier to follow.
To help avoid confusion and a headache, Apple’s iPhone defaults to one typeface for the home screen.
Use nonverbal cues
Insight: Sometimes type takes a backseat
Lastly, knowing when and how to use a specific typeface is nearly as important as knowing when not to. Using icons or images to communicate a message can occasionally be more effective than using text.
In reality, Spotify successfully uses symbols, such as the play button (▶), in place of text to enhance the user experience, proving that icons can do the trick.
With these type tips, now you can create appealing graphics to suit your brand’s tone and style.
Comments