I’m not a graphic designer. This article is more of a practical insight into how I choose fonts for websites. So far this process has worked well for me, which is why I stick to it. What are the parts of it?
If you don’t have to, don’t select (!)
Maybe you’ve come from a graphic template when designing, maybe you have a custom graphic, maybe you’re inspired by a global site… In all cases, however, there is a chosen font in the “template”. So if you can, stick to it and don’t reinvent the wheel.
The font was probably chosen by someone with more expertise than us, and it’s a good idea to stick to their educated opinion.
But what if you still need to choose?
Select a couple first
For most sites, I choose either two fonts – one for headings, one for text or one font for everything
First, you should have a basic idea. A footer font? Footerless? Minimalist? Robust? These questions may not be easy to answer. For more on the topic, see, for example, Andrea Griger.
If you have a basic idea, but even if you can’t quite get there, I recommend going to Fontjoy.
Fontjoy is a simple font combination tool. You can have random combinations generated, or you can lock one of the fonts (for headings, for example) and have a suitable complementary font generated for the text.
The tool is absolutely free, no registration, no need to give email. Plus, it uses Google fonts, so the combinations you select in the tool should be easily replicated on your site.Choose the right size
Type-scale is another great tool. Type scale works by entering the font you have chosen and under the “scale” button you can test how the proportions of each heading and text will look.
Like Fontjoy, the tool is completely free and extremely simple to use.
Tips for the end
1. Beware of licenses
If you don’t choose a Google font but decide to buy one of your own, make sure you use it according to its license. For example, it often happens that someone buys a “print” font and uses it on the web.
2. Watch out for cookies
While it may sound bizarre, if you’re not loading Google Fonts directly from the web (you didn’t upload them there manually), you’re loading them from the web, and Google Fonts uses cookies. So it’s a good idea to keep this in mind and take care of it, for example, when creating a cookie bar.
3. Common sense
The main thing is not to drown in the flood of combinations, tools and inspiration. Make sure the font you choose is:
- contrasting to the background
- readable
Everything else will yield.
Let me know in the comments what experience you have with font selection!
