When you decide you’re ready for a website there are so many things you need to consider – domain name, hosting, website platform, page builder, logo, copy, images, colors and, yes, fonts. So, I wanted to share a bit about how to choose fonts for your website.
Fonts are an incredibly important part of your website design and the fonts you choose actually say a lot about you and your business. Your font choices need to represent your brand personality. If you have a brand document, then your fonts have already been selected and they should carry over to your website for consistency.
If you don’t have a brand document, you should start by thinking about what your brand personality is, what kind of business you are, who your target audience is and what you want to convey about your business.
For example, is your business classic, chic, traditional, elegant, creative, stylish, friendly, unique? There are fonts that convey all of these personalities and when choosing fonts for your website you need to make sure they represent your business correctly.
When searching for a font, the best place to start is the Google Fonts library. It includes over 800 free licensed fonts and is also one of the top places for finding web safe fonts.
A web safe font is compatible with all modern web interfaces used on both desktop and mobile devices and will stay uniform across all browsers meaning your web presence stays consistent.
Now, when designing a website, you definitely want to use more than one font.
Here are some basic rules to follow when combining fonts:
1. Never use more than three fonts on your website
First you should define a primary font. This can be used for headings. Generally, you’ll want this font to be eye-catching. This is where you can use a fancier font that has more detail and personality so it grabs people’s attention. These fonts are designed for headings consisting of just a few words; they aren’t designed for a long page of text.
Then, you’ll want pick a secondary font which you’ll use for the body text. This font should be a standard font designed for easy reading. Standard fonts work well in smaller point sizes and in larger blocks of text. They are designed for legibility.
Finally, you can choose a third font, if you’d like, that can be an accent font. This is the font you can use on buttons and calls to action. It’s good if this font stands out, since calls to action are very important, but it needs to be legible as well.
2. Make sure your fonts complement one another
Font pairing can be difficult. There are some basic principles to remember.
Be sure to think about letterforms that are similar in mood, stroke and height.
Consider the shape and slant of the letters and go for typefaces with similar outlines.
It’s a good idea to mix and match type styles so you can select a serif and sans serif pair or a sans serif and a novelty typeface.
It’s ok to get help with this and there are several websites that offer great suggestions for font pairings. Two that I recommend are Fontpair and Canva.
If you’re afraid of messing it up, a helpful tip is to keep it in the same font family. A font family is a group of related typefaces which vary in some respects but not in design. An example is the Roboto font family which consists of the normal Roboto font, Roboto Condensed and Roboto Slab. All three have their own styles and offer variation, but are cut from the same cloth is a safe bet for your three fonts.
3. Never give up readability for design
Please don’t ever choose a font that is too difficult to read! The main purpose of your website is to give visitors the information they need and if they can’t read it, it doesn’t do any good.
There are some other factors you need to consider as well when choosing fonts for your website. One is the size of the fonts you’ve chosen. A good guideline is as follows:
Titles: 30-70
Subtitles: 22-30
Paragraph: 16-20
Other important considerations are the spacing between letters and the spacing between lines of text. All of these factors contribute to the legibility of the content on your website.
Remember, a clever combination of fonts can have a powerful effect on your website’s design. Your choice of fonts says a lot about your business, so choose wisely. I hope you found this post on how to choose fonts for your website helpful. If you did, please share it using the icons below.
If you need help with your brand and website design, please click here to fill out my contact form so we can discuss how I can support you.
