Google Font Combinations – The Art of Mixing Typefaces

Google Font Combinations – The Art of Mixing Typefaces

If you’ve been a designer for any significant amount of time, you’ll know that one of the most difficult and painstaking tasks you can undertake is that of choosing and combining typefaces.

Sure, you might have a go-to list of self-curated typefaces that you regularly turn to when embarking on a new design project but even so, knowing which of those fonts are likely to work well together is never an easy task.

Luckily, there are resources out there that can go at least some way towards helping you make these decisions.

For example:

 

Google Font Combinations Infographic

 

This neat little Font infographic from FastPrint (get it bookmarked!) serves as a great cheat sheet if you’re a regular user of Google Fonts, as it shows which typefaces make great font combinations, which are unlikely to work well together, and which are almost certain to look terrible together.

You can also use this tool if you want to preview how two fonts actually look alongside each other without having to open up Photoshop.

Here is a few other tips and tricks for getting your typeface combinations right:

 

 

Sans Serif + Serif font combinations = YES

 

It’s extremely important that you create a certain amount of typographic contrast in your design(s) and one of the easiest ways to do this is simply to utilise a serif and sans serif combination.

Here’s a quick overview of the two types:

 

 

Combining Serif fonts

 

Combining Serif Fonts in Design

 

 

Serif fonts have small flicks (or lines) trailing from the end of every character/symbol.

Although every serif typeface will be slightly different, this is the easiest and most obvious way to distinguish one.

Typically, serif fonts are easier to read and easier for the brain to process, as each individual letter is more distinctive (thanks to the flicks). They’re often used for print where the size of the lettering is quite small (e.g. in newspaper print).

Serif fonts are also generally classed as being more formal in appearance when compared to sans serif typefaces.

 

 

Sans Serif font combinations

 

Combining Sans-Serif Fonts in Design

 

 

Unlike serif typefaces, sans serif fonts do not feature the small flicks trailing from the end of every character. Sans serif fonts are simple, stylish and modern – therefore, they tend to be used more on the web as opposed to in print.

Sans serif fonts can be easier to read on screens with a low resolution, as they are much more simplistic in their appearance.

They’re also generally less formal in appearance when compared to serif fonts – this makes them perfect for brands with informal, fun branding.

 

if you are looking for a professional graphic designer, click here to get a quote now!

 

A match made in heaven

 

If you look at just about any website, printed project, or company branding showcase, you’ll notice that in most cases, the designer will have made use of both serif and sans serif typefaces alongside each other.

The two types work extremely well together because they provide contrast.

Generally, sans serif typefaces are better for large, bold headings, whereas serif typefaces are better for the smaller and more precise text.

For example, in a blog post, it might be wise to use a sans serif font for the main heading with a serif font for the body text.

However, this rule isn’t set in stone and in some cases, things can work better the other way round. It’s all about experimenting and figuring out what looks good in your project.

 

 

Use typefaces sparingly

 

It’s always easy to get carried away when you’re choosing the typography for a project, as there are just so many great typefaces out there.

However, in most cases, it pays to use different typefaces sparingly.

The reason for this is that with too many different typefaces featuring on one-page (or one print project), the whole identity of the project will start to get confused and cluttered, which is never good for branding purposes.

For example, take a look at this:

 

Combining Too Many Typefaces in Design

 

It’s clear that there are a number of different typefaces in this image and it’s also clear that things are starting to get a bit cluttered and confused.

You’ve got a large sans-serif typeface for the heading (which looks fine on it’s own) combined with a serif sub-heading, a different serif body typeface, and finally, a paragraph written in a sans-serif font.

The result: an odd combination of typefaces that create an extremely confused image. It would have been much better to just pick one or two typefaces and stick with them throughout the design.

Here are a couple of good examples of websites that use typefaces sparingly:

 

Combine Fonts in Google

 

 

The screenshot above was taken from HugeInc.com and as you can see, there are only a couple of typefaces being used throughout the whole design.

