March 20th, 2007 by Megan
Alright, they look pretty good. I’ll say that much. The problem is that there are couple of little things that make them unusable for practical purposes:
- They are a little bit smaller than other typefaces
- They look like crap in Non-IE browsers
- The anti-aliasing means that they need to be set pretty big to be readible
Correction: It looks like crap when cleartype is not enabled, which it is not by default in Windows XP. My fault for not being aware of this.
(Firefox looks basically the same as Opera; I used pixels just to ensure greater consistency. I don’t normally use absolute font sizes. In this article, all screenshots show Opera first followed by IE 7.)
The same text at the same size in Opera (left) and IE 7 using Verdana at 15px:
See what I mean? First of all, Calibri looks terrible in Opera and Firefox. That’s a deal breaker right there for most of us. You’d have to use conditional comments to serve different CSS to IE.
The second problem is that since Vista fonts are only available for Windows users, and only users who are either using Vista or have the upgrade installed, many users will be seeing the next font specified. In order to make the Vista font readable on non-IE browsers it has to be pretty big. Since you can’t specify different sizes depending on the available typefaces, all specified fonts have to be at that size. That makes the next font specified (in this case, Verdana), much too big.
The problem is not as severe using the serif fonts, in this case Cambria:
And the same text in Georgia:
I’d be interested to know of any possible solutions to this. It could work if there were other common fonts that are closer in size to the Vista fonts. I haven’t had a chance to do exhaustive research on that. Palatino Linotype seems to be a reasonable substitute for Cambria, but I’m not sure how widely installed it is. I haven’t come across anything that works as a substitute for Calibri yet.
If you want a quick way to check how different typefaces look on a web page, the Opera developer’s toolbar includes an option to change the font (under the Display menu). You can even specify custom font families by editing the .ini file for the toolbar. “Edit styles on the page” would work as well
It does make you wonder why this came about. Was it just ignorance on the part of their type designers? Negligence? Some underhanded way to make web pages look bad in other browsers so everyone has to use IE?