Edinburgh Web Development

Web fonts fun

Typography beckons for websites

by Iain Wilson

19 April 2012

We've written before about the emerging abilities to have an increased number of fonts available for websites instead of the staple 9 'web safe' fonts.

Our article back in May 2010 introduced the @font-face declaration from CSS3 and web fonts.  A brave new world was emerging and it looked like the skill of using typography was finally going to reach the web community.

Since then, Google have launched their Font Directory and there are numerous other places where you can link to, or download 'web' fonts for use on webpages, without needing to pay for a license.

Sounds good doesn't it?  And it is.  But there are still teething problems.  A lot of these web fonts may look ok on the directory page, but when used in real life web pages, they don't look good at all.

For example, have a look at this text in the Bitter font on a Chrome browser

Bitter font example

Can you see the little artifacts around the letters?  Let's blow it up a little so we can really see them.

Larger picture

It doesn't look great, does it?  Why does this happen?  There are two contributing factors.  Firstly, the font may not have been built to 'professional' standards.  Remember, a lot of these are free, made by enthusiasts.  Secondly, the browser's rendering of the font may be at fault.  Windows has had difficulties with anti-aliasing and although you can use the ClearType setting to improve things, it doesn't make it perfect.

So what can you do?  The only answer seems to be to experiment with the available fonts until you can find ones that are giving you the typography style you want and the quality, too.  It might be worth paying a little as well - shock!

Of the free directories, we've found Fontsquirrel to be reasonable and if you're prepared to pay a little Typekit is not expensive and the quality is much better.

Overall though, good times ahead for typography!

Liked this article? Please share it with your friends and colleagues.

comments powered by Disqus
Blot Design,
10 Colinton Road, Edinburgh, EH10 5DT
Terms, Cookies & Privacy