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.
John's Blog 
I read this post in Firefox 3.5, of course (because it’s my default browser, and thus where the link opened when I clicked on your Tweet), and the first thing I noticed was the font change about 3 seconds in. If you’d asked me about the WebKit vs. Gecko way of handling font loading without showing it to me, I would have said I’d want my content first. In practice, I think I prefer the WebKit way… though I might be biased now because I knew what to expect when I opened your post in Safari. Hard to know if I would have been more puzzled by the mostly-blank screen for 2 or 3 seconds if I hadn’t known that it was waiting for fonts to load. The reason I think I prefer the WebKit way, fwiw, is that when the font changed in Firefox, I’d already started reading — and the change made me lose my place. How much of an annoyance this would be if it happened on a regular basis depends on how fast the fonts load, I suppose.
LoriHC has a good point – although in a lot of cases content shifts while images are loaded as well.
To prevent content shifts you can define how large the image is in the DOM so it reserves its space while the actual image file is loaded and rendered.
Hypothetically, could mess with CSS to define all your type-setting dimensions to get something like arial pretty close to the defaults imposed by an explicit font and at least minimize the content shift.
Might be worth trying to get pretty close to the same experience between webkit and gecko browsers.
I wonder what the uncached experience would be if you implemented some of the tricks from the Yahoo! Exceptional Performance team (e.g. cookie-less domains http://developer.yahoo.com/performance/rules.html#cookie_free).
Basically anything to get the font into the users browser faster.
I totally understand LoriHC’s point of view of the “jarring” experience when the font changes – but at the same time I don’t want to wait.
Caching however did help quite a bit (the content loaded fast and pretty) – my guess for the future is font-repositories served via CDN that allow for cross-site font-sharing will help alleviate the slowness… why self-host any font when someone else has it, and it’s bound to be in someone’s browser cache – or we may start caching fonts differently.
I do feel that the load-content-first approach is the safest – especially for the broader audience that Firefox serves. Not everyone is on fast internet connections. When cached though, when things occur will be a moot point.
-d
“type-setting” here refers to the text and font properties. Stuff like line-height, letter-spacing and word-spacing among others could be used. But not sure it’s worth it to load those then toss them.
http://www.w3.org/TR/CSS2/text.html
http://www.w3.org/TR/CSS2/fonts.html
Should also note that Safari cheats for apple.com since their font is distributed w/ the browser. So at least on their domains there’s no delay or content shift for that reason. ๐
John, the “ff” bug is filed, right?
@boris i believe so, yes. it was daggett et al that noticed, naturally. ๐
I like the fact that you’re experimenting with @font0face โ โ but the bad part is that Axel is not easily legible (on a screen) somewhere south of 14px, so these comments here are particularly hard. And that’s with a font by Spiekermann, that has been carefully designed for the screen.
People are forgetting that most of the fonts we admire weren’t made for screen. I’m suspecting we’re going to see a lot of non screen optimized serif fonts (e.g. print classic Bembo) which doesn’t really help anyone, apart from being pretty.
@Wolf: yes, for sure — I just haven’t had time to really spend with things — you’ll note that I’ve got bad decisions all over the place — gray on white type for comments, too small, etc. Just haven’t had a spare few hours to tweak. I think it takes a bit of time.
I’m always surprised to see who has a passion for fonts. Mine started and stopped at adding the Venda characters แธแนฑแธฝแนแน to DejaVu – lets see if Axel can handle those characters.
I’ve been really excited about @font-face because it will really help solve a serious problem for African languages. the problem is that most fonts that are distributed with computers don’t support all of the characters needed by African languages. With @font-face it now becomes possible for a web designer to supply a font that does have all the needed characters. Think Wikipedia and other massive crowd-source like applications.
Over at the ANLoc (African Network for Localisation) project the fonts sub-project http://www.africanlocalisation.net/en/fonts has made a list of all the Latin glyphs needed for African orthographies and have been adding them to some FOSS fonts. The list allows other type designers to ensure their fonts are African ready. The 10 fonts ensure we actually have good fonts for Africa.
Combine those fonts with @font-face and we have a problem solved.
“…among other things, we had a couple of classes about typesetters who were burned at the stake for typesetting heretical documents.”
Nice to hear, after all these years, that somebody
remembers those classes. ๐
Just in case the names and dates have faded from
memory, here’s a brief refresher.
Antoine Augereau, Parisian printer and type designer, reputedly the teacher of Garamond. hanged and burned
on Christmas Eve, 1534, on (supposedly trumped up)
charges of printing heretical placards.
Etienne Dolet, printer of Lyon and Paris, burned at the
stake on August 3, 1546, in Paris, on charges of
blasphemy, sedition, and selling prohibited books.
Martin l’Homme, hanged in 1560 for printing a pamphlet
against a Cardinal.
That all happened a long time ago, but in the 20th
century, Sophie Scholl, among others in the White Rose
society, was guillotined on charges of treason, on
February 22, 1943, for distributing pamphlets against
Nazi genocide on the Eastern Front.
I’m sure that somewhere there is good news about
printers, too. ๐
I think they should just make it all-compatible. It sucks every browser has it’s own interpretation of the code. Same for my site http://www.pchulpzutphen.nl I made it for Mozilla, IE sees it different somehow.
Have a nice day!