Calibri is a typeface that’s part of Microsoft’s Cleartype Font Collection. It was developed especially for e-mail, text messaging, and website use and it shows as it’s been gaining popularity among online users for the last couple years. It’s the new default typeface for Office 2007 and is packaged with Vista (and Office 2007).

Recently I’ve been exploring the addition of this typeface into my own work. Is it ready to become the new default type for web pages? Does it have the potential to beat out the ubiquitous Arial?

Probably, but not just yet.

What I’ve found (and what you probably see from the first paragraph of this post) is that Calibri is a bit shorter (smaller) than Arial. Typically I like to my web pages to use an 80% sized Arial font. It just feels right. Calibri is best display at 100% size. Calibri also appears to have a larger leading than Arial, meaning lines of text will be further spaced apart than you might find with Arial.

So what?

Well keep in mind not everyone will have Calibri installed. Not yet anyways. So if you develop a page with Calibri in mind you’re non-Calibri-supporting users will probably default back upon Arial. In those cases their fonts are going to appear on screen a bit larger and a bit closer together than you expected. This could lead to soft alignment breaking.

By “soft alignment” I’m talking about layout (usually text layout) in which alignment of elements (text) with respect to other elements (more text, images, columns, etc..) is not strictly enforced (pixel values over ems, absolute positioning, etc.), but the intended alignment works under the expected conditions of the user majority (people using a modern web browser without any accessibility aids like default font size set to something larger than the stock browser default). In these layouts, soft alignment breaks are designed to break cleanly (meaning the webpage is still usable), but may detract from the aesthetic value of the page.

The key here being that the majority will see the intended “soft alignment”. The criteria for the majority just got more specific, and thus a bit smaller, with the inclusion of Calibri. How much more narrow? Perhaps enough that it’s not longer the majority, but a minority of your user base that will experience the page as originally intended.

There’s a bit of black art here. There’s an evaluation you need to make. Does the change in font break soft alignments or otherwise detract from the aesthetics enough to warrant concern or is the page “good enough” without the intended font? This is a judgement call you, and nobody else, can make.

For now I prefer to stick with Arial. However I think in 2-3 years time Calibri will have enough of a footprint to warrant serious consideration.


3 thoughts on “Calibri

  1. It’s not that bad, but if I wanted my fonts to look like they do with ClearType, I’d enable it myself. As it is, that font always has the blurry ClearType look, and I don’t like it.

  2. I’m glad that it is inadvertently highlighting a gap in CSS handling of fonts: Sometimes, designers need to specify settings as complete, all-or-nothing sets.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s