CSS font matching: Windows, Mac and Linux

Saturday, 22. March 2008, 19:22:26

web development, css, websites, safari, firefox, windows, opera, linux, browser, HTML, macos x

I found several posts about font comparsion for web development and cascading stylesheets. But most are incomplete or didn't compare all three major systems Linux, MacOS X and Windows.
Based on my own experience and a list of websites (Linux font equivalents, Mac OS X 10.4 and 10.5 font list, MacOS X Safari, iPhone fonts and Microsoft products and fonts) i created my own list.
Most users have Windows installed and Microsoft has once startet a webfont project. So i use typical Windows fonts as the base of my list. Another rule of the selection was that the alternative font faces didn't have a larger width then the the original has:
* Arial,Helvetica,FreeSans,"Liberation Sans","Nimbus Sans L",sans-serif
* "Courier New",Courier,FreeMono,"Nimbus Mono L","Liberation Mono",monospace
* Georgia,"Bitstream Charter","Century Schoolbook L","Liberation Serif",Times,serif
* "Lucida Sans","Lucida Sans Unicode","Lucida Grande",Lucida,sans-serif
* "Lucida Console",Monaco,"DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono",monospace
* Palatino,"Palatino Linotype",Palladio,"URW Palladio L","Book Antiqua","Liberation Serif",Times,serif
* Tahoma,Geneva,"DejaVu Sans Condensed",sans-serif
* "Times New Roman",Times,"Nimbus Roman No9 L","FreeSerif","Liberation Serif",serif
* Verdana,"Bitstream Vera Sans","DejaVu Sans","Liberation Sans",Geneva,sans-serif

Some newer Vista fonts are still uncompared. An update will follow soon

Interviewed: Anders Brander (RawStudio)60 brilliant typefaces for corporate design

Comments

That's very useful, thank you!

By jegHegy, # 22. March 2008, 20:34:25

I don't mean to nitpick, but would it be possible to see this in a table sorted by OS?

By rfhurley, # 22. March 2008, 22:14:03

The first font name are the typical Windows fonts, the last are the standard definitions. Between this are Mac and Linux. I listed some sources too where you can get the detailed information about the Mac fonts.
Another list can be found here: http://www.apaddedcell.com/web-fonts
But from my point of view this list is buggy, an example: A font called "Georgia" is not availbale at Ubuntu Linux. Only when you installled the MS core fonts.

By area42, # 23. March 2008, 08:34:29

Does this look about right?

http://files.myopera.com/rfhurley/files/XOSfonts.doc

By rfhurley, # 23. March 2008, 16:53:58

No. Check the Mac OS X 10.4 and 10.5 font list, then you know what fonts between the first and last are Linux/ Unix fonts.

By area42, # 23. March 2008, 21:05:12

where would I find a Mac OS font list?

By rfhurley, # 24. March 2008, 00:45:46

What about the links in my article

By area42, # 24. March 2008, 09:53:51

Thanks

By rfhurley, # 24. March 2008, 16:24:56

By area42, # 24. March 2008, 20:28:26

j.j. writes:

Hello!

"URW Palladio" should be "URW Palladio L" ?!

By anonymous user, # 6. April 2008, 14:49:12

Right

i fixed this. Tahnx for the reply.

By area42, # 6. April 2008, 16:01:43

... and Century Schoolbook L
... Nimbus Roman No9 L

By JuergenJ, # 6. April 2008, 16:03:42

Thanks for the effort mate, very nice job and very handy and helpfull

By fromamac, # 1. May 2008, 20:19:53

I found the exact same alternate fonts for Verdana, but was still looking around for serif (Georgia) and monospace alternatives.

Your list saved me quite some time, thank you.

By byteshrine, # 21. June 2008, 16:18:11

By area42, # 21. June 2008, 17:50:14

René writes:

Thx for the list. It is good to have a short list with all platform fonts available. But from my point of view this is not a real improvement of the other lists. So I don't know the names of the fonts on the specific platforms. I had to look in the font settings for every system the get the names available or not. A little table-like presentation would be better (see rfhurleys comment).

The best thing would be (and I know for this more work is to do) something like that: A table with platforms and their web-fonts. If a font is available on a platform then it will be marked. Only standard installations with no additional font packages should be considered. For me as a web-developer it is important to know how the different font rendering looks like. So a little screenshot would be very nice. At the end I would be happy to know witch css style I should take to match the nearest font rendering result on every platform. If I see that "Nimbus Sans L" under Linux renders better than "Arial" or "Helvetica" I would choose the following:

font-family: "Nimbus Sans L",Arial,Helvetica,FreeSans,sans-serif

If You agree with me and would realize such a list let me know. I can offer You some help.

By anonymous user, # 4. July 2008, 09:21:30

Hello René,

my list is sorted about what's mostly use at the net and the problem that not all have Windows fonts installed. The list must be updated about Vista fonts and Rehats liberation fonts. And of course we could push Linux fonts in the first row

By area42, # 4. July 2008, 11:49:13

Updated the list to support Rehat's liberation fonts

By area42, # 5. July 2008, 22:55:40

I developed the cross browser font list in the link posted in the third comment above. I just found this post when looking for any documentation of the Bitstream vs. DejaVu family differences. I'm now finding that some browsers (Opera in particular!) are having problems rendering DejaVu but not Bitstream.

By the way, I was undecided about including the mscorefonts in the Ubuntu column and now I'm reconsidering that decision. Since most Ubuntu users surveyed had it installed I decided to include it but really, the great usefulness of having that list is being able to develop a font stack that works for everyone. Including the ms fonts in the linux column isn't helpful in that context.

If you find any other errors in that article please do let me know. It's tough to sort out what exactly is offered by different operating systems.

By mjjack, # 15. July 2008, 18:56:55

Anonymous writes:

Here's some anti-Verdana points to consider:
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

Thanks,
..jim

By anonymous user, # 6. November 2008, 21:18:36

Hi Jim,

yes Verdana has its pro and cons

By area42, # 7. November 2008, 00:11:20