In this case, the website makes use of a large sans-serif typeface for the heading and a complimentary sans-serif typeface for the body text.

If you look at the rest of the site, you’ll notice that this same pairing of typefaces is used consistently throughout, helping to create a clean, uncluttered and clear brand identity.

 

Combine Google Fonts in Design

 

 

This is also the case for the Image Mechanics website shown above.

It makes use of just a couple of typefaces, with a large sans-serif typeface (Helvetica) for the headings and a serif typeface (Georgia) for the smaller body text.

No other fonts are used throughout the design – this helps to ensure that the design is instantly recognisable and helps to form part of the brand identity.

Note: You could quite easily reverse this design and use the serif/sans-serif typefaces the opposite way around (i.e. serif for headings and sans-serif for body text). It might not have exactly the same impact or look quite as good, but in theory, it should work in most cases.

 

 

Don’t mix typefaces

 

Considering the fact that this post is all about mixing typefaces, this might seem like a weird point to make but in some cases, using just one typeface can work extremely well.

For example, take a look at this website design from Jonathan Krouse:

 

Jonathan Krouse Combines Google Fonts Well

 

Jonathan only uses one font through the entire site: Tundra Web Pro.

From quickly glancing at the image however, you probably wouldn’t instantly recognise that this is the case.

The reason for this is that he has used varying font weights, sizes, colours and styling to provide hierarchy in the design, rather than numerous typefaces.

For example, the large heading on the homepage is written in a font size of 100px. He also uses bolding (for his name, Jonathan) and colour (for the word “Edenspieker”) to draw attention to certain important aspects of the design.

 

How to Combine Fonts in Google Fonts

 

He uses yet a different set of sizes and colours to create design hierarchy in his blog posts too, as demonstrated in the screenshot above.

 

Google Fonts - How to Combine for Good Design

 

Using just one typeface through a design is more common than you might imagine – the website in the screenshot above also does it (in this case, Georgia is the only font used).

It’s a great trick to use if you want to keep things simple and minimalistic, without overcomplicating the use of typography in your design.

It doesn’t work for everyone but if you use styling to your advantage, you can create some pretty epic designs this way.

 

 


 

 

Bio: Shaun is a graphic designer based in the UK, with a particular passion for typography and the more subtle aspects of design. He is a big fan of minimalistic design and regularly blogs on the topic.

 

 

Leave a Reply

9 Comments on "Google Font Combinations – The Art of Mixing Typefaces"

Notify of
avatar
Sort by:   newest | oldest | most voted
Frank Woodman
Frank Woodman

I’ve learned more about typefaces and such from your posts than I ever thought I would know. It’s much appreciated that you share this and do it in a way that it’s easy to understand. Fonts,Typefaces, and other printing issues aren’t easy to find help understanding. You’ve given me a whole new insight in how to work with and design the written page as art not just words. Thanks.

Robert Frank

Thank you for this information!! I have struggled with getting good matches for fonts. This has helped me a great deal. I have also saved your cheat sheet info graphic for quick reference. Thanks again!

Tom Edwards

Fantastic blog post, spent some time last week looking for this level of information. Like Robert I have pinched your cheat sheet for future use.

Angus Whitton
Angus Whitton

A really informative and useful article.

Am I right in thinking that using the wrong combinations and too many varieties will produce just as bad a result when applied to colour choice – both in typeface colour and background colour?

Angel Rodríguez

REally a good post, well, i think there are needed more blog as yours!
Congratulations!:

Douglas

Here is a helpful guide, and a book full of combination examples:

http://bonfx.com/29-principles-for-making-great-font-combinations/

Adam

Great post. One of the most time consuming things to do in Graphic Design. is work out which font goes with which. Keep up the good work. 🙂

Robert

Thank you, Stuart, for such a thorough and informative tutorial. A lot of hard work and time has clearly gone into this article. I only wish more designers would read it and deploy the advice you have given. The use of fonts, in general, across the internet is pretty haphazard to say the very least!

wpDiscuz