Web Fonts... I Love You, I Hate You
Dear Chalet, why you keep playin’ games with my heart, girl. I thought we were really hitting it off! You made my website look so sexy with your beautifully rendered letters and spacing. We had a good thing going until I discovered you were just a gold-digging typeface lookin’ to break my bank. I know Arial was homely and plain but the relationship worked with or without the cash. I hate to say it but we must part ways. I hope you understand. Best, Font Lover
There has been a rising trend online in the past couple years that has been hard to ignore; Web Fonts. In 1995 Netscape introduced the tag that changed everything, which also became standardization in HTML 2 in 1998, our friend, the tag. This tag allowed developers to specify what font would be displayed on a website as long as it was installed on the user’s computer. If the defined font were not available, it would fall back on the trusty defaults like Arial and Times Roman. Though the room for creativity was apparent, the site design could not rely on a font that was not a standard, more importantly, a TrueType font.
As the web grew and code developed some solutions were created to help display non-standard fonts but they were not always reliable. sIFR and Cufon are both ways to display unique fonts without requiring the user to have them installed on their system. If you were to create a Header Title using sIFR, then your design would rely on flash to generate your text in the defined font face. Though it seems like a good solution for custom type awesomeness it will create a creative road bump in your design if you need it to be mobile friendly. Another thing that needs to be taken into consideration when using sIFR is the load time. The more sIFR is used on a single page, the more rendering that has to happen on your site; creating slower loading time and potentially missing text wherever sIFR is used. Cufon does not rely on flash but instead communicates with JavaScript and a font generator to properly format your requested typeface. It’s client driven and it also can render large amounts of copy as fast as your browser is capable to load.
There was a game changer though; even with it bouncing around for about 10 years it was not until recently that @font-face CSS rules were really being supported by the big browsers out there. CSS properties already control text and how it is rendered for the user in many ways but there was always a hole in web design and that was due to the lack of font options. Using the @font-face code allows the developer to embed the requested font on their server or call for a font housed online in the site style sheet. This opened a door for services like Typekit, Fontslive and Fonts.com which hosts a range of selected fonts, available for online use. The web community embraced these advances, text could now look good and be SEO friendly. Type designers, graphic designers and developers united over these solutions. The type designer could now benefit from their fonts being licensed for web, designers could get a little more fancy with their font choice’s and developers did not have to face-palm when opening up a PSD to discover non-web standard fonts. And there has been a flourish of web designers who have pushed the envelope with their designs and incorporating web-fonts. But there are still limitations, hills that have to be climbed, and hurdles to jump. With the rise of @font-face popularity, some were not ready to embrace it whole heartily. In some cases licensing became a bit messy and complicated. Some type foundries felt in order to protect themselves and their company, they had to ensure their fonts were being appropriately paid for when being used online. This cause them to create their own licensing standards which in some cases were much steeper than others. A service like Typekit offers a multitude of fonts for multiple websites for $50.00/Year subscription (price changes on intended use), House Industries allows embedding from $750.00 and up per font (price changes on intended use). Some might look at that and feel they are willing to sacrifice a specific font for price but there are some who are willing to have the client pay in order to keep the company brand intact. Things like budget, client, and any design restrictions can influence this decision and in turn, the final result. There are some things that have to be taken into consideration by designers and clients when choosing to use web fonts in a design. Does the clients logo use a font that’s available through a web-font service or does it have a separate licensing? In some case’s, when the licensing for a font is too expensive and the client is not willing to purchase that license, a designer has to get crafty. With all the fonts available, it is sometimes possible to find fonts similar to the one you’d like to use. Some companies also have secondary and tertiary fonts to compliment their branding, it is possible one of those fonts might be better suited for online use. A web-font is not always necessary in web design and when using one, the designer must be conscious of legibility and if using that font is even appropriate. Font’s can add to a design, but if used poorly, they can take away from it and even ruin traffic to your site. When starting a new project it is important to address some of these issues with the client right away to ensure the best decisions are made in the design process. If a client does not understand the extra cost or what web-fonts are, make sure to educate them so they understand what they could be investing money into. Web-fonts still have a long way to go but the future holds nothing but exciting possibilities of beautiful designs and clean functionality. Have web-fonts ever complicated your process or added to it? We would love to hear about how you approached the situation and what it's outcome was.
Thanks for the comment Justin. And pointing out the miss quote on Typekit pricing (big difference). Correction has been made.
great post. of note, Typekit is $50/year, not per month.