Preface
One of the most important aspects when you make a website is the font or the font pairing you choose. Great legibility is only one aspect when deciding for a font. However fonts do much more. They greatly define the look and feel of your site and therefore also transport a message to your visitors. Hence choosing the right fonts is an important yet sometimes very tricky task.
In this post we want to give you some guiding advice on some of the core aspects to look for when choosing fonts.
What to consider when choosing fonts for your website
The sheer amount of existing fonts is amazing. But which fonts should you use for your next blogging, business, e-commerce, portfolio <you name it> website?
Next to different levels of legibility a certain font has, fonts can also transport a certain style and feeling. Consequently choosing the right font is vital step in designing a website. So to some extend, only changing the font of your website can already alter its perception greatly.
Let’s begin with classifying fonts. There are several classes of font styles out there which basically can be tied to a certain feeling, emotion or association. On the basis of this classification you can make decisions for choosing the right fonts.
The generic classification of fonts
Basically you can differentiate between 5 different classes of fonts. Therefore the image below gives you a first overview and some real world examples.
These classes all have their individual characteristics and evoke a certain feeling or association with your visitors. Here are the basics:
- Serif fonts: Characters of serif fonts have thick and thin strokes. Moreover these fonts are usually flared at the ends.
Feelings / Associations: Traditional, stable, respectable, authoritative, impressive - Sans-serif fonts: These class includes fonts with squared-off ends and a consistent line thickness. Usually these fonts work well on computer-screens as they are easier to read on a display composed of pixels.
Feelings/ Associations: Simple, sensible, straightforward, universal, clean, objective, stable - Display fonts: Use these kind of fonts for headings and headlines. This is because they attract attention and evoke some sort of emotional response. However don’t use them for long texts.
Feelings/ Associations: friendly, unconventional, eccentric, unique, amusing, expressive
Often times this generic classification is extended with two more classes. These are Modern fonts and Script fonts. You can classify them as follows:
- Modern fonts: These fonts often have progressive and stylish appearance. Modern fonts do not just reflect whats modern right now, but also what will be a trend tomorrow. Brands use these fonts to carry exactly that sort of reputation with their audiences.
Feelings/ Associations: Smart, trendy, forward-thinking, strong, progressive, chic - Script fonts: These typefaces are derived from 17th century formal writing styles. Many characters have strokes that join them to other letters.
Feelings/ Associations: personal, fancy, feminine, elegance, creativity, affectionate
Next let’s have a look what we can learn from this.
Our recommendation for your website
General rule of thumb for font usage:
Use serif and sans-serif typefaces for the text body or headlines (also logos). On the other hand employ script and display typefaces for headlines only when possible.
Choosing the right fonts for YOUR website:
What emotions and feelings do you want to convey with your website? How do you want your visitors to feel. Is a traditional, simple or is eccentric font class the best approach?
So what is the ideal process to find the right font for your website? Just follow this three step process.
- Think of one or two feelings you want to convey with your site
- Have a look at our classification and choose a font that suits these emotional states well. Use this font for your headings and your logo
- idealy pick a sans serif font for your body text that pairs well with the font you’ve choosen in the previous step.
Pro-Tip: Don’t overdo it. We recommend to choose only two different fonts for your websites. So one for your headings and another one for your body is enough. Also please remember: fonts that work well on your body usually also work well for your headlines.
And there you have it. Some simple yet practical approaches to choose the right fonts for your website.
Resources
In case you don’t want to think too much about fonts and let others do the hard work for you in choosing great fonts, we recommend you read our post about Top 10 Free Fonts.
Besides that here are some more great ressources:
- Google Font Library with thousands of free fonts: https://fonts.google.com/
- In depth guide on Fonts for the web: https://design.google/library/choosing-web-fonts-beginners-guide/
Conclusion
Choosing the right font for your website is a key element for its success. To get it right we outlined the key ingredients when choosing suitable fonts. Just stick to these basic guidelines and you are good to go.
We also recommend you surf the web for popular websites and see what fonts they use. Get your inspiration from great websites. They’ve probably put a lot of thinking into choosing their fonts. If you like what you've read...why don't you share it 🙂
