Font combinations that work together well

Print Friendly, PDF & Email

I’ve got a logo and I’m going to use it! This is the attitude of many companies after purchasing a shiny new logo. However, your brand or trademark is only part of the story when it comes to presenting a professional image to the world at large.

A poor or non-existent house style is a recipe for diluting your message, and confusing your prospective customers. Engaging different people to design your website, stationery, and marketing materials requires a strict set of rules, otherwise your company image is going to dissolve like a sugar cube in a hot cup of tea! A good house style will define at least things like:

  • logo usage, particularly minimum spacing from surrounding elements, if it’s colours and background colours are mixed, and so on.
  • Colours to be used in presentations – in particular to type/text.
  • The typographical rules to follow – in particular, the font families to be used and where they should be applied.

There are so many fonts – which do I choose?

Some designers can become truly evangelical about their beliefs on the topic, and may even appear to vanish up their own posteriors – so be careful not to get too bogged down with the finer nuances of type design – keep your feet on the ground, and get some advice from a designer who respects your budget and has a proven record of sensible typographical design under his/her belt.

Although there are literally tens of thousands of fonts out there, there are two main classifications which almost all fonts fall into, and everyone can understand without being an expert – Serif typefaces (e.g. Time Roman), which have terminators (serifs) of some sort on the end of their strokes, and Sans-Serif (e.g. Arial) which don’t.

In this example I am going to look at a simple masthead/heading and body text font combination. This is a good starting point for any typographical design strategy. I’m not a great fan of rules – and any designer like me will probably try it on from time to time with something different – but even designers who bend and break the rules (usually) do so with the following minima in mind.

Rule one – opposites attract (sometimes)

One of the most commonly adhered to rules of combining fonts is to choose a complementary Sans typeface and a Serif typeface. Why? Take a look at this:

Typographical Mis-Match

The heading (Adobe Jenson) although different from the (Times Roman) body text, gives an overall effect of dullness and lack of direction or structure. There is no real contrast in the design – delineation between headings and body text can become unclear, particularly if there are sub-headings.

By choosing a Sans-Serif for one, and a Serif for the other, we can achieve contrast, and by choosing the right combination of fonts, we can achieve a style where the two compliment one another, and say something about your organisation. Consider this:

Renault and Apex NewThe overall effect is far better – The heading (Renault Light) is now set against Apex-New from Village Type. There is no longer any doubt if we are looking for section headings within a document. Also, we can project an image of modernity through the use of a contemporary sans serif font for body text, and yet still project authority and accomplishment by sticking with the Serif headline.

There are other reasons for choosing this duo, which we will now consider.

Rule 2 – How much stress can you handle?

So, we have determined that a great way to add some contrast and excitement to our layout is to join up a Sans and a Sans-Serif font as a team. Although this is a good starting point, there are still many other factors to consider. Something to consider when teaming up fonts is how different they are in terms of their design roots, as this can induce beneficial stress in the design.

Typography, arguably, has a history that goes back to before the first printing press was invented. Different styles of writing gave birth to different fonts at various points in recent history, all of which evolved over time – some diverging, others converging. The point I’m making is that it’s possible to combine fonts that are quite similar and create little distraction to the reader, despite one being a Sans and the other being a Serif. Likewise, there are some combinations that will make much more of a design statement – for corporate literature it is normally safer to opt for the less jarring partnerships.

X-height : Consider the partnership shown above between Renault and Apex-New. This is a nice combination for formal corporate material, because both fonts have a similar ratio of x-height to body height. The x-height is the distance between the baseline (the imaginary line that all letters sit upon), and the top of letters such as o,e,u,c etc., known as the mean line. The body height is the distance between the highest and lowest parts of the letterforms. This is illustrated below:

X-Height explained

Traditionally, when movable type first emerged, the x-height was much smaller in proportion to the body height – mainly because early fonts were based more closely upon hand writing. However, it soon became clear that a larger x-height could enhance readability at smaller sizes (first exploited in modern times by AT&T, when Bell Centennial was developed for phone book usage.) Nowadays, we see fonts with wildly varying x-heights, so there is plenty of choice.

There are varying arguments employed in determining whether you should find fonts with a high or low ratio of x-height to body height for any application, but whatever you choose, you will give the reader a smoother ride if both your Sans and Serif fonts are not too far apart in ratio.

Rule 3 – Colour (or color!)

We are starting to drift into more contentious areas now. With colour, we are not referring in a literal sense to whether you want to paint your wagon red, blue, or pink. Colour is an overall term, that describes subjectively the amount of ink on the paper compared to whitespace. In terms of typography, colour can be determined by:

  • The actual design of the typeface or font itself – for example, some fonts have smaller gaps (counters to use the technical term) in the enclosed areas of letters (d, p, a, o, b, a, g and q) and so the overall effect is a darker page.
  • The leading, tracking, and kerning employed – how much vertical space is there between successive lines, how close is each letter placed to the one preceding it, and how much that space is further adjusted for specific character pairs.
  • The weight of the cut – How many variations does your font come in? If it only has normal and bold, then your choices are going to be limited.

