Christian Montoya wrote about adding Vista fonts to your stylesheets a few months ago. I only recently added Calibri to my stylesheet after I got Vista myself and could see the improvement for myself.
Here's how Calibri compares with Arial for headings:



Now that a reasonable percentage of people are browsing the web on Vista, I would highly recommend adding this and other Vista fonts to your stylesheets to cater for them.
Why suffer with Arial when you have a more elegant option at your disposal?
Posted on: August 9, 2007 | 16 Comments
16 Comments Posted
1. Posted by John Faulds on August 10, 2007
This is the Verdana problem all over again, just from another angle. You can clearly see that if you use Calibri, the text would appear in a totally different strength and size (as long as strength and size is set identical in css for your examples) if some browser has to use a fallback alternative. This would break the typography completely. :-/
2. Posted by HÃ¥vard Pedersen on August 10, 2007
It's true that Calibri's dimensions are different to Arial. However, I don't see why it would break your typography.
It would provide an optimized experience for Vista users, that's all. As long as you use relative sizes for your typography (paragraphs, line height, etc) there shouldn't be a problem.
If your typography / site layout risks breaking because of this small font-size difference, you have larger problems to worry about (e.g. users changing text size, different browser/OS combinations, and so on).
3. Posted by Christian Watson on August 10, 2007
Do they have this specific font installed on mac's?
4. Posted by Brandon Livengood on August 11, 2007
Are you suggesting to depricate your style sheet going from Calibri to Arial to sans-serif?
If so, I think Havard has a valid point. Given the serious size difference, it might not break the typography of the site so much as it would effect the layout. Someone without Caibri, might see a page that looks like it is using headline size text for body copy. Of course the heirarchy would still be intact but
the scale of the text compared to images might look less than desireable.
With that said, I am excited to have a new font in the quiver! BTW Great blog you have here.
5. Posted by Jamie Campbell on August 12, 2007
Thanks for the informative information, I have not upgraded to vista and was not aware of the new fonts available. I assume that Vista has all the current XP fonts so website text still displays accuratly, in any case this information would be useful for future development.
6. Posted by Pankaj Shah on August 13, 2007
Thanks. I personally have upgraded to vista yet I still didn't know the new fonts were available.
7. Posted by Dave Brown on August 17, 2007
Thats a great thing to take note of, however i also agree with harvard that i can actually mess up the layout and can make the page look different than it should be.
8. Posted by Mayur Sabharwal on August 18, 2007
Jamie — at the end of the day, the answer is to test your typography in both fonts and see if you can find a balance that works.
As a Vista user I can honestly say that Calibri is way nicer than Arial, so it's worth making the effort to find a solution that works for both.
9. Posted by Christian Watson on August 18, 2007
I'd be very interested to know how this affects appearance in different browsers. How does making this change impact upon Mozilla or Opera, and also are there any implications for LCDs or TFT screens? I've not used the Calibri font before, would it need embedding for some other browsers in order to make it available, or working into a CSS list "font-family: Calibri, Arial; e.t.c.? Guess I'd better to get playing and find out.
First time I've heard of recent Microsoft products offering CSS improvements - the changes to Outlook 2007, for instance, involves pulling style from Word rather than industry standards CSS, which has cost a lot of big companies a fair bit of time in re-designing their legacy email templates which no longer work.
10. Posted by Chris Boswell on August 20, 2007
Here's a collection of screenshots showing how different fonts display at different sizes on XP and Linux. Should be useful. Click on an image to see how the fonts display on your own PC.
11. Posted by Christian Watson on August 28, 2007
This is the Verdana problem all over again, just from another angle. You can clearly see that if you use Calibri, the text would appear in a totally different strength and size (as long as strength and size is set identical in css for your examples) if some browser has to use a fallback alternative. This would break the typography completely
12. Posted by ozcan on September 29, 2007
Calibri on Vista is love.
And to the skeptics above, it doesn't break the typography or affect the layout. If you don't believe me, take a look at my site. It looks pleasant enough on windows XP with Arial, but with Vista and Calibri, it really "pops". I don't think there's much of a difference at all.
13. Posted by Rachael on October 15, 2007
Hi ,, this is krishan sehgal and i appreciate the knowledge provided by you but can you please explain a bit to me about the font calibri
14. Posted by Krishan sehgal on November 03, 2007
Krishan — Calibri is one of the default fonts that come with Windows Vista. It has replaced Arial. It's a nice looking font and an big improvement in my opinion.
15. Posted by Christian Watson on November 07, 2007
I agree with a lot of what's been said. I began to use the Vista fonts quite extensively at first, however after running into issues with font size, etc, I've decided to design sites for the standard fonts and then after the site is built out I then see how it looks w/ some of the better looking fonts, not just vista fonts but other standard fonts like tahoma and lucidia variants.
16. Posted by Christopher Olberding on November 28, 2007