Fonts or typography is an essential part of your website design.
And has a significant impact on various important factors like conversion and user experience. Select inappropriate fonts, and you will suffer from reduced conversion rates and at the same time will drive away visitors because of poor user experience.
So, let’s talk about different aspects of fonts.
Types of fonts
Primarily there are two types of fonts.
1. Serif fonts
In serif fonts, small lines or strokes are attached to the letters. It is said that serif fonts are easier to read, but the research done on this topic is relatively inconclusive.
The examples of serif fonts are PT Serif, Times New Roman, Merriweather, Lora, Playfair display
Let me show you how the fonts look pictorially.
2. Sans-Serif fonts
Sans-serif fonts are devoid of the strokes or lines that each character had in the serif fonts. In modern web designing, sans-serif fonts are far more popular than serif fonts.
Websites like Facebook, YouTube and many more use sans-serif fonts.
Some examples of sans-serif fonts are Montserrat, Roboto, Lato, PT Sans-serif etc
There are some more types of fonts like handwritten, display, monospace etc.
But more often than not, we are served well by serif and sans-serif fonts.
From where to get fonts?
There are multiple repositories from which you can get fonts for your website. Some fonts cost money and some are free. Depending upon how particular you are about the design aspects, you will go for either paid fonts or free fonts.
For example, Avenir is a paid font, and if your design requires Avenir, then you have to go for Avenir only. But if you are ok with a similar font, then you can substitute it with a free font.
Free fonts
1. Google Fonts
You can use fonts for free on Google Fonts. Most of the themes on WordPress have the option to select the Google font of your choice.
For example in Astra theme, you can choose the Google fonts in Appearance -> Customise -> Global -> Typography
There are hundreds of Google fonts available for selection. That doesn’t mean you should use 3-4 fonts on your website. More on to that later.
Google fonts are trendy, not just because they are free but
They load quickly (Yes, fonts also take time to load)
They render nicely on all browsers and operating systems
The collection is huge
2. Adobe Fonts (Previously known as Adobe Typekit)
Adobe fonts also boast of a massive collection of fonts. However, it falls in the Freemium category. Not all fonts available on the Adobe fonts are freely available. Some fonts are paid, and some are free.
You need to purchase Adobe products to get full access to Adobe fonts.
One of the gripes I have with Adobe Fonts, is they are a bit slow to load. I don’t have any conclusive evidence on this, but on my previous website I was using Montserrat from Adobe fonts, and when I switched to Montserrat from Google fonts there was a definite bump in the speed.
But the sample size is too small to comment.
Paid fonts
Many font repositories offer paid fonts. Some of the popular ones are
Fonts.com
Fontshop.com
Myfonts.com
I, myself, have never bought any paid fonts. Most of my needs have been fulfilled either by Google fonts or Adobe fonts.
Now let’s talk about some guidelines on how to select fonts for your website
1. Use at the most two fonts
Using more than two fonts on a website looks amateurish. Makes your site look unprofessional. Therefore you should stick with just two fonts and not more than that.
Another reason for not using multiple fonts is because all fonts take time to load. And therefore a bunch of fonts used will slow down the site eventually.
2. Headings and body
You can use one font type for heading and another font for body. Usually, I prefer to go with a serif font for the titles and sans-serif font for the organisation. However, that is entirely up to you.
Choose what suits best for your website.
Just as a note, when I say headings, I mean headings and subheadings.
3. Use common sense
Some of the fonts are very playful, some are artistic, and some are corporate types. So, depending upon the use case and your business, select appropriate fonts.
Do not use playful fonts for a corporate website; similarly do not use boring corporate fonts for a website for an artist.
So, check out the sites I have mentioned and use the fonts properly.
If you have any question, do mail me using the contact us page.
