Web Design Blog
Popular Posts
- Fonts on the web and a list of web safe fonts
- CSS Hack:Getting Safari to behave
- Top 10 search engine optimization techniques
- Test IE5 or IE6 on your PC with IE7 installed
- Top 10 job boards for freelance web designers
- Creating a photo gallery in CSS without tables
- CSS Trick: Target only IE with an if statement
- Open source Dreamweaver alternatives
- 8 job boards, for freelance web designers, that don't suck
- CSS fix for the double margin float bug in IE6
Categories
Fonts on the web and a list of web safe fonts
Posted on Wednesday, July 18th, 2007 under design resources, web design news, web standards by Dustin Brewer.Many of you have been asking, “What fonts are safe for me to use on the web?” and “Is there a list of web safe fonts for reference?” Well I am here to help. Web safe fonts are ever important but a lot of web designers I have seen lately are forgoing this important step in their design creation. Some are taking the steps to use a font similar to a web safe font but because it is not in fact web safe they inevitably have to default back to a font that isn’t quite the same. Their web design loses a little of itself and at this point they typically struggle to find a font that is close and web safe. There are plenty of web safe fonts available it just takes some creativity in using them to your advantage. I have a list of web safe fonts available in the article to help everyone out.
Some of you that may have heard of the term web safe before and not quite known it’s meaning, others don’t fully know the reasoning behind it. I am here to clear all of these things up. First off, web safe fonts are those that are nearly universally available on any computer. So that when the end user, regardless of their machine preferences, goes to the web site they get the same experience as anyone else going to the web site. This is what web standards are all about and ensuring that you are using web safe fonts throughout your website is just as important as including a DOCTYPE and HTML tag in the beginning.
A little background on fonts
So now that I have explained what web safe fonts are you need to know a little about fonts themselves to make sure we are all on the same page. There are basically two types of fonts there are serif and sans serif fonts. Serif fonts are fonts that have fine cross lines at the ends of the letters. Sans serif (French for without serifs) are fonts that don’t have anything at the end of the letters. The most common serif font is Times New Roman and just happens to be the default for most windows-based browsers.
Monospaced fonts are fonts that have the same amount of space between them for all of the letters.
There are others types of fonts that fall into one of these two major categories but I think I will save that article for another time and focus on the topic at hand. Be looking for an article on Typography to be coming up soon.
A list of web safe fonts and more
Below I have included a table listing out all of the most common fonts and what operating systems they usually come with. Granted most machines have a lot more fonts then this, the ones I have listed are the most popular and mostly considered universally acceptable to use as a web safe font.
Web safe and common fonts
| Generic | Font | Windows 9x/2K/XP |
Windows Vista |
Mac Classic |
Mac OS X |
Linux Unix |
|---|---|---|---|---|---|---|
| serif | Cambria | 
|
||||
| Constantia |
|
|||||
| Times New Roman |
|
|
|
|
|
|
| Times |
|
|
|
|||
| Georgia |
|
|
|
|
|
|
| sans-serif | Andale Mono |
|
|
|
|
|
| Arial |
|
|
|
|
|
|
| Arial Black |
|
|
|
|
|
|
| Calibri |
|
|||||
| Candara |
|
|||||
| Century Gothic |
|
|
|
|
|
|
| Corbel |
|
|||||
| Helvetica |
|
|
|
|||
| Impact |
|
|
|
|
|
|
| Trebuchet MS |
|
|
|
|
|
|
| Verdana |
|
|
|
|
|
|
| cursive | Comic Sans MS |
|
|
|
|
|
| monospace | Consolas |
|
||||
| Courier New |
|
|
|
|
|
|
| Courier |
|
|
|
*The green marks show very common fonts, the yellow shows not so common but all are generally accepted as web safe.
Looking at fonts through web development
Now that you have a list to go off it is good to know some best practices of using fonts on the web. It is very important to include fall back fonts when you are creating your font selection on your web site. What I mean by this is choose your favorite font that you would prefer everyone to see as your pimary font and then include fall back fonts such as Century Gothic, Verdana, Arial, sans-serif would be a good way to list the fonts out in your CSS.
The reason you want to do this is to ensure the most amount of similarity between your readers so they all get the same look and feel of your web site. It also ensures that the fonts you use are close enough that they don’t break your web site because you used a font that on the screen is half the size of Verdana but because no one has that font everyone fell back to Verdana and the whole web site broke because of it. These are very simple rules to follow in order to ensure that you give a universal experience on your web site by using web standards and web safe fonts.
Whats Next?
88 Responses to “Fonts on the web and a list of web safe fonts”
Leave a Reply
About Dustin Brewer
Dustin Brewer is a freelance web designer based out of Oklahoma City, OK passionate about web standards, and beautiful web design. Dustin Brewer has been in the web design industry for over 8 years through freelance and professional experience. If you are interested in hiring Dustin Brewer please visit the web design services page to find out more information. You can also checkout the web design portfolio.
nice diagram/table! Surely Andale Mono is monospace though?
I didnt know Windows fonts were so varied these days (Consolas etc)
Good article, handy to see all the fonts displayed in this way.
Great article on fonts! I like the fonts list best.
Great article on fonts, I would like to have seen a little more functionaluse of CSS in the article for those curious about structure but overall agreat article.
I hope to see the typography article come out soon as afollow up.
I would also list the free “DejaVu” font family, it is included with Linux now and provides great alternatives to many of the web fonts listed here.
I particularly like DejaVu Sans and DejaVu Monospace. I set these as my defaults in my web browser for when people use “sans” and “fixed” respectively.
I think its about time all browsers were pushed to have the following:
a. The same font support as eachother.
b. More fonts, not too many, and no tacky ones, just some nice usable fonts that are easy to read but offer something different to the usual few.
The rest of the web is moving forward, why are we still stuck with Comic Sans and his dull buddies. I want to be hanging out with the likes of “Calibri” and “Consolas” while im surfing the web!
@liam There are always options like sifr that will allow you to use any font you have on your computer. It uses flash to render the font for visitors, because of that of course you would only want to use it minimally.
http://www.mikeindustries.com/sifr
Finally, a concise list of websafe fonts in one place.
Well done!
The cursive section should probably be renamed to “do not ever use” or removed all together. I know that everyone rips on Comic Sans, but seriously let not give unknowing web designers reason to justify it as a font selection by says it is platform independent.
@dustin – Thanks this certainly is cool, and great for now! But its a needless hastle, certainly for present day this is a great solution, but I still think the ammount of fonts which work cross browser is pathetic. – Nice resource though.
[...] Fonts on the web and a list of web safe fonts | web design news and style (tags: fonts webdesign typography browser) [...]
[...] Fonts on the web and a list of web safe fonts – web design news [...]
[...] Fonts on the Web and a List of Web Safe Fonts – Dustin Brewer [...]
[...] Fonts on the Web and a List of Web Safe Fonts – Dustin Brewer [...]
Andale Mono isn’t in XP by default, don’t know about vista. You have to download it
It’s a shame, there is no browsersafe sans serif monospaced font.
font-family: “Andale Mono”, “Lucida Console”, “Terminal”, monospace
will have to do then.
[...] Dustin Brewer April 18, 2008 | En Programación [...]
There is such a disconnect between MAC and Windows operating systems. I can’t read my engineer’s drawings on my MAC because I don’t have Century Gothic font. How do you design for all?
@Catherine It can be difficult sometimes when you are working with multiple operating systems. At the Ad Agency I work for we have Windows, OSX and Linux users all in the same department so things can get interesting when checking to make sure something looks good on various different mediums.
The best thing to do is educate others on the differences so that you can use web-safe fonts and Cross-operating system safe fonts. We typically make sure that everything is compatible with a basic Windows system and then worry about the others secondary because Windows has such a large percentage of the market share, regardless what percentage we have in our department.
accbf7c6b1bc…
accbf7c6b1bc96c1ce77…
[...] Fonts on the Web and a List of Web Safe Fonts – Dustin Brewer [...]
[...] Fonts on the Web and a List of Web Safe Fonts – Dustin Brewer [...]
[...] like me, and want to try, this is a great place to start. Or if you like more tabular things, this one will show the fonts availability [...]
Neat table. Very useful reference. However, may I suggest/request that you move the symbol key to the top of the table? It took me a little while to figure out that the green/yellow symbol key was in a note below the table.
[...] Web safe fonts : Web safe fonts list [...]
[...] Fonts on the Web and a List of Web Safe Fonts – Dustin Brewer [...]
[...] Due credit goes to http://dustinbrewer.com/fonts-on-the-web-and-a-list-of-web-safe-fonts/ [...]
[...] Brewer has done some great researching work when he wrote this post. Fortunately for us, we now have a complete list (or almost!) of the fonts [...]
Andale??? I have never seen this on a Windows system.
[...] possible to create something nice with the tools we have been given. The tools we will use are the websafe fonts and the markup language [...]
[...] Fonts on the Web and a List of Web Safe Fonts – Dustin Brewer [...]
Thanks for this post and the table. I was considering what font to use; whether to choose Century Gothic or Trebuchet MS. My main concern is whether these two fonts are commonly found in most users’ system. With your table, I can safely use either one.
[...] can’t simply add the fonts you like because they aren’t web-safe. Here is a list of Web-safe fonts you can use on your website. Make sure you choose one of [...]
Thanks for the great table!
[...] chart on this page was not created by me but was pulled from: http://dustinbrewer.com/fonts-on-the-web-and-a-list-of-web-safe-fonts/ Share and [...]
[...] @resource After much googleing (-e?) I found this handy web font blog post by Dustin Brewer which gives me more or less that list; coupled with these additional dated yet useful notes from [...]
[...] Fonts on the web and a list of web safe fonts [...]
[...] a final note there are quite a few websafe fonts out there. Tags: css, CSS3, embedded fonts, EOT, fonts, [...]
[...] für meine Homepage hat mich eine Zeit lang beschäftigt. Text in Grafik kam nicht in Frage, web-safe Fonts sind eine Qual und am Schluss bleibt nur die Erkenntnis, dass es noch ein weiter Weg ist, bis jeder [...]
Awesome. Very good composition, very helpful. Thanks!
I don’t know but Andale Mono doesn’t seem to be so safe as I myself currently don’t find it in my system (windows xp).
Century Gothic might be one as I have it now but it’s missing from any of the web safe fonts I can find online. Anything wrong?
[...] Web Magazine CSS Typography – Digital Web Magazine 15 Tips to Choose a Good Type Text – Typies Fonts on the Web and a List of Web Safe Fonts – Dustin Brewer Serif vs. San Serif – KuraFire Network Web Typography Cheat Sheet – Modern Life [...]
Hello, how does this wonderful designer http://www.vlourenco.com/ manage to use those fonts? Are they raster images or real fonts?
Thanks!
[...] little bits of metal around. You want to use a super-cool ultra-awesome totally-not-one-of-the-11-web-safe-fonts? Pick an open source font and get on with your [...]
I was looking for this info from long time…
thanks…
Seems that Lucida is missing from the list, and it is used frequently. Lucida Sans (mac) / Lucida Unicode (pc).
Thanks, good catch. It is funny that it is missing because I use it so often on websites. I’ll add it to the table.
[...] Fonts on the web and a list of web safe fonts | Dustin Brewer Web Design (tags: typography fonts webdesign list) [...]
great list of fonts
[...] Fonts on the web and a list of web safe fonts | Dustin Brewer Web Design — 6:13pm via [...]
[...] and not so behind the scenes and hopefully it’s only a matter of time before the idea of those few web fonts are a thing of the past. Sitepoint suggests that you should do something positive to help this [...]
[...] Fonts on the web and a list of web safe fonts – Dustin Brewer [...]