In further ClearType font news (see also), there is another issue: most of the new fonts are undersized in comparison with other fonts. So if, say, Calibri (the worst offender, again) is specified as the default font-family on a website, and a user doesn’t have it installed, the text will most likely be set to default to Arial, which is about 20% larger on average.
This can be problematic for web designers since type set to the desired size in Calibri might be uncomfortably big when set in Arial. Fortunately there is a solution. As detailed by Ralf Herrmann on Typophile, it can be accomplished in three steps:
- Detect the user’s installed fonts (using ActionScript, like this example by Marko Dugonjić, or the seemingly less reliable but non-Flash JavaScript/CSS Font Detector by Lalit Patel)
- Pass the list of fonts to JavaScript
- Add some alternate styles or classes via DOM scripting to adjust font sizes
He has a nice working demo page for it as well. So, when Firefox 3 comes out and fixes its ClearType rendering issues, we can apply this method and then all will be well, I hope.