Typography on the web

In the early days of the web you were limited to using a small number of fonts on your website and they were the common ones that most people had installed on their computer.

There were ways of getting different typefaces onto your site but it usually involved quite a bit of work and occasionally it felt like you were dabbling in the dark arts.

One of the workarounds involved generating text as images and wrapping them in header tags, which at the time wasn’t great for search engines and was quite time consuming. Then there was the extremely clever sIFR method which used a combination of Flash files, CSS and Javascript to render small passages of text in your chosen font.

Unfortunately using these techniques meant an increase in page sizes and ultimately download times. It was a risky tactic to use on your site at a time when super fast Broadband connections were few and far between.

Today there are a number of options available to improve typography on your site. You can buy fonts that have desktop and web licenses, allowing you to use them on your computer as well as online, or you can use one of the popular hosted options like Google Fonts or Typekit.

Google Fonts

Google Fonts is a free service and it’s very easy to use. Drop two lines of code into your page and the font appears on your website. The fonts, of which there are hundreds, are hosted on Google’s servers and for free typefaces they’re very good in terms of variety and quality.

Google Fonts

Google Fonts are free, easy-to-use and optimised for web use.

Adobe Typekit

If you want to use professional foundry fonts like those from Adobe, you should look at Typekit. Let’s say you use an Adobe font such as Gill Sans in your logo, it’s nice, if not essential, to reflect that font in your web pages. Doing that re-inforces your brand, keeps everything consistent and tightens up your visual identity.

Adobe Typekit

Typekit gives you access to professional foundry fonts.

Of course, Fonts should always be used sparingly whether you’re designing something for print or the web. Adding too many can confuse your message and dilute your brand. Adding too many to your website also increases page size and download times.

Personally, I’d suggest sticking to a maximum of two brand relevant fonts on your website, one for headings and one for body copy.