Choosing The Best Fonts for Your Website
How Much Do Fonts for Your Website Matter?
Choice of brand fonts also called typography, has become a bit of an obsession for me in the last few years. The more I design, the more I realized how critical font choice is when it comes to the design of any project.
I’m a minimalist designer. I believe that good design speaks for itself and that simple logos, and clean design allow the message to speak more loudly.
Good design should amplify your message but never detract from it.
When it comes to your brand, having a select group of fonts that you can use in a variety of ways, is so important. Using the same fonts over and over gives your brand a sense of consistency (an important foundation of branding).
Too many fonts, too many colors, and too many competing aesthetics add confusion. The brain isn’t sure where to look or what to focus on, so it causes you to want to turn away. For a brand, this is the LAST thing we want.
So to avoid this, it’s best to limit the variety and to make sure that any fonts you use go together in a way that compliments the whole.
When choosing fonts for your website, your logo or any other part of your business’ marketing materials, be aware that different fonts convey different messages about your company. They can say that your business is stable and trustworthy, it can indicate that you’re very design-forward, or that you’re fun and playful. Think about Bank of America, Airbnb and Disney and how they use fonts to infuse their brand with feeling and intent without actually saying it out loud. Imagery is incredibly powerful and your font typography is another tool to visually communicate who your brand is.
So what should you consider before choosing fonts for your brand and/or website?
Font Readability is King
One of the most important things when choosing fonts for your website is that they are easy to read. You need to think about where it will be viewed (on a large billboard, a phone screen, or a typed and printed page) and that will help you choose the readability for your fonts. Times New Roman is a classic font that helps the readability of many printed materials. However, on a computer screen sans-serif fonts can often be easier to read.
This doesn’t mean you can only use sans-serif fonts for websites, but look at the fonts you’re considering on your desktop and phone and make sure that they’re easy on the eyes.
Design for Your Tools
Think about what marketing materials you’ll be using and what tools you’ll use to do them. If you have a professional designer at your disposal, you can really use any fonts you’d like. But if you’re doing lots of social media, and using Canva, you may want to keep it simple and use a font that Canva already has (note: you can upload a custom font to Canva if you have a CanvaPro account).
Similarly, with your website, some website platforms like Squarespace have certain fonts already included in their platform. When choosing fonts for your website it’s often faster loading if you use fonts that Squarespace includes, rather than uploading your own. At the end of the article is a selection of fonts that both Squarespace and Canva have, so you know you’re safe with either.
Squarespace has over 600 Google fonts and over 1000 Adobe fonts!
This means that they have a wide range of fonts to choose from – but again, this doesn’t mean you should go crazy. Squarespace allows you to use 2 different fonts – one for Headings and one for paragraphs.
While it’s very possible to add more fonts to the website, it’s not generally recommended as website speed is always an important factor to consider. Did you know that adding multiple fonts can affect your website load time?
So for website speed, readability, and design aesthetics, keeping it to one or two fonts is usually a safe bet.
Text Treatments Allow for Web Skimming
It’s been established that people read websites much differently than they do print.
Even in print people tend to read the headings and the first paragraph and then skim the rest. But on a website, skimming happens much more often. This trend is only increasing with the introduction of long scroll pages. People tend to scroll down websites quite quickly and so often we need to attempt to capture their attention with headlines.
Have you ever landed on a website and been confronted with a wall of text? 🤯
I have, and when I do, my first instinct is to leave, as lots of text and long paragraphs on screen can be really overwhelming and hard on the eyes.
So what are “Text Treatments”? Basically, it’s taking your regular paragraph and turning it into something less daunting to read. We can do this using hierarchy and contrast.
Hierarchy
This shows the reader what’s most important to read by making it stand out first. There are lots of ways to make it stand out, but after designing a page, or project, it’s good to take a look and make sure the thing your eye is drawn to first, is what was intended to draw attention.
Contrast
Contrast uses font weights and treatments to make text stand out. There can be some crossover between the two, but to show you how this might work we’ll use the tools we have at our disposal.
Headings vs Paragraphs
Sometimes these are different fonts, usually they’re different sizes as well. Headings can introduce or summarize a topic, or capture attention so the reader wants to know more.
Type Scale
Type scale is your font sizing. I love using a site appropriately called Type-scale to layout my different font sizes for a project. It uses ratios like the golden ration to help determine aesthetically pleasing font sizing for your designs.
Bold, Underline, Italics
These classic treatments aren’t to be underestimated. I use them liberally where needed, to make key points standout within a paragraph.
Paragraph Length
While we were all taught in school that a paragraph should be three to six sentences long, you need to forget that when laying out type in a website. A six-sentence long paragraph will bore your reader and make them jump ship. While it’s good to have variation, on a website, a one-sentence paragraph is actually totally acceptable and will do a good job of directing the reader to your point.
When choosing fonts for your website, below are a few of my favorites to consider:
Fonts found in both Squarespace & Canva
Once you’ve narrowed down the selection, it’s important to find a font or font pairing that enhances your brand. Think about what you’re trying to accomplish for your brand. Perhaps you’re a financial or law firm and you need to establish trust. Then you might choose a font that helps accomplish that. However, what if you’re a new financial app trying to cater to a younger audience? If that’s the case, you might choose a more modern font, to try to show that you’re different than the normal financial institutions.
Below I’ve laid out some great font pairings based on business styles.
I always recommend working with a professional designer if you can.
Some designers design for maximum impact from an aesthetic point of view (ie. they want it to look pretty). So if you’re working with a designer already, it’s important to make sure that the end result is easy to read, shows hierarchy with the most important information, and that the design doesn’t detract from the information you’re trying to convey.
For those DIYers out there, it’s definitely a plus to have an idea of the best practices for choosing fonts, and to take the time to think about how your fonts will be used (social media, website, print, tradeshows, etc) and to make use of the awesome tools available like Canva!
