Resources and Rules For Web Typography Newbies

by 1 08/10/2012

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.

http://www.carnationgroup.com/

Rocketr.com pairs the slab serif font Adelle with Open-Sans to create this clean, straight forward look.

https://rocketr.com/

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.

http://www.fourseasons.com/newyork/

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.
http://www.webtype.com/tools/swapper/

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.

http://chengyinliu.com/whatfont.html

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!

About 

Angela Noble is a designer and partner at Kovalent who specializes in print and web design. You can find out more about her and view her portfolio at http://angelanoble.com or follow her on Twitter @AngelaNoble_.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

1 COMMENT

Damien Elsing

Great post, Angela. The What Font tool is a great help as I am sick of pasting fonts into those clunky “what font is that” websites to try and find out what they are. Thanks!

August 10, 2012 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>