A Word on Typography - Part 1: How to find fonts for your website.

How do I get different fonts?

I recently received an email from a client who needed some advice about which fonts would best serve her website requirements.

Let's face it, choosing which font would best characterise the information displayed on your website is not easy. With so many fonts to choose from the process of finding the appropriate typeface can be a bit daunting.

The subject of website typography can be an extensive one and a good place to find out about it is the e-book Butterick's Practical Typography over at practicaltypography.com - but let's first deal with the initial question: Where to find fonts?

In traditional printing, font refers to a particular size, weight and style of typeface. Nowadays, with the prevalence of digital typography the terms font and typeface are synonymous and it is the available fonts on your computer or mobile device which determine which fonts can be used on your website.

Web safe fonts

Although there may be many fonts installed on your device for use in word processing or graphic design applications, they may differ from those installed on another person's computer. This means that there are only a handful fonts available to web designers for use in their designs.

Web safe fonts are those found on both Windows and Mac operating systems.

Fortunately, web designers are not limited by this as there are ways to include more than just web safe fonts in a website's design.

Image Replacement

One solution was to use graphic design software to create an image file of the words to be used which gave web designers the greatest amount of control over how typography appeared on a website. This is more or less similar to how traditional print designers would arrange type. One advantage of this is that images of text allowed a designer to match exactly the branding requirements of the website.

There are some drawbacks to using this method. Using images to replace text in your web pages is not accessible for visitors who cannot see the images nor search engine friendly as the automated spiders which crawl sites cannot process images.

Hosted and self-hosted fonts

Fonts can be found, readily available, on many web font services such as Google Fonts and Adobe's Typekit. These hosted services provide a wide range of fonts (some free, some require paid subscription) which can be easily inserted into a website by including a single line of code.

Another method which gives web designers greater flexibility is to have fonts hosted remotely on a web server. Self-hosting enables the use of specific fonts, such as those used in a client’s branding, that are not reliant on the generic web safe fonts pre-installed on visitor's computers. These can then be called using the CSS command @font-face. A disadvantage to this method is that different browsers support different font file formats and fonts often require the purchase of a licence to host a copy of the font files on the server.

Next week

Now that we have addressed where to obtain fonts from, how do we go about choosing the right ones for our website? Well that is the question I will be discussing next week in Part 2: How to choose fonts for your website.