Lesson 3: How to choose the right fonts and colours

 

If you don't have a brand in place, you'll need to make some decisions with regards to the colours and fonts that you use on your website. We'll show you some examples and help you make these choices, but if in doubt, keep it simple, remember that less is better than more, and classic black and white never goes out of style. 

In this lesson we will: 

  1. Give you guidelines for choosing fonts and colours

  2. Discuss pairing fonts

  3. Discuss colour theory and pairing colours

 

Step 1: Give you guidelines for choosing fonts and colours

Now that we've discussed the basics of both typography and colours, it's time to choose your own. The best method to do this is to create a list of 5-10 keywords or adjectives that represent your brand, and use those as a guide. This will help you make choices with purpose, that will elevate your brand, and prevent you from choosing colours you may like, but that won’t necessarily work for your brand.

For instance, your brand might be calm, friendly and warm, and choosing light blues, warm blues, deep reds, or other warm tones would work great as a palette!

But on the other hand your brand might be full of energy, have a youthful vibe and be targeting teenagers. in which case, bright colours like pink and orange - colours that typically clash and contrast - could be fun and speak to what your business does!

So, to get started yourself, here's a list of adjectives to choose from. This list is non-exhaustive though. If you have a better adjective for your business, use it. Write down the 5-10 that speak to your business and it's personality, and choose from there. 

 
  • young

  • mature

  • luxury

  • cheap

  • classic

  • traditional

  • youthful

  • informal

  • formal

  • corporate

  • calm

  • warm

  • educational

  • passionate

  • energetic

  • serious

  • trusthworthy

  • friendly

  • encouraging

Once you have your adjectives, you are going to use them as your guiding light. Every decision you make will be reflected within those adjectives. If you don’t see the connection, it’s probably not a good fit.

 

Step 2: Discuss pairing fonts

 

Fonts in Use

It's important to note that some fonts are more legible than others. Some are better suited for body copy (the main part of your text), while others, visually striking as they are,  will work better as headers and sub-headers. Some look better on a computer screen, while others look great printed. (The world of typography is quite vast if you haven't gathered that already).

If you do find a typeface you like, however, it may be helpful to do a little basic research to see whether it will serve its purpose well on your website. For example, take Bodoni, a very popular Serif style typeface with varying thick and thin strokes on each letter. It's a classic font often seen in the fashion industry and magazine publications and makes attention grabbing headlines. But if you try to set a large body of tiny text in Bodoni, it can make the copy incredibly hard for the human eye to read. With the varying sizes of the font, it just wasn't designed to be set so small.

How many fonts should you choose?

You should be looking for up to two, no more than three fonts. A classic pairing that works for any website is a sans serif font for body copy, and a serif font for headings. The reverse of the two is perfectly acceptable as well! If you’re feeling like you want a bit of flourish, a third script font can be added, which we suggest to be used only occasionally for specific headings.

The best way to figure out a font though is to put it in use! Experiment with what you like, and the results may surprise you.

 

Serif fonts that are great for body copy:

Serif Fonts.png
 

Sans serif fonts that are great for body copy:

Sans Serif.png
 

Rules for Pairing Fonts

Now that you have list your list of adjectives, you can now also choose what fonts work best. Be sure to look at each font and think to yourself: "does this speak to my brand personality". Here are some quick tips for choosing fonts:

  • When choosing fonts for a brand, less is more. Just two or three fonts for a brand will suffice.

    • If a third font was put into practice, a script or display font would work well, but it’s wise to use these fonts sparingly.

  • Common practice when choosing fonts is a to look for complimentary and contrasting styles, which is why serif fonts paired with sans serif fonts are so popular.

  • When you're looking at a font, think about what you see, how you see it in action and what your audience may gather about your business after seeing it.

    • Maybe you've fallen in love with a serif font that gives a sense of playfulness to your brand. It might be good to pair it with a sans serif font that's a bit more neutral and muted as you don't want it to overpower the visual effects of the serif font. 

  • Experiment with fonts!

    • Consider the tone you're trying to set with your fonts and go from there.

    • Is your brand more modern? Does it have a traditional spin to it? Are you trying to be more serious? Or are you looking for something more cheerful? More contemporary?

  • Establish a hierarchy

    • Know which fonts will be used for which purposes (body copy, headings, banner text, etc.) Will this font be larger and USED mainly for attention? Can the italicized version of this font be used for small captions of photos?

  • Pairing fonts comes with practice and it also doesn't hurt to consult an extra set of eyes, or the ever helpful internet, to see if the pairs fit.

    • We recommend typing in a search bar "Typewolf" and the name of the font you'd like to find a pairing for. Also, Pinterest has hundreds of selections to browse through too!

Some classic font pairings we recommend:

 

Want to learn more about font pairing? Check out this article for additional tips! 

 

Step 3: Discuss colour theory and pairing colours

 

Again, before we go selecting colours, take a look at your list of adjectives again and ensure you’re choosing colours that match the personality of your brand!


The Colour Wheel

Colour theory speaks to the art of pairing colours together to create harmonious palettes that may compliment or even contrast each other. It’s got quite a rich history and science behind it, complete with lots of jargon so we’re gonna just sum it up for you real quick.

This is a colour wheel.

Colour Wheel
 

The basic properties of any colour can be broken down to three properties: hue, saturation and brightness.

  • Hue - the pure tone of a colour as found on the colour wheel

    • this is made up of your basic colours: Red, Orange, Yellow, Green, Blue and Violet.

  • Saturation - the intensity of a hue

    • Full Hue = Full Saturation (Red) vs. Dull/Muted Hue = Less Saturation (Rust Red)

  • Brightness - the lightness a colour

    • refers to how much black or white is incorporated to that colour;

    • 0% Brightness incorporated into Red = Black

    • 30% Brightness incorporated into Red = Dark Red

    • 70% Brightness incorporated into Red = Light Red

    • 100% Brightness incorporated into Red = White


Knowing the properties of a colour will help you in choosing what goes best with your brand. Is your brand cheerful and encouraging? Then it might benefit from a colour that is quite saturated and light in colour. Does your brand make your audience feel moody and powerful, than less saturation and darker brightness might play in choosing the best colour.

Hex Codes

The next thing you need to understand is that colours within a digital space are categorized by a hex code. This is a six digit sequence of numbers and letters that can be mixed to create any colour of the rainbow. Check out HTML Colour Codes for more details and to see what hex code your brand colours are!

TIP: When you do find out the hex codes, write them down so you will have them on hand for your Squarespace website!

Pairing Colours

So now that you have all this information, how do you pair colours? How do you know what looks best, and how much of each colour should you utilize in a brand?

The act of pairing colours can get really in-depth, but we will stick to some easy tips.

  • Stick to two or three colours - make one of them your main colour, and the other one or two colours will function as accents.

    • This will prevent your brand from becoming too busy and overwhelming

    • Remember black and white (and shades of grey) are always part of your brand too and can be used on top of your existing colours!

  • Choose contrasting colours for visual appeal

    • Contrasting colours also help in making text legible - dark on light text and vice versa will always be easy to read

  • Ensure that the colours you choose, however, are complimentary to each other.

  • Trying to match contrasting yet cohesive colours involves choosing colours that are different from each other either in hue, saturation or brightness levels. Having only one (or two) of these colour properties contrasting, while keeping the other properties constant, will aid in finding an appealing colour palette.

    • When in doubt, test it out! Using the hex codes of your brand colours, input them onto Contrast Ratio and see if they’ll work together.

 

p.s if you want to check out the blog post we wrote all about choosing fonts and colours without a designer, you can read it here!

 

We recommend using software (such as Illustrator, Photoshop, InDesign, Canva, etc.) to test out fonts and colour pairings. No sweat though if you don’t have anything on hand! You can always wait till Lesson 5, which is when we will begin applying your brand to Squarespace. Also, we know there is a lot of information here but remember! At the end of the day, it is your website and you know its brand personality best. As long as you make your choices with intent, you can’t go wrong!