Fonts - giving shape to meaning

Taxonomy: 

Location

France
47° 34' 54.6528" N, 2° 39' 31.2876" E

Webfonts are here and are getting better - and I’ve started using them increasingly on some of the sites I’ve been working on. Whilst I’m cautious about adopting new trends for the sake of it, the arguments for using webfonts are more and more persuasive.

The restriction of installed fonts

Arial, Verdana, Times New Roman, Tahoma and the rest are perfectly serviceable fonts that have much life left in them. But what’s available by default (i.e. what’s installed on most computers) is a limited bunch. I can’t simply style a web page using a favourite font that happens to be on my computer. The font needs to be on every machine that’s displaying the page or the browser will swap it out for a fallback one that is available, meaning that the intended design doesn’t get viewed.

This is where webfonts come into play. By using one of the many webfont technologies available - and they come in different guises - a page can download a font that’s not installed on the viewer’s machine and use that. Within limits, this frees designers to use more interesting fonts.

So the first reason to consider using webfonts is to help break out of the tedium of having to use an installed font.

@font-face

In October 2011 the W3C published its working draft for the CSS3 fonts module. It proposed the @font-face rule which “allows authors to select a font that closely matches the design goals for a given page rather than limiting the font choice to a set of fonts available on all platforms”. As new browser versions started to support this, it became possible for web designers to make different fonts available on the server and to link to these in a site’s code.

@font-face gives us real text, not graphics

The big gain in all of this is that designers can use real text, styled with different fonts, rather than needing to employ graphics that used fonts that were only available to the designer. (Just use your cursor to select the fancy text above: yep, it’s real text, not a graphic!)

And, of course, by using different fonts you can begin to apply a distinctiveness to your site, one which attempts to express a different ‘personality’ to your site’s content. Typography has a long and venerable heritage and we are fortunate that some aspects of this can now be used in designing for the web.

Observing font licensing

Unless you are prepared to design a new font from scratch (a skilled process), you will need to observe the license that its creator attaches to its use. You can’t just grab any font and upload it to the server.

Web type services

The floodgates are opening and there is a growing number of webfont providers, including: Typekit, Fontdeck, Fonts.com, Google Web Fonts and Font Squirrel. Some of these require an annual fee, some have fonts of variable quality and some won’t allow local font storage and instead link back to the provider in real-time, potentially slowing down the font-rendering on your own pages.

Font selection criteria

So that we don’t go wild and start breaking established design principles, let’s acknowledge one of the fundamentals of typographic design:

  • two different font faces per page/site should do it - and in certain cases three might be acceptable. More than three may simply be bad for the eye/brain.

I’d then follow up with these criteria:

  • legibility matters above style: choose a font - particularly for small body text - that is easy to read
  • if you need to display non-English text where letters are accented, choose a font with a full character set
  • choose a lightweight font that downloads relatively quickly and will render a page’s text with minimal delay
  • because different fonts imply different ‘personalities’, choose fonts that are appropriate to your content: don’t, for example, use ‘comic’ fonts for serious content, etc. Above all, typography is the servant of the text that it carries.

Possible disadvantages

Assuming that you make a good choice of fonts for your website, there are still a couple of possible disadvantages:

  • pages will be a bit slower to load simply because the required files that display these new fonts also have to be downloaded to the browser;
  • whilst this happens there will be a flash of unstyled text (FOUT): the browser will render a page’s text in a default font until the required files have downloaded, at which point everything will settle down properly.

If this bothers you, the compromise isn’t worth it! Personally, I think this is more than tolerable.

Choosing fonts for your website

My current favourite provider is Font Squirrel, so head over to their site and browse through their available fonts. (Their service is free and they allow their fonts to be stored locally, so helping to speed up page download.) Using the above criteria, you should be looking for no more than two different fonts:

  • one for titles - look amongst the serif, calligraphic, script or hand-drawn groups;
  • one for body text - look amongst the serif or sans-serif groups.

Be prepared for me to have an opinion on your choice and steer you elsewhere. I will be checking the legibility of your chosen fonts and their weight in terms of file size. Happy hunting!

August 2015 update

All change: my current favourite font provider is no longer Font Squirrel but Typekit. For the grand sum of $50 a year I can use their fonts on any number of websites. That’s currently the best deal because their fonts are derived from very high-quality typefaces designed by professionals. Adobe’s delivery network (CDN) is now more mature and the speed with which the font files are delivered makes for a rapid display of beautiful fonts. My guidelines for choosing them, however, remain the same: one for titles and one for body text. Whilst you are browsing the Typekit collection, admire their font-selection interface. Pure magic!