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.
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
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
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.
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:
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:
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.
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 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.
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.
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.
Originally published at inkbotdesign.com on March 2, 2015.