DesignCast recap: Step up your web designs with real web fonts
I would recommend attending any of the HOW | Print DesignCasts in your interest area. Know that they will last 90–120 minutes rather than the stated hour. The content is strong enough to offset the fact that these are, at base, marketing pitches for specific products.
Here are my notes on the DesignCast I attended November 18th. “Step up your web designs with real web fonts” was presented by Jim Kidwell, Product Marketing Manager for Extensis. In contrast to the first webinar I attended, Jim’s was very practiced and expertly timed—well, that’s his job description.
What are web fonts?
- fonts on a web server
- downloaded to user’s browser
- called using @font-face CSS tag
No more flattened text inside images means better search engine optimization (SEO).
What are the options?
- Use a rental service like Extensis’ WebINK (or Typekit)
- Create and host your own (may violate EULA)
- Purchase web font rights from type foundries
The obstacles to implementing web fonts include the fact that most desktop fonts are not licensed for use on the web and there are different font format requirements for almost every browser. So, #2 is complicated and potentially illegal. #3 is expensive, and the foundries don’t offer all the formats to cover every browser. #1 takes care of technical and legal issues—it’s easy.
My take
The desirability of web fonts is self-evident from a design point of view. I’m also convinced I don’t want to take the DIY approach. An excellent question came in at the end: how do I convince my boss not to go for #2 as a cost-saving measure? And the answer is that the rental services really do a better job addressing the technical and legal issues. For example, because the font is actually sent to the user, WebINK booby traps the font files so they can’t be pirated. Save your clients from liability issues, and extra billing. Imagine dealing with fonts breaking after browser updates—that’s not the best use of my time, plus, I don’t know how.
However, I’m not so sure purchasing web fonts from foundries is a bad idea (option #3). The foundries on both WebINK and competitor Typekit are excellent. I’m running Porchez Typofonderie’s Apolline for free from Typekit on my blog right now. It is exciting to see a level of quality found in print penetrate the web. Still, as web fonts catch on, a wider selection of fonts will be needed. I’m thinking of using FF Scala as part of a professional identity. When I browsed FontShop’s website I discovered they have a partnership with Typekit—if I buy FF Scala Web Pro, Typekit will host it and fill in the missing formats for me. Yes, this is more expensive than one of WebINK or Typekit’s regular offerings, but it could be crucial in corporate identity work when a specific font is needed.
WebINK features
- billing is monthly, not yearly
- once a design is finalized, transfer the type drawer from your account to client’s account so they will be billed instead of you
- SVG support for iPhone/iPad
- integration and a year free with font manager Suitcase Fusion 3 (not my preference for font management, so I tuned out a bit)
Implementation tips
This is what I jotted down, but you should view the webinar links below for greater depth and accuracy. If this makes no sense, basically.
- Paste @font-face into Dreamweaver before body.
- Down in body and heading text, put web font family name first before default options (i.e., choosing Verdana, Helvetica, Arial you put Whatever, Verdana, Helvetica, Arial).
- For better typography, do declare styles to avoid faux-styling of bolds and italics:
p OmnesRegular
p em OmnesRegularItalic
p strong OmnesMedium
This should be pretty intuitive for print designers as it is like using paragraph and character styles in InDesign.
- How do you preview web fonts during development, when your site is not live? On a Mac, turn on Web Sharing in System Preferences. Store your work in your home folder’s Sites folder. Add your computer’s address to your type drawer authorized domains.
Firefox ‘flashing’ fix
Firefox behaves differently from browsers like Chrome and Safari when loading pages. It does not wait until the content on a page is complete to display. Instead it shows bits and pieces as they are received. This methodology causes an appearance issue with web fonts—text momentarily appears in default fonts before the custom web fonts load and apply. Jim shared a script that will solve the problem and I took a screenshot:
Click through to Paul Irish's site for more technical discussion
Sample sites and more info
cityoftype.com
webvanta.com
extensis.com/aspic
blog.extensis.com
blog.webink.com
rebecca henretta | design » into « words 