How to choose & combine fonts for your website
Did you know it takes about 50 milliseconds (0.05 seconds) for people to form an opinion about your website? This is a subconscious process based on visuals and the emotion your website evokes. A large part of that depends on your brand colors, but the fonts you use on your website play a big role as well. Even without reading the actual text, fonts can look modern, classic, elegant, and so on.
How to choose fonts for your website: Collect inspiration
When you’re DIY-ing your brand design, I recommend you keep it simple and choose 1 to 3 fonts. Create brand consistency by choosing one font for your headers, one font for your body text, and maybe one other accent font for things like quotes and other attention-grabbers (maybe). What fonts you should use, depends on the message and tone of your brand.
Creating a brand isn’t only about getting a custom-designed logo and website. Sure, those things help, but it’s not just the design of your website that is going to draw in customers. It’s definitely part of your brand, but so are your content, your message, and your tone. Your message and tone need to be clear before you can do anything else with regard to branding. Only once you’ve nailed those, you can decide your colors, fonts, logo, and website design.
Need help deciding your brand message? Get the free Brand Strategy Workbook below!
How to choose the right fonts
Choosing the right fonts for your website can be hard if you don’t have some basic typography knowledge. Fonts can be categorized into many more different categories, but for non-designers DIYing their own brand design, I want to keep it simple by sticking to just the 4 basic font categories. These categories will help you choose fonts that fit your brand.
Serifs are fonts that have “feet”, or little lines, on the ends of their letters. They tend to look more classic and traditional.
Serif fonts are generally easier to read in long print passages, which is why you often see them used for novels and longer publications.
Sans-serif fonts don’t have those lines (sans serif actually means “without serif”). They tend to look more clean and modern.
Sans serif fonts are generally easier to read on screens because they aren’t as “noisy” as serif fonts, which is why you often see them used on the web.
Script fonts generally have connected letters and come in many different styles from hand-lettered and fun to elegant and traditional calligraphy.
Display (or decorative) fonts are meant to attract attention. They’re usually more eye-catching than practical and for that reason, they’re best used in small doses.
How to choose fonts: Readability
Readability is the most important part to pay attention to when choosing fonts. You want visitors to read your text, so make it easy to read!
You’ll have several parts that need to be easy to read to a greater or lesser extent:
- Headlines will be generally short; they can be big and bold. You can choose a font that would be hard to read in a small size because when it’s set to a big size, it will still be easy to read.
- Body copy is your main text and will need to be the most readable of all. This is the largest part of your text, and you don’t want people to have to squint to find out what you’ve written. Chances are they won’t, and they’ll leave your site never to return instead. So pick the font for your body copy carefully and make sure it’s easy to read.
To choose an easy-to-read font, pay attention to the font-size you’ll use it with. A font that’s hard to read at a regular body font-size might be great for a headline if it’s used in a much larger size.
Small letters: what to pay attention to
For your main text, pay attention to the letters with small gaps, such as a, e, and g. When setting the font-size, make sure the small openings in these letters are still big enough to distinguish them. If it gets too small (for example the e might start looking like c), your text becomes too hard to read. When this happens, pick a larger font-size for the body text. In 2009, a font-size of 12 – 14px used to be the regular size. In 2013 14 – 16px became the regular size. Currently, a quick look at font-sizes across different websites shows 18-21px to be the most used.
Also, check your font-size across devices – make sure it’s easy to read on a large screen as well as on a phone or tablet.
Another thing you can experiment with is the line-height, which is the space between lines of text. When lines are too close together, the text gets harder to read, and people may lose their place in the text. If the lines are too far apart, the space will create disconnected lines, and the text becomes hard to read as well. As a general rule of thumb, a line-height between 1.2 and 1.5 times the font-size works well.
Also, don’t make neat text columns on your website (known as ‘justified text’). It might look pretty, but we don’t have the same level of control over the text as there is with print. Justifying text into neat columns on your website actually makes it harder to read.
How to choose a font for your logo
For your logo, I recommend you choose a different font from the fonts you use on your website and other materials. This makes the logo distinct and keeps it from getting lost among other text on your website and other brand materials.
How to combine fonts for your website
When combining fonts, make it easy on yourself by choosing fonts that are obviously different from each other for the different parts of your website text.
Choose one font for your headers, one font for your body text, and maybe one other accent font for things like quotes and other attention-grabbers (maybe).
Create contrast by mixing up font categories, font weights, or font sizes. The differences in font categories, weight, and sizes don’t have to be extreme, but they do need to be noticeable.
Contrasting font categories
One of the easiest ways to create contrast is to combine a serif with a sans-serif font.
But you can also combine a script or display font with a serif or sans-serif font.
Script and display fonts are generally harder to read and you shouldn’t use them for large blocks of text, such as body copy. You can use them as headlines and other attention-grabbers, but make sure they’re easy to read by using them at a larger size. Use them sparingly, and always use a serif or sans-serif font for your main text to keep it easy to read.
Contrasting font sizes and weights
You can also use one font in different sizes, weights, and styles (i.e. italic, all-caps, all lowercase, etc.) to create contrast.
Where to find fonts
Some fonts are or were widely available for free with most people’s computers or applications they installed. People overused them for all sorts of things they were never designed for. These fonts have become cliché and look amateur. Using these will not help in getting your content taken seriously. These include fonts like Bradley Hand, Brush Script, Comic Sans, Curlz MT, and Papyrus.
I also recommend avoiding Times New Roman, because it’s all too recognizable as a default font. It will make it look like you haven’t put any effort into the design.
If you want more options than what’s already on your computer, here are my favorite font resources.
Adobe Fonts is a huge library of high-quality fonts included with any Creative Cloud subscription (Photoshop starts at $9.99/mo).
MyFonts is a website that sells high-quality fonts and also has 900+ free fonts. You can easily preview the text you want to use a font for (e.g. your business name for your logo) before purchasing. That’s super helpful because most of the fonts on their website aren’t free.
Google Fonts is a huge library of fonts that are totally free to use on your website. If you want to use them in other materials, you can also download the fonts.
Creative Market has tons of gorgeous fonts and font packs, as well as many other design resources.
Rather get brand design done for you? Hire me.
I help coaches & course creators to stop struggling with code and Canva. You can spend your time and energy showing up for your audience, doing what only you can do to make your launch successful. Learn more.
Planning to launch soon?
Get my free Sales Page Blueprint!
Learn what to include on your sales page and how to structure it so your ideal clients can't help but click that buy button!