Again, it makes sense to choose fonts which present a similar colour on the page.

Rule 4 – A big family is more flexible

If you will be producing a lot of lierature, it may be wise to choose fonts with at least, light, book, medium and bold in the family. Particularly with smaller type, you will find that you may need to add a little weight (make it bolder) in order to balance the page.

Likewise, at very large display sizes, you may find that your font has apparently put on weight, appearing heavy and clumsy, so reducing the weight of the typeface (using a light or display variant for example) will help. You can see the differences between Display, Caption, and Normal cuts of Adobe Garamond below. See all of the subtle changes to just this glyph. These different cuts enable different sizes of Garamond to be used on the page (without perceived differences in weight), and yet maintain the same overall colour. It’s all about producing a look that doesn’t distract the reader from reading what you are trying to tell him!

Caption and Display cuts

More mature fonts have large extended families – which can be very useful. Adobe Garamond Pro is very popular not least because Adobe made it available to owners of it’s design products some time ago – This font comes with light, regular, medium, semi-bold, bold, diplay and caption cuts! There are fonts with much larger families, but this range of cuts is normally ample for any application.

Some combinations that work

Lets get down to business – finally! Here are a list of some font combinations that I have used in the past. It is by no means exhaustive, and is reasonably conservative, but it should give you enough to get an idea for the kinds of things that can work together. Many of these fonts rank amongst the most popular fonts in use today – that’s not always a good thing for individuality, but it is usually a good way of avoiding mistakes! I have also included some that use much more recently designed fonts, again by leading designers. These fonts are all available either freely bundled with many software applications, or from font foundries for a reasonable fee. Further down you can download the PDF for offline viewing.

Font combinations that work

Reading this kind of thing on screen is not always the best way to evaluate typography, so you can also download a PDF of the font combinations by right clicking the preview below and saving the PDF to your local PC.

Download the font combo PDF

That’s it! I hope you found this introduction a useful guide to choosing the right look and feel for your business, or if you are interested in design, I would love to hear your comments or suggestions on other great font combinations that work.

Just some keywords! Font combining, font pairing, combining type. Adobe Warnock, Museo, Univers, Minion, Myriad, Baskerville, Caecilia, Apex New, Village Type, Zapf Elliptical/

Tags: , ,

10 Responses to “Font combinations that work together well”

  1. Ansh August 14, 2013 at 3:47 pm #

    Thanks for this informative guide.. Really appreciate this…

  2. Gaby June 9, 2013 at 12:28 am #

    excellent post! thanks! 🙂

  3. Shepherd Jim June 3, 2010 at 12:35 pm #

    Thanks for the typog-help! I’ve grabbed your Super 8 combos to show my better half and business partner.

    PS – I’m old enough to remember the original “Super 8” — it’s nice to not be offered another “top 10”.

    • Steve Sant June 3, 2010 at 12:45 pm #

      Less is more – particularly when you have to cook dinner! Yeah, I still have a box of 8mm childhood movies in the attic I keep meaning to transfer to DVD! Thanks for the comment, Jim!

  4. Steve Sant June 3, 2010 at 8:10 am #

    Thanks Andy. The oldies always produce a safe design, but I wanted to throw in some more recent fonts too. The article was getting a bit long, and was primarily aimed at non-designers. Rather than simply repeat Mr Williams’ excellent essay in layers magazine I thought I would just throw some more contemporary example font combinations out there 🙂

  5. AndyMoon June 2, 2010 at 7:52 pm #

    Not the first font combination list I’ve seen, but nice to see more contemporary fonts being looked at for a change. Nice introductory narrative but you don’t mention the contrast/concord/conflict theory.

  6. KirstyB May 30, 2010 at 8:37 am #

    Thanks for a really handy guide. I have just set up my business and wish I had read this before!

Trackbacks/Pingbacks

  1. Typography Resources | Screen Design Summer 2012 - July 2, 2012

    […] http://www.sant-media.co.uk/2010/05/font-combinations-that-go-together-well/ […]

  2. Fall '11 Screen Design class - October 17, 2011

    […] http://www.sant-media.co.uk/2010/05/font-combinations-that-go-together-well/ […]

  3. typography « Fall '11 Screen Design class - October 17, 2011

    […] http://www.sant-media.co.uk/2010/05/font-combinations-that-go-together-well/ […]

Leave a Reply

Bot test * Time limit is exhausted. Please reload the CAPTCHA.