It’s been only in very recent times that typography on the web has opened up to more than just web safe fonts. With new (and many times free) web fonts gaining in popularity, web typography is becoming a lot more interesting – and challenging.
To navigate the world of web typography, keep these two guidelines in mind when choosing font combinations.
1. Sans serif vs. Serif
As a general rule, reserve serif fonts for headers and calls to action and use sans serif fonts for body copy or large chunks of text. As with any rule, there are exceptions. In some contexts, serif fonts can work well for body copy; but it’s generally recognized that sans serif fonts are more legible on screen.
2. The Rule of Two
In the spirit of simplicity and refining, limit your site to two font faces. Using much more than that will add confusion and cause you to lose the hierarchy your font combinations are working so hard to establish.
These two guidelines in mind, the simplest way to pick the perfect font combination that will add balance and contrast to your design is to pick one serif and one sans serif typeface.
Let’s look at some websites that got it right.
Carnation Group pairs the font Chevin with Helvetica (or your system’s sans serif) to create a unique, branded look for their headers and a simple, readable font for paragraphs of body copy.
Rocketr.com pairs the slab serif font Adelle with Open-Sans to create this clean, straight forward look.
The Four Seasons pairs League Gothic in the navigation and call to action button with Adobe Garamond Pro in the body copy and headers. With the amount of body copy on the site, and the size at which Garamond is used, this is a successful use of a serif font in the body copy.
Looking for more font combinations? Check out the big book of font combinations by Douglas Bonneville. In his book, Douglas not only give you 350 great font pairs for inspiration, but also gives some design principles to consider when choosing font combinations.
Web Font Resources
You can buy professional fonts with web-licenses from many online font distributors including myfonts.com, fontspring.com, typekit.com and typotheque.com. Most sites have licensing options which allow for print and web use. If you’re looking to give webfonts a try, but aren’t ready to pay for their use, give the free Google Webfonts a try.
If you want to see your (or any) site with a font facelift, try out the font-swapper from webtype.com.
To find out what font is being used on a webpage, use the WhatFont bookmarklet/extension. WhatFont is easy to use – with just a click it tells you what fonts are used in a webpage along with what size, color and line height are used.
Know of any other sites that have a good handle on font pairing or have an example that successfully breaks the rules? Leave them in the comments!
Original post published on Crazy Egg’s blog “The Daily Egg”. Archived here.