As a HubSpot Certified Agency Partner we frequently write guest blog posts that are published on the HubSpot blog. This post originally appeared on The HubSpot Insiders blog, a section of the Inbound Hub.
—
Do you ever wish it was the 1960’s and you were a Creative Director in a booming Madison Avenue agency? Every now and again the creative spirit in all of us longs for the old days of marketing.
You know, the era when marketing was defined by clever copywriting, artful advertising and an eye for the finest design details.
As inbound marketers, it can be easy to get caught up in a never-ending cycle of producing content, keeping up with the fast pace of the web while losing sight of the finer design details – the tracking, kerning, and letter spacing – that can give our marketing an extra level of polish.
Well crafted typography has the power to capture attention, instill emotion and reinforce your brand message. Choosing a font for your marketing material should never be left to chance—there are a number of strategic considerations to be mindful of in selecting your perfect typeface.
Design a visual hierarchy
For many design scenarios you will need two fonts – one headline font and one body font. This could be a combination of two font weights, color variations or two entirely different font families.
The goal is to create a visual hierarchy that allows viewers to quickly scan your marketing material, identify the most important elements and understand how each element relates to the other components of the page or screen. This is particularly important for inbound marketers. Rather than meticulously reading every word on a page, website visitors often only scan the headlines and focus on what interests them the most.
Choose fonts that are comfortable to read
There are a number of things that contribute to how easy a font is to read. These factors are typically broken down into two buckets: Readability and Legibility.
Readability refers to the way in which words and blocks of type are arranged on a page
Legibility refers to how a typeface is designed and how well one individual character can be distinguished from another. It also refers to how well-defined the word shapes are.
Pay attention to legibility
Fonts that look great in headlines may not work as well for body copy. While there are some exceptions to the rule, when you are choosing fonts to be used specifically in headlines or body copy you can narrow it down based on the type of font face:
Display faces are designed specifically to be used in large formats, such as in headlines
Text or body faces are designed specifically to be used in large areas of copy and are meant for longer passages of reading
Another factor that contributes to a font’s legibility is the shape of the characters. You have likely heard the term serif, or sans-serif.
Serif fonts have small ‘feet’ (serifs) tailing from the edges of the letters and symbols
Sans-Serif fonts do not have the small lines projecting from the corners
Serif fonts are typically easier to read in the body copy of printed works and have been used extensively for decades, which sometimes can give them a more classic feel. Due to the screen size and resolution that web content is often viewed from, many web designers favor sans serif fonts for the web. Sans serif fonts also lend themselves well to current design trends and a more modern feel.
Choose fonts for utility
Readability is about how groups of words are arranged on a page and how easy it is for the reader to scan the words and make sense of the content and the layout. There are a number of technical components of typography that contribute to how readable a typeface is, including paragraph spacing, font size and letter spacing.
Use contrast to your advantage
It may sound obvious but contrast is a major component of a font’s readability. Contrast is achieved by the use of space and color. Dark text on a pale background is favorably for blogs and books because it provides the viewer a better reading experience for longer blocks of text. Colored type should be reserved for headlines and display text.
Choose the proper font size
Font size largely depends on the screen or surface the message will be displayed on. For multiple-line paragraphs you want to keep the size of your body font limited to 45-70 characters per line. If you have more than 70 characters per line it will be tiring for readers to scan each back and forth and they’re more likely to lose their place. Lines that are too short may result in awkward hyphenated breaks or, if justified, rivers of whitespace running through paragraphs.
Pay attention to line height and paragraph spacing
Similar to font size, the spacing between each line of text can have a big impact on how easy your content is to read. The space between lines of text, known more formally as “leading”, should be at least the point size of type. Most digital designers favor a leading size of at least 150 percent of the text size.
A reader shouldn’t notice the line height or paragraph spacing – well crafted typography is focused on function, and that function is to communicate the message. That’s not to say that the appearance of your text shouldn’t have any appeal at all, it just shouldn’t be the centre of attention.
Design for viewing on multiple devices
Responsive web design brings an entirely new set of considerations for how typography is delivered consistently across multiple devices, from small smartphone screens to 60 inch HD TVs.
Convey your brand message
“Typography is like fashion, or furniture. With rare functional exceptions, the world doesn’t need new clothing or furniture designs, but people want to look different or evoke a particular feeling or fit with a particular look, and there are trends and styles.”
All of the elements of typography that we have discussed will help you identify the strengths of one typeface over another, but you may still be wondering how to distill a short list of potential typefaces from the endless selection that are available at your disposal.
While the final selection often comes down to good taste in design and relies on experience developing visual identities, there are a few simple steps that can help you hone in on the perfect typeface for your brand.
Find inspiration & study the use of typography
When it comes to typography inspiration these three resources constantly feature top-notch typography:
Study the work of other designers and identify which elements of typography “work” for your brand. Scouring other designers work for inspiration is nothing to be ashamed of, even the most renowned designers and artists frequently draw inspiration from one another.
Choose your font delivery service
If you intend on using your brands fonts consistently across the web you will need to select a font delivery service. Typekit, Google Fonts and fonts.com tend to be the most common. These subscription based services allow you to access huge collections of fonts, deliver fonts to your web properties and ensure that fonts consistently render properly in every web browser and on every device.
Once you have chosen the font delivery service that you will use, you can then begin to narrow down your selection of potential fonts from their library. Most of these services have convenient ways to filter fonts by typography characteristics, compare fonts side-by-side and save your short listed fonts for review.
Compare typefaces side-by-side and see what feels right
Once you have narrowed down your selection to a short list of potential font combinations, create a menu-card that compares all of the options. Seeing all of your options side-by-side (both on screen and printed off) can help compare one combination versus another and hone in on the perfect fonts for your brand.
Working through the font selection process using only black and white helps focus the choice on the attributes of the font, rather than being misguided by how color impacts the appeal of one font over another. Color has a significant impact on viewers psychology and behaviour. As a result, choosing fonts and choosing colors are two separate steps in the branding design process.
Key Takeaways:
- Design a visual hierarchy so viewers can easily scan your content
- Focus on readability – how words and blocks of type are arranged on a page
- Consider legibility – the shape of each character and how they form a word
- Choose the proper font for format it will be displayed on
- Draw inspiration from other typography
- Good typography is subtle, yet stylish