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
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.
[...] używanie web save [...]
[...] trovato su internet questo breve ma esauriente elenco dei font più compatibili, suddivisi anche per sistemi operativi (linux e le sue varie [...]
[...] List of Web Safe fonts and Platforms – Dustin Brewer [...]
[...] Fonts on the Web and a List of Web Safe Fonts [...]
I reckon Century Gothic should be green – it’s only installed on Windows XP computers which have Microsoft Office installed. Palatino (Linotype) is bizarrely not listed.
I do hate to be so awfully pompous and know-it-all-ish. Sorry about that.
[...] Fonts on the web and a list of web safe fonts – Dustin Brewer [...]
Hey this is a very interesting article!
[...] Fonts on the web and a list of web safe fonts | Dustin Brewer Web Design [...]
According to this page ( http://www.kayskreations.net/fonts/fonttb.html ), Century Gothic was only shipped with Windows 98. It is not included with Windows XP or Windows Vista as far as I can tell. Too bad, it was a nice substitute for geometric fonts that designers occasionally like to throw my way (e.g. Avant Garde).
[...] 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 Web Design (via delicious) (dustinbrewer.com) Possibly related posts: (automatically generated)101 tipografias para lo que sea!Church Newsletter 202: FontChurch Newsletter 202: Attract Your ReadersDrowning in clutter Tagged with: Adobe Photoshop, Arial, font, Graphics, Sans-serif, Typeface, Typography, Verdana leave a comment « Banksy’s New Show [...]
[...] designers have been limited to the fonts available on client operating systems—the standard web safe fonts that we are all familiar with. In the past few years, thanks largely to the efforts of Håkon Wium [...]
[...] Als Internetseitendesigner ist man auf eine recht überschaubare Anzahl web sicherer Fonts beschränkt. Aber warum ist das so. Der Grund dafür liegt in der Art und Weise wie Internetseiten zum eigentlichen Betrachter gelangen. Einfach dargestellt besteht eine Internetseite aus einer Menge Informationen die von einem Server zu einem Betrachter übermittelt wird und dort, auf dem Rechner des Betrachters, vom jeweils benutzten Browser interpretiert wird. Diese Interpretation ist das was man als Nutzer auf seinem Monitor angezeigt bekommt. Zur Darstellung der Internetseite greift der Browser auf die Schriften zurück die lokal auf dem Rechner installiert sind. Wenn ich also eine bestimmte Schrift für mein Design verwende, dann müssen alle Leute die meine Seite so sehen sollen wie ich es möchte, diese Schrift installiert haben. Oder eben was realistischer ist aber eben auch zu einer solchen Einschränkung führt, als Gestalter muss ich auf diejenigen Schriften zurückgreifen von denen ich ausgehen kann, dass sie auf der größtmöglichen Anzahl von Rechnern installiert sind. Was leider nicht allzu viele sind. Es gibt einige Übersichten die einem eine Liste mit web-sicheren Schriften an die Hand geben, eine davon findet sich zum Beispiel auf Dustin Brewers Seite. [...]
Thanks. Of the thousand or so “web safe font web pages” this is by far the clearest display I’ve come across.
les paul
stephen mcgee stephen mcgee swine flu news in india swine flu news in india frank sinatra jr frank sinatra jr mike keeler mike keeler michael vick eagles michael vick eagles ashley greene dirty pics ashley greene dirty pics salinomycin salinomycin tourettes guy tourettes guy thriller album cover thriller album cover bailiwick bailiwick espn nfl espn nfl
Be careful with Century Gothic. It’s not installed in Windows XP by default. Perhaps use it with a fallback to something more universal like Arial.
Century Gothic isn’t installed on OSX by default either – see http://support.apple.com/kb/HT1642
[...] Alternative zu Century Gothic unter Mac/Linux [...]
[...] Fonts on the web and a list of web-safe fonts. – Link. [...]
What about the Lucida family? It’s on both Win and Mac.
[...] Fonts on the web and a list of web safe fonts Tableau sur le compatibilité des fonts selon les navigateurs [...]
[...] & so do not cause a problem when someone opens your site. However, they are not so many – check here for a list. If you want to use a font that is "unusual", one way is to save the text as [...]
[...] Fuente: Dustin Brewer [...]
[...] Fonts on the web and a list of web safe fonts Tableau sur le compatibilité des fonts selon les navigateurs [...]
[...] What does that mean?! It simply means that not everyone on this planet has all the fonts you have installed on your computer. There’s something called Web Fonts Safe List and in a nutshell it is simply a list of fonts that includes that most likely fonts found on the majority of computers on this planet. So in your website, make sure that all your headlines, body text and text links belong to a Web Safe List. Dustin Brewer has gathered a list of web safe fonts on his blog [...]
ot server
I guess that perfectly explains why our web application doesn’t so great on Windows XP and very smooth on MAC even though both platforms use Firefox 3.x.
[...] The second is a list contains newer fonts, such as the one I am using on this site – Century Gothic or Futura if you are on a mac. You can find this resource at: dustinbrewer.com [...]
[...] Dustinbrewer.com nos dejan un listado muy simple de entender con las fuentes más comunes (o sea las que se suelen [...]
Very useful post.
More developer resources including web safe colors, ascii character codes can be found here : – http://www.prismgraphicdesign.co.uk/developer_center.php
[...] maintaining more difficult (especially for headers, drop down & fly out menu systems) – http://dustinbrewer.com/fonts-on-the-web-and-a-list-of-web-safe-fonts/ – The use of graphics/flash with text also limits your [...]
[...] Fonts on the web and a list of web safe fonts – Dustin Brewer [...]
[...] http://dustinbrewer.com/fonts-on-the-web-and-a-list-of-web-safe-fonts/ [...]
The midlife crisis is something people joke about but it can be distressing for those going through it.
[...] koneelle fontteja suoraan sivuilta. Enää siis sivujen typografian ei tarvitse rajoittua muutamaan web-turvalliseen [...]
[...] Safe Fonts? Found a great chart which shows Browser Safe Fonts: Fonts on the web and a list of web safe fonts | Dustin Brewer Web Design Can I just have confirmation that it should be ok to use Century Gothic? also how would I put it [...]
Sehr interessant. Kommt hier noch ein Folgeartikel? Würde gern einiges mehr darüber erfahren. Könntest du mir per E-Mail weiterhelfen?