SixThings

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.

Notes

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.