Following the recent push by Microsoft and Ascender to revive the EOT format for web fonts, debate has raged over the pros and cons of the two main alternatives: embedding and linking. Richard Rutter came up with the idea to license fonts on a monthly payment basis, with the font being served from the supplier’s server (or a trusted alternative).
I think there are a number of potential problems of practicality with that approach, many of which have been raised in the comments. As a contribution to the debate, I would like to offer the following suggestion:
Microsoft are trying to get people interested in the old EOT embedded font format by submitting it to the W3C as an open standard. Font foundry Ascender Corporation are behind them. I think this wouldn’t be an issue now if Microsoft had submitted this as an open standard five years ago, but that it may be too late now that their rivals are going down the route of font linking.
Anyone not reading this in an RSS feed will notice that I’ve installed a new theme. I was never really happy with the previous one, as it was based on a design that had been rejected from another project and was called into action before it was ready.
I’ve given this one a version number of 0.5, as I still have a lot I want to do with it, notably: embedding more microformats in the code; adding more progressive enhancement to the CSS; making more use of WordPress’ tagging system; and testing more thoroughly in IE.
However, I’m pretty pleased with the more typographic direction in this design, and am excited to be using a theme I genuinely care about.
If any readers have any constructive criticism to give, please go ahead and do so in the comments. However, do please be gentle with me!
A really nice example of how a site can look stunning despite being built without the use of images and with only a single font (and Times New Roman at that!): Seed Conference. Just amazing.
Bonus Update: Jeff Croft’s Typography: Beyond the Font [PDF]
Apple have released Safari 3.1 for Windows and OS X (and Linux using Wine) today, and the feature that really stood out for me was the introduction of web fonts. Website makers have been bound to the same core fonts for years now, so suddenly having a huge palette to choose from is going to make an enormous difference!
Using them is pretty easy. First you have to declare the fonts using the @font-face rule — and, importantly, you have to declare each variant (weight, style, etc) individually by linking to the font file involved. You can’t just link to the directory and let the browser work out the variants. To see what I mean, take a look at this example (using Safari 3.1, of course!) and view the source to see the CSS involved.
Aesthetics also provide a strong argument for web fonts. There are many beautiful and interesting fonts that can improve aesthetics and increase visual variety on the web. Just as I am sometimes stunned by beautiful book designs, I want to be overwhelmed by beautiful web pages. And, I don’t want those beautiful pages to be made up of background images.
Håkon Wium Lie has written another call for more attention to be paid to typography on the web. I’m in complete agreement; being limited to only a small handful of ‘safe’ fonts was okay for a while, as it made people think about the best way to present those fonts; it’s fast becoming a limitation, however — when we’re using images and Flash to get around the problem, it’s way past time to address it.
The two main arguments raised in the article against font embedding — rights restrictions and aesthetics — both have the same solution: responsibility. As a website maker, it will be up to you to use fonts that you have the right to use, and to use them in a way that doesn’t look like an explosion at a print factory. Legibility must still be the first rule of web typography.
All signs indicate Opera 9.5 will be the first browser to allow font embedding using the @font-face declaration; if so, it’s another good reason why there’s so much anticipation of its release.
For no particular reason other than idle curiosity, I made a demo of a broken neon sign, using CSS Animations (you’ll need Firefox 5, Safari or Chrome to see it). It doesn’t degrade well at the moment, the root cause of which is down to what I think is a bug in Firefox’s implementation — I’ll need to confirm that.
One quick learning from making this: it would be really useful to have CSS Mixins when using a lot of repetitive keyframes, as I do in this animation. The W3C seem to be quite against them, however.
[#] 3 Comments