6 guidelines when selecting fonts for your website
Choosing fonts for your website? Or having a branding expert select fonts for you? This process is known as ‘font pairing’.
Font pairing refers to the combination of font families that will be used for the headings and main body font across your site.
Fonts have a big impact on the overall feel of your brand and the readibility of your website so you want to take this step in your branding process just as seriously as selecting colours or creating your logo.
Here’s some key guidelines to consider when selecting fonts for your website.
01 // Choose easy to read fonts
This seems kinda obvious, but you’d be surprised how many websites have poor font selections. The truth is – the easier the font is to read, the longer a person is likely going to stay on your website and therefore, get to know you and your business. If your font is difficult to read, don’t expect them to hand around long.
02 // Serif vs Sans Serif fonts
Generally, you’ll be choosing between, or choosing a combination of, serif and sans serif fonts. The style of font you choose, can greatly influence the overall feel of your website.
Serif fonts have the extra little strokes and lines that you see at the end of the letters. This font style conveys elegance, authority, professionalism and luxury.
Sans serif fonts do not have the little strokes and lines at the end of the letters. This font style is more modern, clean, warm and inviting.
Think carefully about how you want people to feel as they interact with your website and choose fonts that convey this feeling.
03 // Script fonts
Script fonts, while all the rage currently, are hard to read and create eye fatigue and confusion when someone is skim reading your website (which we all do). Only ever use script font minimally as an ‘accent’ heading, rather than for a heading font. Never ever use script font for all headings in your site or for your main body text.
04 // Web-safe fonts
Web safe fonts are important because they are guaranteed to show in all browsers, ensuring branding cohesiveness is maintained for all visitors to your site, regardless of what browser type they are viewing your site on.
For a Squarespace website, the best place to select fonts is through google fonts or, if you have a creative cloud account, adobe typekit. These are web safe fonts that come free with your Squarespace hosting plan.
Keep in mind that if you do opt for Adobe fonts, and you want to then use these fonts elsewhere – such as in client documentation or uploading to canva, you will have to purchase a desktop license – which normally ranges somewhere between $10-$40 for each font type.
If you’re using a custom font (i.e. not a google or adobe font), you’ll need to factor in web font licensing – which can, in some instances, be very expensive. Your designer should be able to direct you on where to purchase any custom font licenses if needed.
05 // Font weights and letter casing
When selecting fonts, make sure the font family you choose has:
multiple font weights so we can bold or lighten the font off depending on where we want to draw the eye
the option to make the font italic
both uppercase and lowercase formats – some font families only come with an uppercase option which is not ideal for a website as uppercase fonts can be difficult to read and create eye-fatigue
06 // Number of font families
Try to have no more than two (at the most three) font families in play on your website.
Using a lot of different fonts on your website, makes it difficult for people to understand what they are looking at – less is more in this case.
Excessive font families can also impact the loading speed of your website pages. Keeping the number of fonts used on your website to a minimum benefits your visitors (we all appreciate a fast loading website) and for SEO too as site loading time is a big factor google takes into consideration when prioritising websites in search.
Need help selecting fonts for your website?
We can help, with our done-for-you in just 10 days brand kits!
