Web type in the real world


For the past few months I’ve spent a lot of timing exploring and using web fonts both in sandbox time and in client projects. I’ve spoken to co-workers, pitched to clients and actively worked to change my workflow to design with web fonts in mind from the start of my projects. Web fonts aren’t a new idea by any means. With wide spread use of modern web browsers, tools like Typecast and services like Typekit, fonts.com, etc. I figured the time was right to move forward and start using web fonts on every project.

As a designer and a lover of type (though not an expert) it is a very exciting time. It felt liberating at first to throw the shackles of Arial, Verdana and Georgia aside. With thousands the fonts available from various font services and some real gems from Google’s selection of free web fonts there is an incredible opportunity to breath new life into a website, as well as carry a company’s brand standards across to the web.

That liberation in the real world has been somewhat sort lived as I’ve found myself having to revert back to the old ways on a couple of projects. I’m not sure if the problem has been a lack of setting expectation on my end, or maybe a few wild card combinations of device configuration that the client happened to be using. Never the less rendering issues have caused concern in these particular projects.

It’s heart-breaking to see a design revert to a font stack that doesn’t live up to the original vision of a site, but the silver lining here is that I’ll carry these lessons forward:

  • Check web fonts across as many browser/OS combinations before making a recommendation
  • Set clear expectations about font rendering from the get go
  • Set your type using tools like Typecast rather than Photoshop and share this with the client
  • Consider progressive enhancement for web fonts to minimize rendering issues (ie. detect for old Windows OS and serve system fonts)

I still strongly believe web fonts are the right approach and will continue to push for their use, but with a little more caution from here out.


Leave a Reply