June 2, 2009
The W3C recommendation for CSS web fonts will be 7 years old soon. Why, after all these years, has typography for the web not progressed further? Why haven’t designers embraced linked, downloadable fonts in their designs?
We’ve spent a lot of time thinking about this as we’ve been planning and building Typekit. It certainly feels like things are different now – browsers are developing font support in open and interoperable ways; bandwidth has increased to allow for additional page elements. But perhaps most importantly, designers can start using fonts in their designs without having to change the way they work.
Tools for native web designers
We’ve been talking to a lot of designers — from hobbyists to some of the top professionals on the web — and we consistently hear them talk about their workflow. Very few designers these days use a unified suite of tools. Rather, they pull together what works, and spend the majority of their time writing markup by hand.
Any solution that hopes to bring rich typography to the web will need to accommodate multiple ways of working with the technology. When we thought about how Typekit could support all the ways designers and developers work, we started developing a number of features that would be valuable in addition to having access to fonts.
- Automatic CSS declarations. Once the code is in your page, you simply chose a font and decide what selectors to use. Reload and the font shows up. You don’t even need to edit your markup.
- Fonts are loaded and rendered. Standards-based implementations also vary in the actual experience users have with the browsers. For example, how should pages reflow after the fonts are downloaded? What should happen while they’re downloading? Answers to these questions should be up to the site designer.
Nuts and bolts
Sometimes we use automatic services and are happy they just work. Other times, we want to see behind the scenes and have as much control as possible. For some developers, every semi-colon and bit of whitespace is considered and checked. Adding linked fonts to your site shouldn’t affect this.
If, as a web designer or developer, you may want the option to simply hand-code your site, or have your markup and style programatically generated via a CMS. There are two ways you’ll be able to do this:
- CSS linking. If you really want direct access to fonts, then simply link to a hosted CSS file containing the @font-face definitions. You’ll have to forgo all of the additional features, but you’ll be as close to the fonts as you can be. Why not just give links to the font files directly? Because we believe that automatically serving EOT files for Internet Explorer is a core service we can provide. But we’re open to discussing even this. Let us know in the comments.
In either of these cases, you’ll be able to write CSS stacks using font names you get from Typekit.
Making it go
Our goal is to support designers and developers with tools that make it easier and more efficient to practice their craft. How will typography fit in? It may be too early to tell. A few years back, the shift from largely static pages to an Ajax-enabled web coincided with a commitment to building sites with web standards. This resulted in new tools, new skills, and new methods for doing our work. Adding great typography will only take us farther. We hope to be a part of this evolution.