How safe are Web-safe Font Families really?

March 14, 2010 · 16 comments

by Lars

websafefonts

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.


ElegantThemes
ThemeForest

Advertisement

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.

Web-Safe Font Families

This is the heading h2 used on tripwire magazine.

1. Tripwire only Web Safe Fonts Please

font-family: Georgia,'Times New Roman',Times,serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

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.

2. Tripwire only Web Safe Fonts Please

font-family: Arial, Helvetica, sans-serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

3. Tripwire only Web Safe Fonts Please

font-family: 'Arial Black', Gadget, sans-serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

4. Tripwire only Web Safe Fonts Please

font-family: 'Bookman Old Style', serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

5. Tripwire only Web Safe Fonts Please

font-family: 'Comic Sans MS', cursive;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

6. Tripwire only Web Safe Fonts Please

font-family: Courier, monospace;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

7. Tripwire only Web Safe Fonts Please

font-family: 'Courier New', Courier, monospace;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

8. Tripwire only Web Safe Fonts Please

font-family: Garamond, serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

9. Tripwire only Web Safe Fonts Please

font-family: Georgia, serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

10. Tripwire only Web Safe Fonts Please

font-family: Impact, Charcoal, sans-serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

11. Tripwire only Web Safe Fonts Please

font-family: 'Lucida Console', Monaco, monospace;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

12. Tripwire only Web Safe Fonts Please

font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

13. Tripwire only Web Safe Fonts Please

font-family: 'MS Sans Serif', Geneva, sans-serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

14. Tripwire only Web Safe Fonts Please

font-family: 'MS Serif', 'New York', sans-serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

15. Tripwire only Web Safe Fonts Please

font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

16. Tripwire only Web Safe Fonts Please

font-family: Symbol, sans-serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

17. Tripwire only Web Safe Fonts Please

font-family: Tahoma, Geneva, sans-serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

18. Tripwire only Web Safe Fonts Please

font-family: 'Times New Roman', Times, serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

19. Tripwire only Web Safe Fonts Please

font-family: 'Trebuchet MS', Helvetica, sans-serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

20. Tripwire only Web Safe Fonts Please

font-family: Verdana, Geneva, sans-serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

21. Tripwire only Web Safe Fonts Please

font-family: Webdings, sans-serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

22. Tripwire only Web Safe Fonts Please

font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Safari 4.0 , Windows 7

Web-Safe Font Families

Safari 4.0 / Mac OS X 10.5

Web-Safe Font Families

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?

{ 4 comments… read them below or add one }

cheap custom jerseys May 19, 2011 at 9:01 am

How safe are Web-safe Font Families really?

Reply

Elizabeth K. Barone July 27, 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.

Reply

HullDO July 24, 2009 at 9:40 pm

It’s interesting how things can be shown so differently. Thanks for the very useful article.

Reply

web designs July 24, 2009 at 3:17 pm

Thanks for letting us know this good blog by the way.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

{ 12 trackbacks }

Previous post:

Next post:


Web Analytics