Moving Forward with Web Fonts
In the past, we’ve talked about the emerging trend of web fonts. In particular, “our posts during SXSW 2010”:http://www.armadillostudios.ca/sxsw10-the-big-trend-is-web-typography/ were glowing with the potential of this new trend. But oddly enough, up until our last couple of projects, Armadillo Studios has made a concerned effort to take this latest trend with a side of caution.
Well let us explain.
For those unfamiliar with the theory of web fonts, it’s essentially a simple way to expand upon on the traditional web interface and grow it from the five universally accepted fonts (Arial/Helebrtica, Verada, Georgia, etc.,) to a world of limitless possibilities. This concept has been around for a few years, but up until recently there were a few flaws. But now it’s become much easier for the average web designer and user to leverage this technique. Which is a momentous step for the web design community and the beautification of the Internet. As a quick analogy, it would be like handicapping a painter to only the basic nine colours from the colour wheel and then suddenly allowing them access to an entire palette of options. So, you can see why the introduction of accessible Web Fonts has become a highly anticipated trend.
_So why haven’t we fully jumped on board?_
There are a couple of reasons for this. Although we love experimenting with the latest trends, our main concern is always in regards to the client and their potential audience. The next is that there are a handful of the small issue with cross platform rendering.
Ironically, Web Fonts have become one of the most popular new trends of the web design industry because of their cross browser rendering. Essentially, regardless of the operating system (Windows or Apple) or browser (Firefox, Internet explorer, or Chrome) web fonts work. Which is fantastic in theory, right?
_Well, sort of_.
One of the glaring issues we’ve come across with web fonts is when they are rendered across different operating systems (in particular Windows XP, Vista, windows 7). While there is no issue with Apple operating systems and newer versions of Windows, the older Windows operating systems render web fonts in a less than ideal manner. Which becomes critical, when web base fonts are being utilized for the basic content of a site.
Check out the screen shots below for a simplified example. The first shot is from a Apple operating system running on Firefox 3.6, while the second shows the same site in an older Windows operating system on the same browser.
As you can see, the web fonts on the Apple operating system appear near perfect and gorgeous. While the same content appears choppy and almost impossible to read on one of the Windows based operating systems. For the users of these older operating systems, even the newest browsers render the fonts in a horrendous manner, making a beautifully designed site unbearable for the user. It’s because of this flaw that we’ve held off full utilizing this new trend.
Now don’t get us wrong, Web Fonts are fantastic. Similar to the “Internet Explorer 6 debate”:http://www.ie6countdown.com/, the corporate world isn’t necessarily on the same page as the latest web design trends. Many large corporations, especially in the Southern Alberta region, are only just migrating to the new operating systems. Which ultimately means that there is a significant amount of the potential customer base still using antiquated operating systems.
As designers, we need to keep the limitations of web fonts in mind especially when crafting sites for clients and the general public. In particular, the potential issues that occur when Web Fonts are overused for the body content. What some designers forget is that many users are handcuffed when it comes to operating systems and are unable to control this aspect of the user experience.
But now as the first few hurdles of the Web Font movement are starting to be overcome and we’ve seen the good and bad of this movement, Armadillo Studios is starting to leverage this new technique in our next couple of projects.
And boy are we ever excited to add this tool to our arsenal of designs.
_Thank you to “Typekit.com”:http://www.typekit.com for the screen shots_