Previous Lesson

Typography that Works: Choosing Your Font Pairing

In this lesson we’re going to find you a pair of beautiful fonts so that all of the text on your website can look great and unique. And in order to find a great Font Pairing, I’ll just give you a quick introduction to the two main types of fonts that exist: Serif and Sans-Serif.

A serif is a decorative stroke that finishes off the end of a letters stem (sometimes also called the “feet” of the letters). And so a serif font is a font that has serifs, while a sans serif is a font that does not (hence the “sans”, French for “without”).

In this lesson, we’re going to find you a great Serif / Sans-Serif font pairing. The serif type font is going to be used for your Headings (think about Headings as titles and sub-titles) and, in turn, the sans-serif type font is going to used for your Body Text (think about Body Text as the paragraphs of your content, like the one you are reading).

I love the Lora (serif font) and Open Sans (sans-serif font) that your website is already using, but in case you want to explore other options, then do the following:

  1. Visit fontpair.co, my favorite resource to find great font pairings for free.
  2. Head to the Serif / Sans-Serif section. This is the type of font pairing that will work best on your website.
  3. Access your Theme Customizer and head to General Settings > Typography.
  4. Pick your new serif font in the Header Font dropdown menu.
  5. Pick your new sans-serif font in the Body Text dropdown menu.
  6. Click the Publish button to save changes.

What’s great is that in the Theme Customizer you can see changes in real time! Experiment with some font pairings and choose one that you feel good about. Most beginner’s websites don’t pay much attention to the fonts they’re using, or just use too many fonts. This ends up becoming very confusing because the reader ends up losing track of the text hierarchy and can’t distinguish titles from subtitles from paragraphs.

In my example project, I chose the font pairing Lustria (serif for my headings) and Lato (sans-serif for my body text). The video below will show you how I went through the process and followed the steps I mentioned above.

Enjoy the new look and see you in the next lesson!