If you come to the web-based version of my blog instead of reading it in a feed reader, and you use a modern browser — Firefox and Safari, at least, and maybe some versions of Chrome — you may have noticed I’ve been experimenting with using different fonts.
I’ve been doing this for a couple of reasons, neither of which is particularly related to the readability and aesthetics of the blog.
The first reason, and more important of the two, is that I wanted to experiment with the new @font-face support in Firefox 3.5. I have a strongly held point of view that you don’t really learn about something until you do it — and since I have a bit of an affinity to fonts, I thought I should try @font-face out on my own blog. I discovered a few different things in this process.
First, there are not a lot of really good fonts online that are licensed for use on web sites — either free & open fonts or purchased fonts. I think both categories (free and non-free) will see more & higher quality fonts available soon, since fonts are available now to so many more users than before. (@font-face was not new with Firefox, but obviously Firefox brings a lot of users along.)
Second, you learn a lot about your web server & how quick it can send data, since in addition to your web content now it’s gotta send font files that are 50-100 KB or more. My server, for the record, totally sucked. Now it’s better, but not as quick as I’d really like.
Third, the differences in implementations really become apparent. Safari opts to wait until a font file is loaded before showing any text rendered in that font; Firefox renders the text in already-resident fonts and then sort of “pops” the text into the new font when it downloads. That shows pretty clearly a difference in aesthetic between WebKit and Gecko (and probably the organizations behind them): WebKit (and Apple) prefers a solution to minimize visual divergence — so you never see text in the wrong font. Gecko (and Mozilla) prefers a solution to get people reading content as quickly as they can, even if it means a momentary rendering in sub-optimal font — because a lot of times people want to get to their content as quickly as possible. Anyhow, different decisions that will impact designers and consumers differently.
Finally, it helps us figure out where the bugs are. One of the initial fonts I used didn’t have some ligatures implemented — “ff” in particular — and Firefox handled that by just not showing anything. 🙂
[As an aside, I’ve been tracking TypeKit since before they launched, and am quite optimistic about their prospects. I’ll try them out as soon as they open up the beta.]
The second reason I wanted to experiment is that I’m a bit of a font nerd. Have been since my mom got her first Mac in 1985. I really like type and lettering and the way that it affects how people feel and think. One of my favorite classes at Stanford was called “Concepts of Text” and taught by a type designer named Charles Bigelow — among other things, we had a couple of classes about typesetters who were burned at the stake for typesetting heretical documents. Good times.
Anyhow, I like type, and am really excited by the prospect of more sophisticated typography coming to the web. And as much as I like Helvetica — and I do! and you should, too, not to mention you should go see the movie — I feel like on the web today there’s a bit of a Tyranny of Helvetica — it’s somehow viewed as the most appropriate type for, you know, everything.
So I’m experimenting, and will probably do it more. Right now, I’m over-using (not to mention sort of mis-using) 2 fonts on this blog. I’m using Graublau Sans for the headlines — it’s an free/open license font designed for larger display settings. And I’m using Spiekermann’s newer font Axel for the body type — it was really designed for very small type — especially in cells in Excel spreadsheets, for example — but I liked that it has many similarities with his Meta typeface, which happens to be the one we use for the “Mozilla” and “Firefox” and “Thunderbird” wordmarks — but also had a relatively inexpensive (under $100 US) @font-face compatible license available for purchase from FontShop.
If I have some time this week I’m going to try to make some of the more egregious readability problems I’ve caused…um, I guess I’ll strive to make them less egregious. But we’ll see.
I do know that it’s fun to experiment with type again.