Categories / Tutorials

Typographic Contrast and How to Pair Fonts for Interest

Tim Brown March 31, 2021 · 5 min read
Pinterest
As a web designer I’ve come across so much bad typography on the web. Some people don’t even understand that font selection is a significant factor in creating high-end design, opting instead for Open Sans on every project because it’s a Google font, and it’s free. If content is king, typography is its red carpet. Typography sets the tone for online publications, brands, and applications of every type and variety.

Typography Helps a Design Look Readable

If typography looks sloppy, the interface or design feels unprofessional. If the design looks unprofessional, what does that say about the company or organization it represents? Because customers can’t always see the product or service that the website or print publication is representing, they have to make guesses. Guesses based on the look and feel of the website, on your photography, reviews, badges, and what is visible. And what takes up much of the page? Content – using typography. Do they consciously think to themselves “this font pairing looks disjointed, therefore I think this company may be unprofessional”? Maybe not, but I promise you that it still affects their decision-making process subconsciously. What about if you have a classy – very intentional and considered font pairing that grabs people’s attention and is readable and legible? They’re more likely to read the content and associate the high-end feel with your brand.

Typographic Contrast

Font pairing is like color theory in that if you take two colors just a shade off from each other, the combination can look unintentional and thus unprofessional. Make sure to choose fonts that are different enough to complement each other, without looking like they’re fraternal (not identical) twins. Here’s an example of that. Typographic Contrast - Pair fonts for interest - Pairing Google Fonts Are both the headline font (Surveyor Display Black) and the sub-headline font (Baskerville Bold) classy fonts? Yes! But the problem comes when an undiscerning eye might just perceive them as similar, which causes a connotation of messiness. What would be better? How about a pairing of a big blocky san-serif font (Brandon Grotesque)  as the main headline and keeping the serif Baskerville in place as the sub-headline? Typographic contrast - Pairing fonts Baskerville with Brandon Grotesque  

How Many Fonts Should I Use?

You don’t need to limit fonts to two, but make sure you can master using two before moving to three and so on. Veteran designers can wield ten fonts and still manage to make their designs look exquisite, but if you are just starting out, my suggestion is to limit yourself to two fonts until you really start to master this art – and then move on to three and master that. Utilizing fonts is kind of like juggling, if you don’t know how to juggle two you won’t be able to juggle three, and using six is going to be a disaster. Similar to juggling as well, there are a lot of designers that can juggle three, but very few who can make using six look effortless.

Pairing Fonts for Interest

Medium.com has long been a advocate of clean readable typography, and social networks like LinkedIn and Facebook have since improved the typography for people writing and reading articles on their platforms. Perhaps these sites were inspired by Medium’s very intentional approach, or at least ‘downwind’ from it.
Font Pairing Cheatsheet
15 Pre-designed Font Combinations
Free Font Pairing Cheatsheet

We’ve curated a list of font styles that work well together so you can design interesting type lockups in minutes.

Download the cheatsheet
Linkedin’s typography for articles:   Linked In Typography - Fonts   Facebook’s instant articles: Facebook instant Articles   Why does it seem like these companies are creating a highly intentional set of fonts for readability on their platforms? People are going to read longer. They’re also going to likely enjoy the experience of writing on their platform – instead of their blog or other publishing options because there’s a lack of quality in, whether they realize consciously or not, the typography. The feel…. The line-height, the visual hierarchy in the headlines and the overall cohesiveness of the experience. The trick is to integrate that feeling into our designs and products. By using contrasting fonts – for instance a very bold sans-serif font, a lighter sans-serif and a bold serif font we can create variety, if you balance this with weighing the attributes and similarities in the fonts to make sure they are not so far-flug that they appear hap-hazard you now have interest, but also a high-end feel. So said more succinctly – fonts paired for interest should be:
  • Similar enough in certain attributes as to feel related.
  • Different enough in classification (serif, sans-serif, script, display, etc), size and weight to provide sufficient contrast.
Here’s an example of some Google fonts used in a way that provides visual hierarchy. Font Pairing for Interest The largest heading is a slab-serif ChunkFive – bold and blue with a thick line under it, it obviously commands attention. The serif subheading Crimson Text Italic complements it, but also contrasts sharply stylistically, followed by the bolded Montserrat side-note and the Montserrat paragraph and link.

Bonus: My Favorite Fonts on Creative Market

Being that I care so much about typography, naturally I’ve had the chance to browse and find some excellent fonts on Creative Market. I thought I’d share a few of my favorites, that will be sure to grab people’s attention, when used tastefully: Mentari - Best fonts on Creative Market Mentari – by Surotype Twilight Script - Best Script fonts on Creative Market Twilight Script – by Get Studio Yonder - Best handwritten fonts for contrast Yonder – by Hustle Supply Company Best Sans-serif fonts Greycliff – by Connary Fagen
Products Seen In This Post:
Font Pairing Cheatsheet
15 Pre-designed Font Combinations
Free Font Pairing Cheatsheet

We've curated a list of font styles that work well together so you can design interesting type lockups in minutes.

Download the cheatsheet
About the Author
Author
Tim Brown

Tim Brown is a Minneapolis web designer obsessed with typography, creating websites with a high-end feel and focused on the disciplines of driving traffic and conversion. You can tweet him at@timbdesignmpls

View More Posts
Related Articles