Type Genius: the joys of font-pairing

Tweet

I'm a little bit obsessed with nice fonts - I love how they can impact on design and help tell your story. An aspect of design which is often undervalued is the combinations of fonts: pairing up fonts (or sometimes mixing groups of three fonts, ideally not more than three in one design) for posters, or social media campaigns, or PowerPoint presentations.

I've just found a great site called Type Genius that helps out with choosing fonts, more on which below.

Here are four font combinations I like, three of which I've used, and all the fonts for which can be downloaded individually from Fontsquirrel:

BEBAS NUEUE AND MONTSERRAT

The first combination is what is used for the blog and much of the rest of site. The blog title is Bebas Nueue and the body text is Monstserrat. (Whenever I use Heading 2 in the formatting that's also Montserrat, but in all-caps - the Heading 3 used in this post os back to Bebas Nueue again). I chose them mainly because when I rejigged the design of the site recently I wanted a thicker body text font, so chose Montserrat which I've been using since I saw Matthew Reidsma use it for his UXLibs I keynote. Bebas compliments it for titles because it a tall and narrow font in contrast with Montserrat being thick and more rounded.

LATO AND ROBOTO SLAB

The second combination I've not used at the time of writing, but got from Type Genius - which you can find at typegenius.com. You tell it what font you want to use, and it gives you a number of potential companions to pair with it (as it happens when you put in Montserrat it suggests Bebas Nueue, as used on this site).

In the case of Lato and Roboto Slab, I've actually not used the Regular Lato in the example above at all - I used Lato Thin for the first part and Lato Heavy for 'titles'. I do like the contrast of light and heavy.

RALEWAY AND... RALEWAY

Which brings us to the third combination, which isn't technically a pair as it's just Raleway used in three different ways. I love Raleway beyond all other fonts. As long as you have both Raleway Regular and Raleway Bold installed (although PowerPoint will try and Bold non-standard fonts when you highlight them and click the Bold button, it's not the same as actually installing the Bold version that the typographers intended) they work so beautifully together, especially in all caps. The intro to UX presentation I blogged about recently used Raleway in all possible combinations (Regular and Bold in both lower and upper case) with no other fonts involved:

What is UX and how can it help your organisation? from Ned Potter

The other joy of Raleway is it renders perfectly on Slideshare. Some other fonts, even when you save and upload your presentations as a PDF, go a bit blocky on Slideshare, for example my LIANZA Marketing Manifesto slides, which use Raleway along with ChunkFive Roman - the latter looked great at the conference but not so good on Slideshare, but Raleway was perfect in both situations.

MATHLETE BULKY AND CAVIAR DREAMS

I used this combination for my Tuning Out The White Noise presentation which became the most popular thing I've ever put on Slideshare (despite Mathlete Bulky not rendering properely on the site) and I use it in some of my training materials, so I've become slightly bored with it due to over-exposure! I also over-used Mathlete and have since changed it round so it gets much less use in my slides, because it's a little too quirky for any kind of long-term reading. I like the way it looks but usability has to come first.

Further reading

For more info and guidance on font-pairing, check out this article from CreativeBloq, and Canva's Ultimate Guide to font-pairing.

If you have a particular pairing you'd recommend I'd love to hear it in a comment below.

Presentation Tools 1: Fontsquirrel

Tweet

I love a good presentation. I think they're often the best way to communicate information, and I create them as stand-alone online objects as well as for actual talks to an audience. So it's Presentation Tools Week on the blog - seven different useful tools from the list below, explored over the next five days.

These fall into two broad categories: tools for creating presentations from scratch, and tools for making PowerPoint presentations better in some way

When I began giving presentations 5 years ago, I remember looking at Bobbi Newman's, Buffy Hamilton's and Helene Blowers' Slideshare accounts and being amazed that slides could look so beautiful. My horizons were truly expanded; previously every PPT I'd seen had been functional, boring, and (as I later learned) ineffective as a communication method. I learned by trying to expose my brain to as many great ways of putting together a PowerPoint presentation as possible, and trying things out to see what worked for me.

These days things are a lot easier, as there are several helpful tools which assist you in creating effective and pretty slides. Some of them do a lot of the work for you, and some of you provide a helping hand for specific elements of a presentation. I've summarised the 7 tools I think Past Me would have found most useful. Hopefully if you're reading this you can take something from one or more of these platforms too.

Tomorrow we'll look at an alternative to PowerPoint, but for now we'll look at working with it, using non-standard fonts. It took me a long time to realise just how important fonts were to a good presentation.

FONTSQUIRREL (fontsquirrel.com)

FontSquirrel is a website full of downloadable fonts, and I use it ALL the time - it's the first port of call for non-standard fonts. I think using new fonts which we're not all over-saturated with from the Office suite can make a HUGE difference to how good a presentation or poster looks, and everything on FontSquirrel is free even for commercial use.

Examples from FontSquirrel

I use Megalopolis Extra in loads of presentations, along with Aller, Caviar Dreams, ChunkFive Roman, Quicksand Book, and Pacifico. You need admin permissions to install fonts on your PC, so if you can't have that permanently at work, try and get it for a couple of hours, go onto FontSquirrel, and go mad downloading interesting fonts. Once you install them they install across the Office Suite, so you can use them in Word as well. Try it!

(NB: An alternative to FontSquirrel is DaFont, which I've heard people recommend, but I can't vouch for it as I've never used it myself.)

Remember to save your PPT as a PDF when using non-standard fonts! Otherwise when you come to present on a different PC without the fonts installed, it will almost certainly go horribly wrong.

Some guidance around fonts - generally it is thought that you should use a maximum of 3 fonts per presentation (although as with all 'rules' around presenting, feel free to break this one if you have a good reason), and my personal minimum font size is 36 for slides.

Font-pairing is an art I feel like I've not mastered at all, but would like to - I found the following (albeit very brief) presentation helpful:

The Ultimate Guide to Font Pairing from Guy Kawasaki

7 Super Slide Styles to download, copy, and adapt

Tweet

I love slides, as I've said before. One of the biggest problems people have when trying to make something effective and visually arresting is simply knowing where to start. Or having not much time at all, so they can get together the content but don't have chance to put it into a new style.

So with that in mind, I've created the presentation below. It features the same information presented seven different ways; if you like any or all of them, you can download the original PowerPoint from here, and do whatever you want with it. Delete the bits you don't want, modify and build on the styles you like.

7 super slide styles to download, copy and adapt from Ned Potter

I've not done this before, provided a sort of OER version of a presentation, so I'll be interested to see if people find it useful. I hope the templates can work in some situation or other for you, particularly if you're stuck for inspiration. It may be that you take a slide style and use it throughout a presentation, or it may be that you take one or two styles and just use them as a blueprint to give you a head-start, and then change them completely.  It's entirely up to you, you can do whatever you like with them - and although it would be great if you could credit me somewhere, don't worry if you can't fit it in. I'm not releasing them under a Creative Commons Attribution license, I'm just putting the whole thing into the public domain.

Something I need to make clear though (and thank you to Andrew Preater for flagging this up to me) is that the images are Creative Commons images (rather than public domain), and so if you want to use those images specifically you need to respect their original licenses! Each of them is linked to, both in the presentation itself and with its creator's name at the end of the presentation, so you can see the kind of Creative Commons licence they have. In all cases, they need at a minimum for the creator to be attributed. Obviously the images I've used here are just in there as examples, I'm expecting people to take the slide designs and redo them with their own content - but if you do decide to keep them, keep their Creative Commons status in mind...

For 6 of the styles I've included a little arrow in the breakdown section with a link to a full set of slides created somewhat in that style (most by me, a couple by other people) so you can see what an expanded version might look like.

To adapt and build on these styles if you like them, the right-click menu in PowerPoint is your friend. Firstly if you right-click on the little slide preview pane, you'll find the 'Duplicate' option. Duplicate the slide you like, then edit the contents. Right-clicking on the main slide edit view is vital here too: the menu it produces allows you to recolour text boxes or backgrounds, change the picture (but retaining size and positioning), copy elements you like and paste them elsewhere, blur or darken images so you can write directly onto them, etc etc. This allows you to take a single slide and build a presentation with a cohesive visual theme around it, rather than just having literally the same slide several times with different words on it.

Good luck making your slides, and let me know what you do with the templates! (You don't have to. I'm just curious to see whether people make things using these as a building block, and what they're like...)