Font Pairing in Web Design—How to Choose the Exact Fonts You Need for Your New Website

, , Comments Off on Font Pairing in Web Design—How to Choose the Exact Fonts You Need for Your New Website

Font Pairing in Web Design

Choosing appropriate the fonts you want to use for your website—we call this practice, “font pairing.”

By font pairings, I’m referring to how to choose a “set” of fonts (two or more) that will be used for specific types of written content on your website.

For example, you pair fonts when you decide you want to use Open Sans for your headings (one type of content) and Gentium Basic for your paragraphs (another type of content).

Ideally, you want to find fonts that complement one another and are not fighting for the viewer’s attention.

While you’re probably familiar with the idea that many different fonts exist, you’ve probably never thought much about what separates one font from another—we’ll talk about different characteristics of fonts below.

Designing typeface families or fonts is actually really complicated and involved (if you have the chance, watch the movie Helvetica sometime to see just how involved it gets.)

Here are a few DOs and DON’Ts that designer’s swear by for coming up with a beautiful font pairing:


Use Contrast

Contrast, which basically means using two fonts that are distinctly different from each other, helps create visual interest—for example, a very thick font compared to a very thin one. Contrast is king when it comes to font pairing.

You can create contrast by using:

  • Weight (Light, Medium, Bold, Extra Bold)
  • Size (Example: 30 pt. Heading and 16 pt. Body Paragraph)
  • Style (Italic, Oblique, Small Caps, Strikethrough, Underline)
  • Color (Using Blue for Headlines, and a Dark Gray for Body Content)
  • All Caps vs. No Caps

Pair Different Classifications

Fonts are like dogs—there are some major “Groups”, such as the toy group (what we call classifications), and within those, you’ll find more specific “Breeds” (when it comes to fonts, these are categories).

Here are some of the major classifications of fonts

  • Serif
  • Sans serif
  • Script
  • Decorative

These can all be broken down further into categories.

For instance, sans serif can be divided into geometric, humanistic, or square.

Contrast is key, so pairing two different type classifications is a method designers often use when pairing fonts for a website.