Eckhard M. Jäger

CSS font matching: Windows, Mac and Linux

Saturday, March 22, 2008 7:22:26 PM

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

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

Comments

jegHegy # Saturday, March 22, 2008 8:34:25 PM

That's very useful, thank you!

Robert Hurleyrfhurley # Saturday, March 22, 2008 10:14:03 PM

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

Eckhard M. Jägerarea42 # Sunday, March 23, 2008 8:34:29 AM

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 Hurleyrfhurley # Sunday, March 23, 2008 4:53:58 PM

Does this look about right?

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

Eckhard M. Jägerarea42 # Sunday, March 23, 2008 9:05:12 PM

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 Hurleyrfhurley # Monday, March 24, 2008 12:45:46 AM

where would I find a Mac OS font list?

Eckhard M. Jägerarea42 # Monday, March 24, 2008 9:53:51 AM

What about the links in my article

Robert Hurleyrfhurley # Monday, March 24, 2008 4:24:56 PM

Thanks

Eckhard M. Jägerarea42 # Monday, March 24, 2008 8:28:26 PM

Unregistered user # Sunday, April 6, 2008 2:49:12 PM

j.j. writes: Hello! "URW Palladio" should be "URW Palladio L" ?!

Eckhard M. Jägerarea42 # Sunday, April 6, 2008 4:01:43 PM

Right

i fixed this. Tahnx for the reply.

Jürgen JekaJuergenJ # Sunday, April 6, 2008 4:03:42 PM

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

fromamac # Thursday, May 1, 2008 8:19:53 PM

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

Eckhard M. Jägerarea42 # Saturday, June 21, 2008 5:50:14 PM

Unregistered user # Friday, July 4, 2008 9:21:30 AM

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ägerarea42 # Friday, July 4, 2008 11:49:13 AM

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ägerarea42 # Saturday, July 5, 2008 10:55:40 PM

Updated the list to support Rehat's liberation fonts

Meganmjjack # Tuesday, July 15, 2008 6:56:55 PM

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.

Unregistered user # Thursday, November 6, 2008 9:18:36 PM

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

Eckhard M. Jägerarea42 # Friday, November 7, 2008 12:11:20 AM

Hi Jim,

yes Verdana has its pro and cons

Unregistered user # Friday, June 26, 2009 7:54:07 PM

MarcoBarbosa writes: wow this is great! =O very usefull! thank you!!

Unregistered user # Saturday, June 27, 2009 4:07:58 PM

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

Unregistered user # Wednesday, July 1, 2009 9:13:28 PM

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ägerarea42 # Friday, July 31, 2009 9:59:55 PM

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.

Unregistered user # Sunday, December 6, 2009 10:46:50 AM

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.

Unregistered user # Thursday, February 18, 2010 4:38:20 PM

Rosco writes: I was bitching about my compatibility problems and your 1st line saved me HOURS of debugging, just like magic, on all platforms, thanks!!

Eckhard M. Jägerarea42 # Friday, February 19, 2010 11:40:54 AM

Cool!

Unregistered user # Tuesday, April 19, 2011 12:41:05 PM

Anonymous writes: Thanks!