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.
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.
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.
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.
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.
Results from the 2006 study indicated that fonts sharing typographic features shared common personality traits.
In addition to being asked about each font’s personality, participants viewed the same 20 fonts and selected which uses were most appropriate.
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.
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.