I recently stumbled on this article 16 Gorgeous Web Safe Fonts To Use With css and I think it is very simple but still a really good overview. I decided to take it a bit further and add a few more elements to the concept, css preview of most used css font families as we would normally use them in our designs.
So what does Websafe mean? Websafe (or “safe for the web” or “web safe”) fonts are fonts that are common among all versions of Windows, Mac, Linux, etc. Fonts that you expect everyone viewing your webpage to have. Maybe it is obvious to everyone maybe not but be aware that using “fancy” font you have installed locally on your PC or on your web server cannot be used for web pages provided to the public. The fonts that you installed yourself is likely not to be available on most visitors PCs and they will simply not see the design you worked so hard to create. What is not so obvious is whether the fonts that are common to most Operating Systems render to look the same or if there are minor or even major differences. This article will try to give you an idea of what is actually safest. I will not make any conclusions but the images talk for themselves and you will be able to decide yourself.
Best practice and really the most safe option is to use the generic font families as defined by the css. These are: sans-serif, serif, monospace, cursive and fantasy. They are not that useful in designs but one of them should always be specified as a last resort for every font-family css property. Sans-serif is often specified in css as the default for generic font families, as they are easily readable on screens.
Websafe Font Families
Font families can be combined in many ways but in this article you will see the, in my opinion, most commonly used rendered using css in your browser and as screenshots taken on Windows and Mac OS with Safire 4.0. This not only gives you an overview of good websafe font families you can use on your web designs but it also clearly demonstrates how each font family will render on window and Mac OS. If you want to see the source used it can be found here 1 | 2. I also made a huge series of screenshots with different browsers and Operating Systems using browsershots. Get all these images as zip here 1 | 2.
This is the heading h2 used on tripwire magazine.
font-family: Georgia,'Times New Roman',Times,serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
I’m pleased to see that the one used at tripwire magazine seams to be safe. I have checked more browser types and operating systems available for download above and I think it is really safe to use Georgia. Not only is it available but it also renders OK across.
font-family: Arial, Helvetica, sans-serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: 'Arial Black', Gadget, sans-serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: 'Bookman Old Style', serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: 'Comic Sans MS', cursive;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: Courier, monospace;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: 'Courier New', Courier, monospace;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: Garamond, serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: Georgia, serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: Impact, Charcoal, sans-serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: 'Lucida Console', Monaco, monospace;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: 'MS Sans Serif', Geneva, sans-serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: 'MS Serif', 'New York', sans-serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: Symbol, sans-serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: Tahoma, Geneva, sans-serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: 'Times New Roman', Times, serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: 'Trebuchet MS', Helvetica, sans-serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: Verdana, Geneva, sans-serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: Webdings, sans-serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
font-family: Wingdings, 'Zapf Dingbats', sans-serif;
Safari 4.0 , Windows 7
Safari 4.0 / Mac OS X 10.5
Conclusion…. well I said I didn’t want to make any but the result needs to be discussed briefly. I’m really surprised that there are so significant differences between Windows and Mac OS on some of the Fonts. Bookman Old Style renders as two completely different fonts while fx. MS Sans Serif looks similar but have very different letter-spacing. What is your opinion on this – are you also surprised? What is your favourite font family?
Related posts
- 20 classy free sans-serif fonts If you are not familiar with the term sans-serif,...
- 25 High Quality Free Fonts for Professional Design Regardless of industry and product top quality usually comes...
- 60+ Free Fonts for Big, Bold and Beautiful Headlines Typography is a key element of design and communicating...
- 75+ Awesome Font and Typography Tools, Tutorials, Generators and Inspiration Typography and Font are really essential elements of good...
- 35+ Really Awesome Free Grunge Fonts with inspirational Showcases Designs doesn’t have to be clean and beautiful all...
Submit
More Links
July 24th, 2009 at 3:17 pm
Thanks for letting us know this good blog by the way.
July 24th, 2009 at 9:40 pm
It’s interesting how things can be shown so differently. Thanks for the very useful article.
July 27th, 2009 at 2:55 pm
Interesting — I’m using Firefox on Windows XP and the Wingdings fonts display sans-serif. I thought they were a pretty common font — and I know I have them installed. Not that I would use them for a website. (:
Thank you for this list. It’s very helpful and makes for a great resource for quick testing.