Eckhard M. Jäger

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, web safe

I found several posts about font comparsion, web safe font lists 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

^60 brilliant typefaces for corporate design

Comments

jegHegy # 22. March 2008, 20:34

That's very useful, thank you!

Robert Hurley # 22. March 2008, 22:14

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

Eckhard M. Jäger # 23. March 2008, 08:34

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.

Robert Hurley # 23. March 2008, 16:53

Does this look about right?

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

Eckhard M. Jäger # 23. March 2008, 21:05

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.

Robert Hurley # 24. March 2008, 00:45

where would I find a Mac OS font list?

Eckhard M. Jäger # 24. March 2008, 09:53

What about the links in my article

Robert Hurley # 24. March 2008, 16:24

Thanks

Eckhard M. Jäger # 24. March 2008, 20:28

Anonymous # 6. April 2008, 14:49

j.j. writes:

Hello!

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

Eckhard M. Jäger # 6. April 2008, 16:01

Right

i fixed this. Tahnx for the reply.

Jürgen Jeka # 6. April 2008, 16:03

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

fromamac # 1. May 2008, 20:19

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

MC # 21. June 2008, 16:18

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.

Eckhard M. Jäger # 21. June 2008, 17:50

Anonymous # 4. July 2008, 09:21

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.

Eckhard M. Jäger # 4. July 2008, 11:49

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

Eckhard M. Jäger # 5. July 2008, 22:55

Updated the list to support Rehat's liberation fonts

Megan # 15. July 2008, 18:56

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.

Anonymous # 6. November 2008, 21:18

Anonymous writes:

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

Thanks,
..jim

Eckhard M. Jäger # 7. November 2008, 00:11

Hi Jim,

yes Verdana has its pro and cons

Anonymous # 26. June 2009, 19:54

MarcoBarbosa writes:

wow this is great! =O

very usefull!

thank you!!

Anonymous # 27. June 2009, 16:07

hcabbos writes:

Yes, a table showing platform would be awesome! I'll keep checking back.

Anonymous # 1. July 2009, 21:13

Anonymous writes:

I'm afraid I don't understand your ordering - I have always put the most obscure font first, followed by commoner fonts, and ending with the generic family name, but here the first named font is extremely common!

Eckhard M. Jäger # 31. July 2009, 21:59

My ordering is not about specials, its more about standards and get thing working on many systems. Yes you are right it is extremely common.

Anonymous # 6. December 2009, 10:46

brtkr writes:

Hi,
I'm always intrested in Linux font equivalents. Don't forget you legally use Ms core fonts when Windows are installed. Better way to install fonts from the driver CD of your printer. Ms has a strict (and silly) license. Better way to induce, persuade users to use free and open alternatives without license restricted ones. More info here (Hungarian):
http://brtkr.extra.hu/downloads.php?cat_id=4&download_id=108
Thanks for reading.