Wednesday, May 12, 2010

Building optimum font stacks

Those of us with a development background, as opposed to design, often don't give typography much thought. We're most likely to pick a common font stack, say "Arial, Helvetica, sans-serif" and use it to death.

But typography is really important. It's only when you go to a website with clearly thought out fonts that aren't overused all over the web that you realise just how much difference they can make.

The problem for developers is that it's difficult to devise your own font stack without really understanding the attributes of the different fonts. Some are wider than others (x-width), others taller (x-height), some heavier, others look different on Windows and Mac. If you don't match them up well it can throw your design off balance.

This post on A Way Back talks about optimum font stacks. It includes a useful table that looks at the percentage of Macs and PCs with certain fonts loaded. It then takes a handful of websites as examples and makes suggestions as to the optimum font stacks for them. Less common fonts are moved up the stack so they're more likely to be used. Mac fonts are matched with similar Windows fonts. Fonts that are wider than the desired font are removed or replaced. And so on.

This is a useful resource for web developers, giving you much of the information you may require to design your own font stacks. Better than that, it gives some marvellous suggestions of font stacks that you can re-use on your own site.

1 comment:

  1. Did you hear about the new Google Font API and Font directory?

    http://code.google.com/apis/webfonts/

    ReplyDelete