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.

9 thoughts on “CSS & Vista's New Fonts

  1. True…absolutely quite a big problem for web designers. Well, the limited license thing is not the real problem, even the old MS fonts, which can be shared to some extent, are not pre-installed on Linux distributions.
    But the scaling problem is a major one – not only with the Microsoft fonts. I hope some feature like dynamic font scaling will be added to at least Firefox soon – you can’t expect that in IE7.

  2. Hi Paul,

    The old licenses aren’t open source, just freeware. 99% of Linux distros refuse to ship with anything that isn’t GPL, because it ‘taints’ the kernel and the distro. But no one could stop you from shipping it if you felt like it – so long as you added MS’ license to the EULA (which is like adding a sour milk to the jug – not good).

  3. The ‘easy’ solution to this problem would be to use the CSS “font-size-adjust” selector. However I think it’s CSS3 which might explain its low support atm. Firefox will catch up, but unless IE7 final includes supprt for it, then it’ll be a another couple of years before this solves the ‘too small fonts’ dilemma.

    If you know a way to give percentage sizing to each font, let me know! I’d be keen to hear that.

  4. body {
          font-size-adjust: 0.54;
    }

    I don’t think that would work, it only standardizes the ratio of a small letter to capital letter, but if they’re both small, you’re still in deep trouble. Actually, the Vista fonts are very legible at small font sizes, and the typography team has done a marvellous job on the proportions.. it’s just the entire font as a whole needs to be jacked up a couple of pixel sizes…

    Is there a CSS “ideas” box or something?

  5. This works well on Windows 7 and Ubuntu running Firefox:

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

  6. What’s the definition of the % parameter in the CSS hack that provides per-font size scaling? What does ‘Calibri’-120% mean?

  7. @cal
    the % parameter in the css is the percentage of the defined font size in the css.
    thus if you had:

    .myclass{
    font-size:24px;
    font-family:”Calibri”-120%;
    }

    the text that is displayed in the Calibri font is 120% of the 24px size.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>