CSS & Vista's New Fonts

As we reported and reviewed in our article “A Comprehensive Look at Microsoft’s New Fonts”, Vista has some spectacular new fonts – but we have a few issues with them now that we’ve tried them and implemented them with mixed success here on The NeoSmart Files and on the Forums, and here’s the problem.

They just don’t fit. The new fonts are mostly too small to be plugged right in to an existing CSS file. If you tweak the CSS so that it looks right for, say, Calibri; ten minutes later someone that doesn’t have that font is going to come around and ask your server for that CSS file – but since they don’t have Calibri installed, their browser will use the next one on the list, and unfortunately, your sizes are going to be all wrong.

After a whole day or so of coding, we managed to get the CSS on the blog here up to scratch: it looks OK (maybe even good?) with both the new MS fonts and the old (deprecated!) fonts – but that’s not enough. We managed to get it to look OK for both, but it could have been much better. We needed to use middle ground almost everywhere, because if it looks perfect for one set of fonts, you can bet the farm it’ll look terribly out of proportion for the other. As it is, the actual pixel sizes of the text with the new fonts compared to without them is quite different, but there is nothing that can be done.

The only font that just works no matter where you put it is Consolas. Its characters may not be as wide as traditional mono-spaced fonts (that’s why it looks great!), but nonetheless, the letters themselves are near-enough identical in height to act as a full replacement. Candara also comes close: it’s just as small as the rest, but the style of typography it employs makes it just as readable as an older font of the same size, making it possible to also (for the most part) plug-and-play possible for web-work.

But the rest don’t cut it.

The best solution would be (and forgive us if this already exists, we couldn’t find it) to give a percentage height to each font, so instead of a CSS segment that used to look like

font-family: Calibri, 'Lucida Grande', Verdana, Arial, Sans-Serif;

One could implement a CSS hack that provides per-font size scaling, a quick and not-too-well-thought-out example being:

font-family: 'Calibri'-120%, 'Lucida Grande'-100%, 'Verdana'-96%, 'Arial'-101%, Sans-Serif;

Obviously the ideal solution would be for Microsoft to embrace standards (or at the very least, tradition) and increase their font sizes for small point amounts – but then again, it’s probably the least likely solution as well. Failing that, Internet Explorer 7 could integrate some form of dynamic font-scaling that would most certainly win the hearts of web designers back; but at the moment Internet Explorer 7 is still playing the catch-up game, and is nowhere near the kind of innovation Internet Explorer used to be famous for.

In the previous article and others of its kind, NST readers and members were quick to point out the biggest problem: these licenses are under a restrictive license (unlike the core MSFT files); and have no hope of being redistributed to other operating systems or even to users of other versions of Windows without purchasing Office 2007. Although web-design wasn’t the main focus of the comments, it applies here more than anywhere else. If Microsoft made these fonts free for restricted distribution (as they did with the core MSFT fonts) that would also this and quite a few other problems – for once it’s made available and shipped with Linux distros everywhere, no one needs to worry about the alternate fonts.

Given the solutions, their effectiveness, and most importantly, their probability of happening; its probably a safe guess to say that we won’t get a fix, and if we do, it won’t arrive until CSS 3.0 is released, Microsoft goes GPL, or pigs start to fly.