[C]hoosing fonts can be one of the most enjoyable parts of any project. Or it can be hell. Without a solid knowledge of the basic font families and a decent collection of go-to classic fonts, it’s easy to end up with too many on the page, or find yourself jumping on a trend bandwagon and hating the result just a few months down the line. Papyrus, anyone? I would say Comic Sans (the font all designers allegedly love to hate) but since reading this hilarious takedown of Comic Sans haters, these days I think it’s pretty badass. I think you will too.
Before I start any design project, I pull together a little style guide, detailing colours, fonts and the way I plan to use them and I pull them all together with the logo and and brand elements. Think of it as creating a sketch or roadmap to keep you on track when you do start designing.
Opening up a blank canvas or webpage and just ‘playing around with fonts’ doesn’t work. At least it doesn’t work for me. Whenever I skip the crucial font / brand planning stage, I always end up having to go back to the beginning. Here’s what I’m taking about…
You can do this in any design programme. I tend to use Illustrator but Photoshop or Canva will do just fine.
So, where to start? Let’s talk about the basic font families.
Serifs are the workhorses of the font world. Over 80% of printed books and magazines are printed in a serif, specifically Times New Roman or Georgia, which are commonly found on all computer operating systems. A serif is a font with a decorative line, thickening or extension at the end of the letter form.
Serifs are perfect for classic type logos, headings, pull quotes and, in italic form, add elegant contrast. The paragraph below uses only one typeface (Adobe Garamond Pro) in different weights, sizes and styles, but the result is varied and stylish. Sure, adding some contrasting typefaces would improve it, but I think it proves my point that less is definitely more when it comes to font selection.
My go-to serifs include Times New Roman, Georgia, Garamond (which has a beautiful italic version) and all of the variations of Didot. Theano Didot is actually my spirit animal.
Sidenote: Serif fonts have ampersand characters that are to die for. Check out two of my absolute favourite serif ampersands. (Psst. Playfair Display is even a free Google Font).
If a full-on serif isn’t quite right for your project, you might want to think about demi-serifs, which give a much more modern, pared-down feel. They also work well with both full serifs and modern sans serif fonts (more about those soon).
Slab serifs are serifs with small slabs instead of curving serifs. Personally, I use them when I’m looking for a rustic or fun informal feel. They can just about work when set as continuous text but keep an eye on readability. They are perfect if you like a classic typewriter effect.
Fab slabs include Arvo, the whole Trend slab family and, for a slightly cleaner feel, I like free Google font Rokkit and the delicate Nixie One. Don’t forget the often overlooked American Typewriter – clean with a modern retro feel and rounded slabs. It used to be everywhere but I feel it’s ready for a comeback.
Sans serifs are the chameleons of the font world, managing to fit effortlessly into both modern and classic design projects. Most often, I use sans serifs for sub headings and menus. When paired with a classic serif and some decent letter spacing, the result is simple and classy when it comes to logos. If you need a font-based logo in a hurry, try one of the combos below. The addition of a simple geometric shape raises your game enormously. Note that that when the serif is dominant and the shape is a classic horizontal rectangle, the feel is more traditional.
Allow the sans serif to dominate, add a geometric square diamond and you’re bang on trend.
Afforable or free favourites include: Lato, Colaborate (comes in a great range of weights), Raleway (a brilliant Ultra Thin) and condensed (tall) fonts like Oswald and extended (squashed) fonts like Trade Gothic and Spinnaker (free Google font).
A couple of years ago, I’d have lumped script fonts in with display fonts, but such is the popularity of modern calligraphic and brush fonts that I feel they deserve their own category.
The golden rule is to use sparingly and by that, I mean never set more than a line or two in a script font. It makes people’s eyes bleed. They are perfect for logos, the odd heading (but not long ones. ie. blog post titles, and call outs). Is one script font enough in any project? Always.
Side note: brush and calligraphy fonts are hot right now and I love using them but try to avoid the super popular ones to get a more unique look. Really authentic looking script fonts have an uneven baseline and hand finished details.
Here are a few of my favs that aren’t that common. They range in style from handwritten to full calligraphic, loaded with additional swashes. Not many of the fonts you see below are free, but if there is ever a good time to invest in premium fonts, it’s definitely when you’re working with a script font. Fonts below include Manus (free for personal use), Arsenale White (free for personal use), Ashley Brush, Noteworthy, Dago, Vermandois, Shameless and Burgues Script.
These are the fun guys. Christmas fonts, disco-ball fonts and patterned fonts are all found here. Beware. Display fonts are a whole heap of fun and can be used to add impact. On the flip side, novelty fonts are often easily recognisable and can date quickly. Occasionally I use display fonts as part of a logo or for labels or calls to action. There are a couple of font foundries that I really love, who do great display fonts minus the cheese. Check out The Designers Foundry (formerly Ten Dollar Fonts) and The Lost Type Co-Op.
Below is a selection of fonts I’ve used in the past year. I don’t think you can really have a favourite display font, because they range from stunning heavily curved serifs to distressed typefaces and outline sans serifs. It really depends on the project in hand. They are great for adding impact, work well as the base for a logo but use sparingly. Just one or two words is enough.
PUTTING IT ALL TOGETHER
As we touched on before, opening up a blank canvas or page and ‘playing around with fonts’ is one-way ticket to frustration.
I always start with the logo and let all other font selections flow from there. Typically, I’ll be looking for 2-3 fonts to work together in any design project, sometimes more, sometimes less.
Usually, I’ll be looking for serif, a sans serif and a script / italic / something interesting to complete the trio.
Here’s an example of top-down font selection. If the logo uses and handwritten script font, I know that I won’t be using it (or indeed another script font) anywhere else. I’ll be looking to compliment it with a classic serif, either in caps for headings, or as body text. A simple extended sans will likely complete my set.
If the logo is typographic (sans or serif) I know I’ll be looking for something cursive for highlights and calls to action. The example below shows how those three families can work together in almost any scenario. I’ve used classic serif and sans serif fonts in combination in all three examples and just changed out the script font each time.
The three-font rule has never let me down, or even the one- font rule, using three different weights (remember the Times New Roman example?) Do you have too many fonts on your site? Or perhaps you left the default fonts in place on your website and didn’t actively choose them. Now is a good time to check.
A final word on licensing. Fonts are licensed in many different ways, including free for personal use only, free for commercial use, desktop or webfont. Before you install a font, check the terms and conditions of use and respect them. Behind every font you love, there is a typographer trusting you to do the right thing. In many cases, I have found that font designers are really quick to respond to queries and generous when it comes to giving permission , but always ask if you’re not sure.
FONT NERD BONUS TIME
For the real font nerds amongst you, you might be interested to see a simple diagram of the main parts of a font character. There are more complex analyses out there – believe me it gets really nerdy – but this are the basics.
Have fun with choosing fonts, keep it simple and don’t let extra typefaces creep into your design projects. Happy font pairing!
Dont’ forget to sign up for our newsletter to get access to some cool free design templates and 20% off your first purchase.