Web Typography: Doing it right

When I first started designing for the web, font choice was limited. Really limited. You were basically only allowed to use fonts that you knew came preinstalled on people’s computers, and that gave you a solid choice of about 10 that were any good.

Recently though, typography for the web has come forward in leaps and bounds. Designers are much more free in their designs to use unusual fonts, and make them appear on the web thanks to a number of technologies which have evolved.

sIFR (Scalable Inman Flash Replacement)

This was one of the first text replacement tools available. This basically uses JavaScript to check whether you have Flash installed. If you don’t, you see the original text. If you do, it uses Flash to display the font you originally intended.

Cufón

Cufón uses JavaScript to replace your text without Flash. This makes it very accessible to a large number of users. However, it does mean that you need to select all the text you want changed manually using JS.

Typekit

Typekit was recently bought by Adobe, and generally regarded as a good move. Typekit works by embedding the actual font on the website, allowing you to see it exactly as intended without any image replacement. It utilizes the @font-face CSS rule to style text. Typekit is a paid subscription and hosts the fonts for you.

Google Fonts

I remember when Google Fonts first started out and its choice was limited to 8 fonts. These days though, it’s blossomed in to 616 (at time of writing) and is a fantastic way of getting beautiful fonts embedded on your website for free. You can either choose to let Google host them for you, or download the zip files and put them on the website yourself.

When I was first learning about web design, I was told over and over again that you should keep the number of different fonts on your site to a minimum. This makes sense. Put 10 different fonts on your site and you’ll soon realise why. Font pairing is a great consideration in design – there are examples all over the web where two fonts have been used well in conjunction with each other; generally a title and body font, or a sans-serif and serif font for contrast. For some good examples of these pairings, take a look at 10 great Google Font combinations you can copy.

For examples of typefaces we’ve used recently on our sites, check out our portfolio or get in touch to see what we can do for you.