Add Windows Vista fonts to your stylesheets
Dear Designers and Developers of the Interweb,
I have a request. As a user of Windows Vista, I would like to ask all of you web designers and developers out there to please add Windows Vista fonts to your stylesheets. My reason for asking this is, well, because I didn't upgrade to Windows Vista to stare at the same ugly set of Windows fonts I've had to endure for years. I hate Arial, Verdana, Trebuchet, Courier New, and Times New Roman, and Georgia isn't too hot either. Bill Gates must share my opinion, because he made sure that Windows Vista came with a replacement for each one of those classics, and as far as I'm concerned the new Windows Vista fonts are far better designed than their predecessors.
So I'm hoping that by sharing this PDF document with you, in which I compare the new Vista fonts to typical fonts I have used in the past for Windows users, you might consider updating your current stylesheets with these new fonts, or at least using these fonts in stylesheets you create in the future.
Windows Vista Fonts Compared to Typical Web Fonts [PDF]
You are free to share this PDF with your designer and developer friends; in fact, I would appreciate it. If you would like some nice examples of the new Windows Vista fonts, you could also read this article at Poynter Online:
The Next Big Thing in Online Type
Finally, I have included some examples of font-family declarations which I would typically use in my stylesheets, which you might find useful.
Thanks in advance for improving my typographical experience.
Sincerely, Christian Montoya Web User
Enclosed: font-family examples
Helvetica, Calibri, Arial, sans-serif
Corbel, Verdana, "Bitstream Vera Sans", sans-serif
Candara, "Trebuchet MS", Trebuchet, sans-serif
Cambria, "Times New Roman", Times, serif
Constantia, "Palatino Linotype", Palatino, Georgia, serif
Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospaceP.S.: Matt Thomas explains how you can download Windows Vista fonts for free, legally. Join in on the fun, Mac/Linux users!
20 Trackbacks/Pingbacks
- Pingback: Design Updates // Karl Bitz on March 6, 2007
- Pingback: Prof Kienstra’s Vision » Add Windows Vista fonts to your stylesheets | The Montoya Herald on March 17, 2007
- Pingback: Best of March 2007 | Smashing Magazine on April 11, 2007
- Pingback: Idiotprogrammer » Archive » Vista Fonts..How to Download, How to use on April 16, 2007
- Pingback: Webdesign (css, grafica e altro) » Blog Archive » Best of March 2007 on April 18, 2007
- Pingback: Fuentes gratis, cortesÃa de Microsoft — yukei.net on May 1, 2007
- Pingback: Fuentes gratis, cortesÃa de Microsoft « Cosas sencillas on May 11, 2007
- Pingback: links for 2007-07-13 | giancarlo.dimassa.net on July 12, 2007
- Pingback: Spricht Dein Stylesheet Vista? » Die ContentSchmiede on August 12, 2007
- Pingback: am Design » Baabelin kirjasto » Artikkelikatsaus: Elokuu 2007 on September 13, 2007
- Pingback: Exit Does Not Exist » Add Vista Fonts To Your Stylesheet on September 26, 2007
- Pingback: Zivo NiX BLog » Downloading and Using Vista Web Fonts on October 23, 2007
- Pingback: links for 2008-10-03 | Arc Iris on October 3, 2008
- Pingback: Linux Users Need Font Families Too! | Capsize Designs on November 26, 2008
- Pingback: Striking Web Sites with Font Stacks that Inspire - Inspiration Bit on January 26, 2009
- Pingback: » 30 More Essential PDF Documents Every Designer Should Download :: Positive Space Blog on June 10, 2009
- Pingback: ??30????????????pdf? | ??? on June 10, 2009
- Pingback: Heeftstijl.nl - Nederlands webdesign magazine » Systeemfonts: roeien met de riemen… on June 17, 2009
- Pingback: BENDET on June 23, 2009
- Pingback: 30 More Essential Pdf Documents Every Designer Should Download on January 6, 2010
33 Comments
Sorry, comments for this entry are closed at this time.
The Poynter article is crapola, and I’ve had Vista fonts in my CSS for a year and a half.
I'm so glad you posted this, C. As an aspiring typographer and a web designer who knows better than most the pain that is caused when type designed for print tried to make the leap to digital media, I certainly hope many people take your advice and begin to use these fonts in their work. I'm very impressed by not only their more open, readable nature, but their beauty–which we haven't seen in online type before.
Joe: You are always ahead of the game, of course.
Jacquelynn: I hope so too!
Already done! Calibri's a beautiful font, and I'm happy to be using it for my blog. As a related note, it's worth adding Lucida Grande to your stylesheets for Mac users.
Damn bud, after learning you sprung for the Vista madness, you just went down a few rungs on my ladder!
Aaron: Actually, I wish someone would do a similar post for common Mac fonts, since I don't really know what comes standard with OSX.
abc123: If you judge me on the basis of what OS I use, I don't want to be on your ladder!
So your suggesting that we (as web designers) include these Vista fonts as well as the normal present ones?? I guess as a web designer its not that big deal.
I will do as you suggest for my new websites (which is not too much hassle) but I think less people will do it for existing websites as that can be tedious.
Thanks for letting us know about this and please continue to let us know about more Vista upgrade options like this.
I agree! great article… I have been a fan of the Vista fonts for some time. We use them on a couple of our sites. Bookmarked and Dugg! Thank you!
Er, may I recommend using a user stylesheet. They allow just this sort of customization. It seems far more sensible than expecting every website (or even just the major ones) to add the Vista fonts to their lists.
Nikolas, I don't think you get it. This is not about me. This is about web designers everywhere making their sites more attractive for everyone.
I love Calibri!
Please all you non-Vista users, download it. Down with Arial!
I am not going to cater to Vista users cause they cry foul. I will not cater to anyone's demands on my sites, for anyone. I will continue to use the same fonts I have been using or will use and if you're not happy with that, then I guess we have nothing further to discuss.
it sickens me when people complain about the little things in life like this, so trivial. Use a real OS, like Linux, not crap that Microsoft continuously pumps out decade after decade and maybe your font problem wouldn't exist.
The way I make my sites is the way I make them, don't like the font, then I don't need the hits, from anyone.
Todd: Your attitude towards web design is the only thing sickening here. Web design is about putting users first; everything else comes after. You might not like the fact that a portion of your users are running on Windows Vista, but the least you could do is consider the fonts that are on their machines; just like you do with Mac and Linux users.
This Mac/Windows comparsion might be of interest to you if you want to know the mac equivalents of windows fonts.
donald: I saw that the other day but it's an old page… are there any new fonts that come standard with Mac OSX?
and Todd didnt even include his website when posting, bummer. I wanted a look
He does have a point though, it is a big jump not to include these 'web fonts' on an operating system…
I don't get the point, actually. I specify fonts that are specific to Mac and Linux all the time… I don't know why there is a double standard when it comes to Windows.
christian: osx comes standard with a set of 100 fonts. The full list is available from apple. (PDF see pg. 29) Though, it would be pretty safe to assume most mac users also have office installed which gives users some of the missing windows fonts. Since osx has anti-aliasing built right in I don't think there has been a need for improved fonts so, no there aren't any new fonts. That and Helvetica does it job pretty damn well, which is an opinion I guess you share, as you listed it in your font families before Calibri.
donald: Thanks so much for that list, it's exactly what I was looking for. And yes, I can't argue with Helvetica… it's still, arguably, the best font ever made.
Timely article Christian, I noted that Andy Clarke included Vista fonts in his font selectors in his Transcending CSS book. I was going to write about that observation separately to my book review. You've saved me a job (especially with that PDF) and I can go out for a beer instead now!
Cheers, Karl
Jacquelynn said:
"a web designer who knows better than most the pain that is caused when type designed for print tried to make the leap to digital media"
Verdana was developed by M$ specifically for digital.
donald said:
"Though, it would be pretty safe to assume most mac users also have office installed which gives users some of the missing windows fonts"
Errr no, I very much doubt it
Sorry can't stand sweeping statements.
What gets me is you are asking everyone to put these fonts on their system but if I viewed the site on a Mac they (potentially) could look completely different, therefore making the site you created appear different to different users. i.e no consistancy.
Ergo I shall not be listening to you
Dancer, read the article, okay? I am not asking people to put these fonts on their computers. I am asking people to use these fonts in their CSS STYLESHEETS.
"Sorry can’t stand sweeping statements."
Sorry, I can't stand incorrect ones.
To elaborate…
"What gets me is you are asking everyone to put these fonts on their system but if I viewed the site on a Mac they (potentially) could look completely different, therefore making the site you created appear different to different users. i.e no consistancy."
Do you honestly think that all users have Arial, Verdana, Trebuchet, Times, and Georgia? Do you really think that? There is no font, no not one, that is installed on every machine of every user that visits any website on the entire world wide web. There is no such thing as font consistency on the web. There will never be such a thing until it becomes possible to embed fonts in HTML.
Until then, the only possible approach to good typography on the web is to use families of similar, comparable fonts. That's what
font-familyexists for. It's intention is to be used for the best fonts available to a variety of users on a variety of systems, in the knowledge that no one font will apply to everyone.Thanks for this.
You can't go wrong with 'Lucida Grande' for OS X (it is very very similar to 'Lucida Sans Unicode' in terms of size, kerning, tracking etc). Very readable and stable. Ages ago, I made this page, which is stable up to date (it uses core OS X fonts at are present on all versions of the system). It comes with a pdf for those people who haven't switched yet.
Thanks Philippe, that's a great resource.
I want to add the vista fonts, I really do, but they always seem smaller than their corresponding "normal" fonts for the same font-size. This means that either Vista users or non-Vista users will be stuck with an uncomfortable size. The only one that seemed okay so far was Consolas.
Gzero, I know what you mean but the truth is that even when they seem smaller, their improved readability makes up for it. Verdana is readable mostly because it's just tall and fat, but these new fonts are compact and yet they have very good letter-forms that make it easy for one to tell what each letter is supposed to be.
So unless you are really concerned about having a specific visual "size" of the text, you shouldn't worry about the size being uncomfortable… 16px Calibri is more readable than 16px Arial, even if Arial looks bigger.
er, have Arial, Verdana, Courier New, and Times New Roman et al. been removed from Vista? If not then my stylesheets still work for Vista users, so why should I bother adding a font rule for a minority of users who may happen a certain font installed?
Remember websites that say "best viewed with font X"? You're heading down that same road.
hostyle: You are clearly another person who doesn't understand the point of "font-family." There does not exist a single font, no, not a single one, that every single user has installed. The point of webpages isn't even to look identical for everyone. It's too look the best possible for every single user. That means targeting the best fonts across different machines; Helvetica on Macs, Calibri on Vista, and Arial on Linux & older versions of Windows. If it was ever about giving all users the same experience, and not catering to minorities, you would specify one font for everyone and that's all. And if you are doing that, then you really don't understand the web.
As a web designer, I choose the typefaces I use on a per-project basis, picking the one that suits the job best. The new Vista fonts are great, and I have been using them a lot - but they are not appropriate for every project. And, if the project I'm working on is more suited for Verdana or Arial, I'm not going to pick a shiny new Vista font just because it's shiny and new.
Sorry.
Jeff, I totally understand your point. I don't use Vista fonts for all projects either, since sometimes it's the old fonts that suit the project better. That's to be expected; I just wrote this article to help designers without Windows Vista add the Vista fonts to their toolbox.
now we are fussing and now we are fightin. Frederik Kyleigh.