8 Tips to Choosing your Web Font
We weren’t always spoilt for choice when it came to choosing which web font to use.
When the web was first becoming popular designers were restricted to a few ‘web-safe’ fonts. A web-safe font would display correctly across a wide range of computer systems. If the user didn’t have access to this font on their computer then it would fall-back to author-specified fonts. This unfortunately meant that your website could view differently across different devices. In 1996 Microsoft released the Core fonts for the Web project which gave users access to the web fonts Arial, Comic Sans, Courier New, Georgia, Impact, Times New Roman, Verdana, Webdings and Trebuchet MS. This limited choice would lead to almost all websites using the same few fonts.
As our computing power has progressed, developers have extended the support to hundreds of different fonts. The development of the Web Open Font Formate (WOFF) lead to an influx of web font hosting services which now allows users to pay a subscription to get access to hundreds of fonts. An example of this is Typekit. With so much choice available choosing a web font to represent your brand online isn’t easy. We previously mentioned 10 of our favourite free web fonts but choosing one of these is no simple task. Don’t worry though, we’ve got your back with our 8 simple tips to choosing your web font.
1. Choose a Web Font
This might seem obvious but the last thing you want to do is choose a font that isn’t optimized for the web. A desktop font is designed to be installed on your computer and used on applications that only you can view. A web font is specifically tuned for online use. It targets individual browsers and usually comes in four formats. It’s vital that you choose a web font over a desktop font because a desktop font won’t display correctly across all browsers and could make your website look like the above text. Making a website look like it was written with letters clipped from a magazine isn’t a good look.
2. Take your Time
Choosing a web font isn’t a race. You need to shop around and don’t just take the first font you like. There are literally hundreds of web fonts available and you can’t possibly get through them all within one afternoon. Choosing the correct web font to represent the copy on your website will take time and patience but the results are more than worth it.
3. Scout out the Competition
How embarrassing is it when you turn up to an event only to have the same outfit as someone else there? The same applies to the world of typography. When it comes to choosing your web font it’s important to be aware of what fonts your competition are using. A website will usually have two fonts (headers and copy) and if you copy both of these your website isn’t going to stand out. You can also learn what fonts perform well within your industry from this research. If 8 out of 10 gardening websites use the same font for the copy then you should consider using a similar type.
4. Create a List and get Feedback
Creating a list of your favourite fonts will allow you to compare them to each other and choose your favourite. It’s also a fantastic tool to send to friends, designers, clients and even fellow business owners for advice. You can also play around with the styling and sizes for the fonts to make sure it looks good when bold or in italics. Your font is going to appear at high and low resolutions across many different screen sizes so making sure it’s responsive is very important.
5. Represent your Brand
If your website features an expensive high end product then you probably shouldn’t use Comic Sans. A good place to start your quest for the right web font is your logo. There are multiple different families of web fonts available but some of the more commonly used ones are:
- Serif fonts – Often considered traditional or professional these fonts look great on corporate websites.
- Sans serif fonts – These are modern and are fantastic for use in the technology sector.
- Script fonts – These fonts are sophisticated and feminine. They are fantastic when used in the photography or wedding sectors but only for headers. Never use a script font for copy.
- Handwriting fonts – These fonts are casual and look great on personal websites.
The above list isn’t exhausted but it’s important to take font families into consideration when you choose your web font. If you don’t think the font suits the look your business is going for then don’t use it, no matter how much you like it.
6. Consider File Size
The average size of a web font is around 40kb per weight. If you include bold and italic then you are looking at around 160kb per font. This means you should consider two things when choosing your web font. Firstly only install the weights you need – Some fonts have over 8 different weights and you just don’t need to install all of them if you aren’t going to use them all. For a heading it’s often possible to only install the bold version of the font. Secondly the more complicated the font the more size it’s going to take up. This increase the time it will take users to load the page and can ultimately increase your bounce rate. Thankfully your fonts shouldn’t take up too much space because you should only…
7. Use Two Web Fonts
Just because you now have access to thousands of web font’s doesn’t mean you should create a Frankenstein website. You are ultimately designing your website for the readers. Have you ever heard of the saying “Three’s a crowd”? Well when it comes to web design it’s right. We recommend that you use one web font for the copy of your page and a different one for the headers. In certain situations you can use a third font for the sub headings but we would usually advise against this.
8. Font Pairings are Important
You need to choose a combination of fonts that work. You’ll usually use one web font for headings and one for copy so you need to make sure they compliment each other. There is nothing worse than having two competing fonts. If we consider the font families from 5. then we can make some quick rules:
- Don’t pair a handwriting font with a script or handwriting font.
- Don’t use a handwriting or script font for the copy of the page.
It’s pretty simple but we basically recommend that you stick to serif or sans serif fonts if you aren’t sure. Handwritten or script fonts can often look out of place, especially on a corporate website.
We’ve only dipped our feet into the water when it comes to the rules for choosing a web font but this should be enough to get you started. If you are looking for a list of free fonts that are all web safe then check out our list of 10 free google fonts. If you need any further advice or want to put your chosen fonts to good use then:
