Resources and Rules For Web Typography Newbies

by Angela Noble

Last updated on March 6th, 2018

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. 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,, and 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

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!

One Comment


Get updates on new articles, webinars and other opportunities:

Angela Noble

Angela Noble runs Noble Intent Studio where she specializes in email marketing, branding, and website creation. Email her at or follow her on Twitter @AngelaNoble_.


Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.


Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. August 10, 2012 at 8:52 am

    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!

Show Me My Heatmap

Ah, @CrazyEgg I really do love you! So useful evaluating how users are interacting with all aspects of our redesign

Mike Halligan


What makes people leave your website?