×
Introducing Creative Market Pro: Download unlimited assets to elevate your work. LEARN MORE

Typographic Contrast and How to Pair Fonts for Interest

By on Aug 31, 2018 in How To
Typographic Contrast and How to Pair Fonts for Interest

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 FontsPin It

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 GrotesquePin It

 

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.

Free Font Pairing Cheatsheet


Download the cheatsheet

img

Download the cheatsheet

15 Pre-designed Font Combinations

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

Linkedin’s typography for articles:

 

Linked In Typography - FontsPin It

 

Facebook’s instant articles:

Facebook instant ArticlesPin It

 

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 InterestPin It

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 MarketPin It

Mentari – by Surotype

Twilight Script - Best Script fonts on Creative MarketPin It

Twilight Script – by Get Studio

Yonder - Best handwritten fonts for contrastPin It

Yonder – by Hustle Supply Company

Best Sans-serif fontsPin It

Greycliff - by Connary Fagen


Products Seen In This Post:

Free Font Pairing Cheatsheet


Download the cheatsheet

img

Download the cheatsheet

15 Pre-designed Font Combinations

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

3 Comments

  1. Thanks, this may boost my enthusiasm for typography even further. Your advice will be quite helpful. Love the fonts!

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →