How to Choose Fonts Combinations For Your Website
Choosing a couple of fonts for your website sounds like a pretty simple task, but if you have just started that process then you will have probably quickly discovered the rabbit hole that is font selection.
There are just soooo many choices, so how do you narrow it down? Which is right for your business? How many should you be picking anyway?
If that is you then this post should provide a little direction and clarity for you...
Start With The End in Mind
First, let's look at the end goal of your font hunt. You are looking to create a hierarchy of fonts to make up the following:
H1 - (Heading 1) this will be used for your main headings and will likely be the largest font.
H2 and H3 (Headings 2 and 3) are for subheadings
body or normal - the font you will use for the bulk of your texts and paragraphs
There are a few key things to consider when selecting your font
The Right Message For Your Brand
Font selection forms a large chunk of your branding so its important that it sends the right message to your audience about your brand. Different styles of fonts convey evoke different feelings
- Script fonts portray elegance, creativity and femininity
- Sans Serif is clean and business like
- Serif fonts reliable, respectable and conventional
- Display for decorative fonts are fun and casual. They can make a great, unique look for your H1 headings but not well suited to body text
Make sure the font you select is easily readable for most people. I find some "cool" script fonts really difficult to read and some letters can cause an innocent word to like something quite different when the spacing is off.
Also take into consideration your target audience. Older people will appreciate larger, clear fonts whilse millenials might like the intricate display fonts if it suits that particular brand.
You also need to think about where, other than your website, your branding is going to be used. The fonts selections need to be versatile enough to be scaled up and down as needed. There is no point choosing an ultra funky, creative font that your audience has to squint to decipher on your Pinterest image! That doesnt mean you cant use it for a heading on your website, but you do need a font from your brand's selection that is able to fit the job.
Consistency is Key
For a professional look, choose 2-3 fonts and stick with it.
Make use of spacing, font weight and colours to create interest and variation on your website and to highlight important information.
There is more to typography than just the font type itself. How the font looks can be changed up pretty dramatically through the use of spacing, font weight and colour.
Spacing: adjusting the space between each letter or the line height (distance between one line of text and the line below it)
Weight: this allows you to adjust the boldness of the lettering. It gives a bit more flexibility to the boldness.
Think of it like a light. Using just the "B" for bold option is a regular light switch, it turns the boldness on, but there's just one boldness, it's on or its off. Using weights is like having a dimmer switch, there are sliding scales of how bold the font is so you can set the mood just how you like it. The higher the weight, the bolder the font.
Colour: colour is a great way to change the feel of a font and to increase the readability of your content. Colour will attract the readers' eye and break up large blocks of text which may otherwise be off-putting to the viewer.
Cases: Using all uppercase lettering, lowercase or a mix are ways to change the look of your fonts and break up your text.
Let's go back to your font hierarchy of H1 to body text. There are usually four "different" fonts you need to select for your design but that doesn't mean you need to go and find four separate fonts.
In fact, this can sometimes be too much and take away from the cohesiveness of your font structure.
Instead, I usually select just two fonts and then use some or all of the styling options we just talked about to differentiate them and create the levels.
health and wellness
This font is for subheadings
This is my paragraph text, same Playfair Display font as H1 and H3, just smaller and lighter.
Availability of Font
You will often need to use your selected fonts for a few different purposes, aside from your website - social media graphics, business cards, printed marketing material.
For web use, Google Fonts offers a wide range of font that you can use on any website, even if it’s for a business.
Over 600 of these are already available in Squarespace and I recommend you make use of these, as it keeps things super simple and increases the chances of your fonts being already available to use in other applications such as Canva so that keeping your branding consistent is easier.
If you do choose a font that is not already available is Squarespace such as a decorative font you found on Creative Market, you can absolutely still add it to your website with a small snippet of totally-not-scary code. Check out this tutorial on how to add your own font to Squarespace by thrity eight visuals.
- For a quick way to see how your fonts will look together or to find stacks more font combinations that are proven to work well together, try Font Pair
- To find the name of a font used on any website, add the Chrome extension "WhatFont" to your browser. Once selected you can hover over any text and discover everything you want to know including font name, weight, style and even size and line height. Perfect for helping you emulate the look of websites you love.
So with all that in mind, here are 6 of my favourite font combinations that look great together and are already available and ready to roll in Squarespace.
Header 1: ambroise-std (weight 300)
Header 2: calluna (weight 400, italic)
This font pairing gives a classy and sophisticated feel.
Squarespace Template: Tremont
Header 1: freight-big-pro (weight 400, italic)
Header 2: futura-pt (weight 400)
This combination balances the classic look of the serif font freigh-big-pro and the clean look of futura. The italicised Maple softens the title.
Squarespace Template: Maple
Heading 1: hypatia-sans-pro (weight 700)
Heading 2: futura-pt (weight 400)
Button: futura-pt (weight 700)
The H1 in this combination is bold and strong but still has an element of softness and with the clean, professional look of futura the brand feels approachable and confident.
Square Space Template: Moksha
Text Logo: acier-bat-noir (weight 400)
Heading 1: Work Sans (weight 800)
Heading 2: Work Sans (weight 400)
Paragraph: Work Sans (weight 400)
Button: Work Sans (weight 500)
This font combination creates a more casual but confident look. It is bold, fun and approachable and is neither too masculine or feminine.
Square Space Template: Stella
Heading 1: Playfair Display (weight 400)
Heading 2: proxima-nova (weight 700)
Button: proxima-nova (weight 700)
Playfair Display is a classical font that give an air of elegance. It works great for headings and is often seen in editorial style magazines.
Paired with Proxima Nova, this font combination looks modern and high class.
Square Space Template: Thorne
Heading 1: futura-pt (weight 300)
Heading 2: futura-pt (weight 300)
Button: futura-pt (weight 400)
Paragraph: europa (weight 300)
Futura is a popular font as it gives a modern, clean look. The two san serif fonts together maintain the modern and business like vibe.
Square Space Template: Hayden
So there are a few of my favourite font combinations that are going to help give your website a professional and put-together look. All you need to decide is which set best suits your voice and brand!
If you need help putting together a website that captures the your brand's vibe, beyond just the typography, then grab your website planner workbook below to ensure you cover all the crucial areas when planning your new website.
FREE Website Planner
No idea where to start with your website? Grab your free website planner and skip the overwhelm as I guide you through all the important aspects of putting together a website that you AND your clients just love!