You know that song from Oliver?
Back in the old days (though not as far back as Oliver)… websites used to be restricted to a pretty small variety of fonts – and we quickly got bored of them. Nowadays the internet is littered with so many different fonts that it can be very confusing to choose the right ones for your website.
Good fonts (aka typefaces, which make up part of your site’s typography) can help your site stand out and create a good first impression. Your choice of font can, believe it or not, reveal your personality; it can convey fun or professionalism.
First, get the basics right
Stick with just 2 or 3 fonts for your site.
Any more will start to look messy.
- An easy to read one for the main text
- An eye-catching one for headings
- Perhaps a display style for the title or your logo
Make sure they are always easy to read.
- Using a font size that is large enough
- Setting it in a colour that allows sufficient contrast with the background
- Checking its appearance on any web display size, and on any device*
*Check how it displays on mobile as well as desktop, especially the smallest text. Be aware that fonts can render slightly differently on different browsers and different operating systems.
These days, with better screen resolution, they can be :
- serif (ie. the letters have little feet, like Times New Roman, which used to be favoured in print)
- or sans-serif (straight letters without feet, like Arial or Verdana, which used to be favoured for the web)
Ensure they are standardised.
This doesn’t mean using the same font that everyone else uses. It means using a licensed, standard font so that everyone who visits your site will see it displayed in your chosen font.
Huh? you say. I thought a font was a font?
Well, no unfortunately, it’s not that easy…
Just because you can see a font on your computer, it doesn’t mean that everyone else sees that font on theirs.
Say, for example, you’ve created a party invitation in PowerPoint and used the font Papyrus (this is strictly hypothetical!) It looks just as you hoped for your Egyptian themed party. You save it as a PDF and email it out to your friends. Happy days…
Then you decide to create a page on your personal blog site and recreate the content of the invitation there, in HTML (or WordPress if you like, which uses HTML too, under the covers.) You add a little piece of CSS code that says “font-family: Papyrus, Arial, sans-serif;”. When you display your new webpage, it looks just as you hoped. You copy the link and email it out to your friends.
That’s when the happiness fades…
When your friend Jo clicks the link to your new page from her Mac (that doesn’t have MS Office installed, or the included font Papyrus), she sees a bland party page written up in Arial.
You see, fonts are not universal. The ones you have on your computer have been licensed as part of your operating system or some of the software applications. Implicit in this is that you can use these fonts for anything you create on your computer – like Word documents, presentations, a logo for your business.
But you can’t stick one in your website and share it out to the world, as the license doesn’t allow for that (for various legal reasons that are too boring to go into here.)
Don’t worry, there is a way…
Use Google Fonts
Using Google’s web fonts is one of the simplest ways to ensure that everyone gets pretty much the same experience on your site. Legally.
Visit https://www.google.com/fonts and you’ll find almost 800 different fonts that can be used on your website.
You can type in whatever sentence you like to see it previewed in each format. You can also filter the styles by type, thickness, etc.
You can also sort by popular and trending fonts. Don’t shy away from popular fonts, thinking that they’re too common – they are probably popular for good reason (like being easy on the eye). Remember, the best font choices are ones where readers do not notice the font but the message.
Experiment with uppercase and lowercase letters, and with numbers. Some fonts look 99% ok, but might have a weird uppercase Q, or a very rounded O that you might not like.
Here are just some of the fonts available (as shown via the Poster option of the Google fonts page):
Once you’ve chosen the fonts you want to use, you can simply add the link into your site’s header and it will always display the same way as the web page calls the font directly from Google via an API.
Another reliable source for fonts is Adobe Typekit which is a subscription service, but does include some free fonts.
How to choose fonts for your website?
Here are some useful tools to help you select fonts.
What font is that?
If you see a font you like on another site, view it in Chrome using the add-on called What Font. It lets you hover over any text and will give you details of its font style.
Which font goes with which?
Check out http://fontpair.co/ which shows you a series of paired fonts (using Google Fonts) so you can see how they look together as a heading and text.
What about matching your website fonts to your logo design?
Logos with text elements can be designed in almost any font available. That doesn’t mean you can use that same font on other parts of your website. Depending on the license for that font, you may not be entitled to use it as web text.
Often the web designer doesn’t come onto the scene until after a business has chosen their business name and their logo. Sure, the logo as an image can be inserted on your website, but if you want to create matching textual elements it may not be so simple to use, or match, the font for online text.
If you can, always find out which fonts were used in the creation of your logo. Better still, get your hands on the original artwork if you can (in EPS, AI, PSD or even PDF format). Without that, it can be very difficult to match the font from a GIF or Jpeg.
That’s not to say we can’t find a comparable matching font, or one that pairs well with it. But being aware of the restrictions, and understanding the variations and licensing issues with fonts can make your decision process smoother.
This brilliant infographic is a good starting point…