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:
Calibri on Windows Vista
Arial on Windows Vista
Arial on Windows XP
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 from Arial when you have a more elegant option at your disposal?
You know, I don’t think I’ve ever used Arial for a design that I’ve done myself although I have been looking at the new Vista fonts lately.
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. :-/
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).
Do they have this specific font installed on mac’s?
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.
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.
Thanks. I personally have upgraded to vista yet I still didn’t know the new fonts were available.
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.
*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.
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.
Here’s a “collection of screenshots”:http://mrmazda.no-ip.com/SS/fonts-msvistaSS.html 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.
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
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.
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
*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.
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.