I’ve already written a post on the importance of considering color theory in your branding, so today I want to extend that and talk about choosing your fonts. Just like color, fonts can evoke certain thoughts and feelings, so it’s important to make sure your fonts match your brand message.
Today’s marketers are saddled with more tasks than ever before, and in the content creation cycle, the constant need to produce stellar content that resonates with your audience is often priority over the design details. Of course, the content matters, but its presentation can make or break how well it sits with your readers, so taking a few minutes to pay attention to the details of the font – such as the letter spacing, kerning, and tracking, is worth it.
When you concentration your typography, you can capture attention, provoke emotion, and deepen the connection with your audience. Never allow fonts to be randomly chosen for any project – instead, follow these guidelines to choose the best font for the job every time.
Overview
Create Your Visual Hierarchy
In most design situations, you’ll need two fonts – one for the headline and one for the body. You can use a combination of font weights, color variations, or two completely different font families – depending on the project and the brand messaging.
Whatever fonts you choose, the end result needs to:
- Be easy to scan
- Allow for quick identification of the most important elements
- Allow for quick comprehension of how the elements relate to everything else on the screen or the page.
Readers won’t read every single word, especially on a website. Typically, they’ll scan for the headlines and pay attention only to the sections that matter the most to them.
Consider Readability and Legibility
Readability refers to the way words and blocks of text are arranged on the page. When you choose the font, think about things like paragraph spacing, font size, line height, and letter spacing. If things look too squished, it’s going to be hard to read. Readers shouldn’t really notice the paragraph spacing or line height, because the best typography is based on function – the function of communicating the message. Of course, you want the appearance of the text to have appeal, but it doesn’t need to be the main focus.
Legibility, on the other hand, refers to the design of a typeface and how well a single character can be distinguished from others. It can also refer to the definition of the word shapes. As such, fonts that look great for headlines aren’t necessarily a great choice for body copy. There are definitely exceptions to this rule, but choose your fonts specifically based on what they will be used for.
Display faces are intended for use in large formats, like headlines. Text, or body faces, are designed to be used in large blocks of text, which is why you see them in books.
A font’s legibility can also be determined by whether or not it is serif or sans-serif. Serif fonts are those that have small lines, or “feet” at the edges of the letters. Sans-serif fonts, lack these small lines at the edges of the letters.
Serif fonts are widely used in printed works, because they are easy to read, and lend a classic feel. But in terms of the web, many designers feel sans serif fonts are the way to go. They work well with current design trends, and have a more modern feel.
Look at this classic #designfail. While the box says, “flickering lights” issues with font makes it at first glance seem like it features an obscenity. That’s exactly why font matters in your design!
Use Contrast
Contrast plays a big role in how readable a font is. Use color and space well, choosing a dark font on a pale background. Yes, you can achieve contrast with a light font on a dark background, but this combination is hard to read, and often rough on the eyes. The light background with dark text is favored because it makes it easier to read longer blocks of text. If you’re using color, leave it for headlines and display text.
Make Sure the Font Size is Ideal
The font size you choose will depend mostly on the screen or page the message is displayed on. If you’re dealing with multi-line paragraphs, make sure the font size you choose allows for anywhere for 45 to 70 characters per line. If there are more than 70 characters per line, readers will tire quickly, and more easily lose their place as they scan back and forth. If the lines are too short, on the other hand, there could be too many hyphenated line breaks, or too much white space through the paragraphs.
Design for Cross-Device Viewing
If you’re designing marketing materials of any sort for viewing on the web, you must design for cross-device viewing. Responsive web design makes it easy for designers to automatically adjust the design for viewing on a desktop, smartphone, smart TV, or tablet, but with that, comes a new set of considerations for your typography.
Responsive typography only changes at set breakpoints, but fluid typographic will resize accordingly to match the width of any device. Smashing Magazine provides an excellent tutorial for getting started with fluid typography. It’s as simple as setting the font size in HTML to a viewport unit.
Selecting a Font Delivery Service
A font delivery service, such as Google Fonts, Fonts.com, or Typekit, will ensure your brand fonts are used consistently across the web. These services are subscription-based, but will give you access to hundreds, if not thousands of fonts to choose from for all your branding and marketing projects. Not all fonts will display the same across the web, so when you’re designing for online projects, choose a font you know will work well across the most common browsers.
Compare Fonts Side by Side
If you’re struggling to find the font you think will work best for any project, create a card that compares all the options side by side. Seeing what they look like both on the screen and in print will help you determine what looks best for your band.
Work through your font selection process in black and white, rather than letting how color influences the appearance of the font influence your feelings. Color adjusts the psychology of what the viewer sees, so choose the colors after the fonts have been selected.
Need More?
This infographic, found at Crazy Egg, does a great job of showing the psychology behind font choices. Use it as a starting point to help you choose the best font families for your project.
When choosing your font – think about the message you want to communicate. If you’re working on something for a formal event like a wedding, then using script fonts is a common choice. If you’re working on something you want to be easily read online, go for something clean and modern.
What’s your favorite font and why? Tell me in the comments below.
helpful article. thanks for sharing the useful information. nice one.
Thanks for reading!