How fonts influence design, and why they matter more than you think.
A good font goes a long way. Fonts impact your website in a number of ways, from aesthetics to legibility, each of which contribute to whether or not your visitors will stay on your website. But it’s not just the font choice that will make or break your web design. Other factors, such as the white space surrounding the font, the space between lines (leading), and the space between characters (kerning) impact both your design and your bounce rate.
Typography on the Internet follows a different set of guidelines than in print. Whereas print typography is a fairly stable medium, web typography must take into account screen resolutions, text that shifts to accommodate responsive design, and the way our eyes read text on screens vs. text on a page. Any designer worth their salt is going to know and follow these rules. However, this should be a helpful guideline if you’re trying to evaluate their current website, or if you simply want to better understand good design principles.
Establish page hierarchy.
Headings and subheadings aren’t just important for SEO. They’re also an important typography tool to help visitors quickly absorb information. All the elements on your page should balance out to make the most important items stand out without being overwhelming, whether that’s a headline, a testimonial, or a call-to-action. Page hierarchy should help visitors rapidly spot the most important information without having to read all of the text.
As an example, an event promotion should highlight all crucial information—date, time, location, etc.—preferably in a call-out box separate from the body text. A how-to guide should list steps in the proper order. The structure of this article is such that readers who want to skim it to learn about web typography can glance over the headers to see if any of them stand out as more relevant than others.
To Serif or Not to Serif
With or without serifs is one of the most basic distinctions between font types. Conventional wisdom says that sans serif fonts are easier to read on screens, because the characters are less likely to bleed together and cause legibility errors. Their simplified appearance also helps them to feel sleek and modern to most visitors. However, most readers are used to seeing serif fonts in print publications, especially newspapers, and they tend to allow for more stylistic elements such as ligatures. How do you decide which is more appropriate for your design?
One tried and true solution is to combine them, using Georgia—a large, serif font—for headings and the sans serif Lucida Grande for body copy. You can see this in practice on Medium’s home page, where the serif headline balances well against the sans serif font used for both the body and call-to-action buttons.
Limit the number of fonts you use.
The more fonts you have on your website, the more mismatched and disorganized it will appear. A good rule of thumb is to stick to two: one for the heading, and one for the body copy. If you need to add emphasis to text or establish hierarchy, you can do so by varying the font size, color, and weight. Take a look at this article from Moz:
As with the Medium example, Moz uses Roboto Slab, a serif font, for the heading and the sans serif Lato for other text elements.
By contrast, the New Yorker uses a combination of three fonts. Their headings are a transitional display font called Irvin that only include serifs on some characters. Meanwhile, the body copy uses Adobe Caslon with full serifs, while the byline for the article uses Neutra Face, a sans serif font.
The New Yorker manages this balancing act well, but three fonts is pushing it for most designers. More than three is almost certainly dooming your web design to confusing, patchwork design that will be difficult for most of your visitors to navigate or understand.
Test your font in various sizes.
Now that you’ve settled on a limited selection of two fonts (or three at the most), test your chosen fonts in various applications to see how they look in different sizes. You will probably find that your headline font needs to stay large, while your body font should be more versatile. Fonts sometimes need to be very small in areas like footers, captions, or sidebar text.
This is where the versatility of sans serif fonts come into play. Serif fonts tend to bleed together the smaller they become, causing legibility issues. Sans serif fonts, by contrast, can get very small before legibility becomes an issue. So if you’ve decided to use a two different serif fonts in headings and body copy, as in the New Yorker example, choose a sans serif font for your third and final option, and use it in small places where the text may be more difficult to read.
What does your font signify?
There’s a reason greenwashing exists: green makes us think of nature. It may not be a creative solution (and there are certainly more creative ways to implement it), but it’s not illogical. The same can be said of fonts.
As we covered before, serif fonts feel respectable because we associate them with print newspapers and old books. They lend an air of gravitas which is hard to resist in a header text. Calligraphic fonts with flourishes or extra ligatures appear elegant and regal. Handwritten fonts feel more personal, or even childish.
It’s easy to allow these things to turn your design into a cliché. But it’s equally important not to misstep and confuse your visitors with a wildly inappropriate font choice. Most legal firms choose serif fonts. If you want your legal firm to stand out, there’s no reason you couldn’t use a clean sans serif font instead, but you should avoid a hand-lettered font.
Use legibility as the litmus test.
If your visitors can’t read your text, it’s not doing its job. Legibility issues can arise on a number of fronts, many of which we’ve touched on already in this post. The font may be too intricate for its current application. It may be too small, or there may be insufficient kerning. There could not be enough white space between body paragraphs and headings. The color may not contrast enough with its surrounding, or the font may be too thin to read.
Bear in mind that these legibility issues may not be universal. You may be able to read body text just fine, but elderly visitors may find it too small. Or the font contrast may seem fine for you, but cause issues for a person with color blindness. These pose significant usability issues for visitors to your site, which is not only a disservice to these visitors, but a detriment to your business. So at the end of the day, make sure your typography choices have resulted in a legible design, and if they haven’t, adjust accordingly.