Choosing Fonts For Your Design Project

Branding

[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.

 

Brand-Sheet

So, where to start? Let’s talk about the basic font families.

SERIF

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

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.

 

Same-Typeface

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).

 

Ampersand

 

DEMI SERIFS

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).

My pick of the demi serifs includes Cinzel (classic and free), Cimiez (very minimalist) and my absolute personal favourite (and free Google Font), Rosarivo.

 

Demi-Serifs

SLAB SERIFS

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.

 

Slab-Serifs

SANS SERIFS

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.

 

Logo-Combos

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).

Sans-Serif

SCRIPT FONTS

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.

 

Script-Fonts

DISPLAY FONTS

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.

Fonts below include: Majesti Banner, Trend Sans, Wicked Grit, Conqueror Carved and Prismatic.

 

Display-Fonts

 

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.

 

Three-Fonts

 

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.

LICENSING

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.

 

Parts-of-a-Font

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.

 

Get my DIY Your Website Ebook

+ get 20% off your first order

You don't have to settle for an average website.

Follow my 5 seriously actionable pro design tips to help you level up your website.

14 Comments

  1. Helen Lisk

    Brilliant Melissa! Interesting and very helpful as well – thanks ๐Ÿ™‚ x

    Reply
  2. Kusuma Hendra

    Lato & Playfair display are the best combination ๐Ÿ˜€

    Reply
  3. Clare Malley

    Interesting! It seems simpler now ????

    Reply
  4. Craig

    Hey, I liked that style guide at the intro. Any ideas where to get a psd template for something like that?

    Reply
    • Melissa Love

      I better put one together for the next blog post!

      Reply
  5. Julie Jones

    Wow Melissa this was incredibly informative! I’m so happy I subscribed to your blog, this is taking my graphic design skills to the next level. From this post I was now able to do a complete branding guide for my bridal magazine! Thank you!

    Reply
    • Melissa Love

      That’s great to hear you’ve been able to apply it!

      Reply
  6. Rex

    Very helpful and informative Melissa… to the point that I subscribed.

    Reply
  7. Matt

    Very helpful. Thanks Melissa.

    Reply
  8. kirk

    Thank you. Makes simple sense.

    Reply
  9. Oliver Gehrmann

    I just came across this today after reading your newsletter. Very helpful, I really like the recommendations. ๐Ÿ™‚

    Reply
  10. Kathy Rothwell

    The quintessential article on fonts that I have been looking for since forever! So simply and thoroughly explained. Thank you for writing and sharing this

    Reply
  11. Bloggin Brandi

    Thanks for sharing information on fonts! Choosing the right font to go with your business can be very appealing to the eye. Sometimes the first thing that your eye sees makes the person want to read further into your ideas.

    Reply
  12. Sam

    This is the best font blog post EVER. Thank you so much Melissa.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Free DIY Your Website Ebook +

20 % off your first purchase

You deserve better than an 'average' website...

By downloading our ebook, you agree to receive our excellent marketing emails.