Are Vista Fonts Ready for the Web?

Windows Vista™ ushered in a new set of screen-optimized typefaces, touted as successors to the Core Web fonts we’ve all become accustomed to. Already, we’ve seen early adopters and trendsetters updating their font-familys to prioritize the newer fonts (Calibri, Cambria, and Segoe UI being current favorites).

It’s been over a year (I know, a little too late for this article), and as much as I think they’re a breath of fresh air in a Web of overused typefaces, I’m not convinced of their successor-ness just yet. That’s because, as with any Microsoft-related upgrade, the transition from aging Arial & Co. to the more youthful Vista fonts has its own share of caveats.

Trebuchet MS All Over Again

To illustrate, I created a small comparison chart [1] of Core Web fonts and Vista fonts at different sizes (rendered with ClearType [2] on Windows XP). Immediately, you’ll notice that the Vista fonts generally appear smaller, especially with sans serifs at smaller sizes. This means that, for example, viewers of your website that do not have Calibri installed will fall back to a larger Arial or Verdana. It may seem trivial for some, but if you’re aiming for consistency within your font-family, or are relying on subtle font size differences to enforce hierarchy, Vista fonts may adversely affect your layouts.

A Silver Bullet?

The font-size-adjust property aims to solve this problem by setting the font size based on the x-height (the height of the lowercase ‘x’), instead of the cap height (the height of capital letters). Unfortunately, only Gecko-based browsers (Firefox, Flock) currently support it, and only on Windows.

In The Meantime…

While we’re waiting for widespread adoption of CSS3 across our favorite browsers (therefore making font-size-adjust useful), here are a couple of pointers for using Vista fonts on your Web pages:

  • Set a minimum font size of 14-16px (depending on layout and preference) if you don’t want to sacrifice readability.
  • Know which fonts go well together. For instance, Segoe UI and Arial make a good sans-serif tandem, as they have similar x-heights and produce similar line widths. The same goes for Cambria and Times New Roman for serifs. (Although at bigger font sizes, Georgia becomes the better fallback serif.)
If it’s any Consolation…

The good thing is that even with Consolas, monospace typefaces remain metric-compatible with each other. It should fit right in with Courier New and Lucida Console without any problems.

Also, when viewed on OS X (or Safari for Windows), Constantia looks just as it should, and appears to be a better match for Georgia as opposed to Cambria. Then again, Vista Fonts are practically non-existent on Macs, which actually makes careful fallback font selection more important.

  1. The HTML version of the comparison chart requires that you have all the Vista Fonts installed.
  2. Vista fonts suck without ClearType. Actually, all fonts suck without ClearType.

8 Responses to “Are Vista Fonts Ready for the Web?”

  • Good read. Vista fonts look real nice, Segoe being my favorite. Looking at your chart, I noticed that Segoe appears to be just as big as Helvetica / Arial. Using CSS font-family to default to Segoe, then cascade to Helvetica, and then Arial, and finally Sans Serif will provide visitors with a fresh look as well as consistency where the font is not available.

  • Great info and chart, thanks sharing.

  • It’s the first time I comment here and I must say that you provide genuine, and quality information for other bloggers! Great job.
    p.s. You have an awesome template for your blog. Where have you got it from?

  • Vista fonts… CSS3, are you kidding.

    Most web designers and developers live in a world populated by other web designers and developers who have the latest technology all viewed on a 24inch screen.

    I have clients who still uses internet explorer 6! I have to check everything on an old laptop, which has IE6.

    Lots of organisations are missing out Vista completely and what good is CSS3 if there are so many old machines out there.

    It’s good to know what the future is promising… but clients want more than promises.

    Sorry about my rant and thanks for your post Brownspank.

  • Keith D: the rant is very much appreciated. Every now and then, Web designers and developers, myself included, need to be reminded that regardless of all its flaws, IE6 still exists.

  • The fonts, though lacking, aren’t that bad.
    They look fine with our phoenix self storage project.

  • Pretty clever stuff.Hope to read some more.

  • Nice chart comparison thankyou.

Comments are currently closed.