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.

8 comments:

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

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

    ReplyDelete
  2. The blog is good enough, keep up writing such type of posts.
    WIKIPEDIA

    ReplyDelete

  3. تعد الاول افضل شركة غسيل خزانات بالمدينة المنورة تعمل على استخدام افضل ادوات تنظيف وتعقيم خزانات المياه

    ReplyDelete
  4. Whether somebody pursuit of his vital thing, hence he or she desires to be accessible that at length, hence that thing is maintained over here.
    web design company in new york

    ReplyDelete
  5. This blog is so nice to me. I will keep on coming here again and again. Visit my link as well proweb365.com

    ReplyDelete
  6. I read your blogs regularly. Your humoristic way is amusing, continue the good work!
    top 10 website design company

    ReplyDelete
  7. I sent your articles links to all my contacts and they all adore it including me.
    UX designers

    ReplyDelete
  8. Very useful post. This is the first time I visit here. I found so many interesting stuff in your blog especially its discussion. It's a great article. Keep it up.
    ProWeb365

    ReplyDelete