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:

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.

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.

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

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.

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!

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!

Stuart delivered a logo for my business a few years ago and I'm really glad I went with him as the design has stood the test of time and I've used it extensively across social media etc. Highly recommendedread more

William E Spicer

14:02 01 Nov 17

Inkbot Design has tons of info and GREAT designs, check them out!!!

Rosalind.J. Lee

14:54 23 Oct 17

Inkbot's design work is world renowned, and his blog posts are clear to read.

John Sullivan

14:20 22 Oct 17

Convenient and easy to find location using Google maps.

Gary Finley

13:33 22 Oct 17

I find Inkbot Design a great place for ideas and general information. A vary informative site..Well recommended

Doug Wolfgram

12:23 22 Oct 17

Ink bot design has demonstrated superb skill in all areas of design. If you need a logo, web layout or general, branding project done, they're the firm to use.read more

Odin Wallace

12:02 22 Oct 17

I give this agency my highest rating for extensive knowledge and consistent service.

Stuart delivered a logo for my business a few years ago and I'm really glad I went with him as the design has stood the test of time and I've used it extensively across social media etc. Highly recommended