Select Page
 

One of our clients told me she spent 3 full days searching through fonts, trying to find the perfect font pair for her website. And she still couldn’t successfully pair 2 fonts together.

Three days??

Her story proves if you stumble blindly into the world of researching fonts, you may never come out.

Because I’m a big fan of keeping it simple, this post details a simplified approach to fonts and to creating your perfect font pairing.

In general, fonts break down into 5 groups: serif, sans serif, script, modern, and monospaced.
Serif fonts have small decorative strokes at the top and/or bottom of each letter while sans serif fonts don’t. “Sans serif” literally means “without serif”.

Typography experts once insisted that only sans serif fonts should be used on computer screens since those fonts are more readable. While this advice was once true, computer screen resolution has improved greatly. Long gone are the days when computer screens can’t clearly render serif characters.

In fact, research has shown that serif fonts are easier to read. The letters are more distinctive, and the decorative strokes help the reader’s eyes easily flow from one letter to the next, further increasing readability.

Script fonts are based on varied and fluid stroke of human handwriting. Modern fonts are actually a serif font that is characterized by variations between thin and thick bold lines. Monospaced fonts are those fonts whose letters and characters each occupy the same amount of horizontal space. These fonts are designed to replicate fonts produced by typewriters.

Font Personality

A study conducted in 2006 by Wichita State University’s Software Usability Research Laboratory concluded that fonts are associated with certain emotions. In this study, researchers asked 561 participants to rate the personality of 20 fonts using 15 adjective pairs. The 20 fonts could all be classified into one of the 5 font styles we described for you above.

Don’t be surprised if many of these fonts look familiar. Calibri and Arial are especially popular fonts used in print and online, as are Georgia, Times New Roman, and Cambria. While script fonts are typically those resembling cursive handwriting, script fonts can also resemble printed handwriting, as seen in Kristen and Comic Sans. Notice how Courier New looks very much like the font from a vintage typewriter.

Results from the 2006 study indicated that fonts sharing typographic features shared common personality traits.

Sans serif fonts did not score extremely high or low on any personality traits, indicating they are an all-purpose font. The serif fonts scored highest on traits such as stable, practical, mature, and formal, indicating they are a more traditional font. Script fonts received the highest scores for youthful, happy, creative, rebellious, feminine, casual, and cuddly. Masculine, assertive, rude, sad, and coarse were most associated with the Modern fonts. The final group, Monospaced, had the highest scores for dull, plain, unimaginative, and conforming.

In addition to being asked about each font’s personality, participants viewed the same 20 fonts and selected which uses were most appropriate.

While literally thousands of fonts exist, this study indicates the font family determines the emotion a particular font will elicit. Once you determine the emotion you want your font to portray on your site, you can look within that font family to find your perfect font. Being able to eliminate fonts from other families will narrow down the options A LOT.

How do you choose the personality you want your font to display? Well most brands could eliminate monospaced right away. After all, who is looking for a dull, plain, or unimaginative font or a font whose best use would be technical documents? Modern display fonts are also tricky to use as their personality includes rude, assertive, and course. Few websites or brands could pull that off.

Eliminating monospaced and modern fonts leaves use with serif, san serif, and script.

Font Pairings

While the “no serif fonts on computers screens” rule has, in fact, been over ruled, one rule remains: never use more than three fonts on a page.

Ok, that’s not a rule either, but it is a good guideline as too many fonts can get distracting. In fact, web pages look best when 2 fonts are used: one for headings and one for body text. Adding a third font for subheadings or calls to action can be easily accomplished by simply adding italics to or using the condensed or bold version of your body text. Using variations of your body text will provide the contrast you are looking for while maintaining a polished, cohesive look.

A san serif heading paired with a serif body text is the most common pairing and works well because these fonts contrast one another well, which creates interest and stimulates the eye. Also, remember how the san serif font did not rate high or low for any personality traits? That means it works well for a variety of layouts. Finally, serifs fonts are easier to read, and an easy-to-read font is important for reasons you may not even know.

Studies have shown that when instructions are presented in an easy-to-read font, participants believe the tasks themselves are easier to perform. And the reverse is true as well. When given instructions in hard-to-read fonts, participants will tell you that the instructions are more difficult to perform. This relationship is an example of cognitive fluency: when our brains have difficulty processing information, the tasks at hand appear more challenging.

Therefore, if you are creating a website that includes a call to action, and everyone should be creating a website with a call to action, then you want the font to be easy to read so your visitors believe that the action you are asking them to take is easy. When something is easy to read, it always seems easy to do.

Finding an eye-catching san serif and serif font pairing can be easy. One of my favorite tools for finding font pairings is call Canva Font Combinations. To use this tool, simply click on the dropdown box to select a starter font. As you scroll through the options, you will see several serif and sans serif options. After you select your starter font, Canva will generate several font pairings for you and show you how those pairings look together when used for a heading and body text. Canva also lists a website that uses this pairing so that you can see these font pairings in action.

Another option for finding font combinations is to visit the websites that you love and see what fonts they are using. If you are using Google Chrome as your web browser, you can easily install the WhatFont Google Chrome extension. When WhatFont is activated, it will tell you the name of any font used on a website. Changes are, you will be able to find the same, or a similar font, already loaded on your computer or in your WordPress theme. Or, you can search sites such as Google Fonts for a free version.
Or, you can use one of the font pairings that we’ve provided in the bonus cheat sheet. We know all too well how easy it is to get lost in the myriad of font options…remember how our client spent 3 full days looking at font combinations online…so we’ve provided plenty of pairings for you to choose from. Not only does the cheat sheet include 18 different font combinations, but we’ve provided free links to each of the font pairings. To load the font pairing onto your computer, simply follow the instructions in the video below.
Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!