When we’re talking about fonts compatibility on the web, we’re going to go across the border of the operating systems. And when we go roaming around the operating systems (OS), it may vary from Mac, Linux, or Windows, each with its own pack of fonts. Knowing that, what we picked under one OS, can be slightly different when another visitors come from another OS. In this articles, I will try to give a hints on the safe way to approach this matter from the compatibility point of view.

Why compatibility ?

Mostly, when we pick only one fonts on our CSS, when a computer with different system doesn’t have the fonts, the web will be displayed using fonts that is exists on the viewers computers, which if we don’t specify the fonts family, system will use its default fonts. Often, the web page will then become crumbled, and looked ugly.

The family

A few lists on web-safe fonts family are below :

font-family: Arial, Helvetica, sans-serif;
font-family: ‘Arial Black’, Gadget, sans-serif;
font-family: ‘Bookman Old Style’, serif;
font-family: ‘Comic Sans MS’, cursive;
font-family: Courier, monospace;
font-family: ‘Courier New’, Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: ‘Lucida Console’, Monaco, monospace;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
font-family: ‘MS Sans Serif’, Geneva, sans-serif;
font-family: ‘MS Serif’, ‘New York’, sans-serif;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: ‘Times New Roman’, Times, serif;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;

How it works ?

On our css, its always a good approach to define the main font family for the whole page first, usually on the body.

body { font-family: Tahoma, Geneva, sans-serif; }

This way, when the visitors doesn’t have Tahoma, it will use Geneva. When geneva doesn’t exists, it will use any fonts from sans-serif family.

For the type, Verdana, Geneva, Arial, Helvetica, Times New Roman, and Times are proportional fonts having variable widths for the characters. Courier fonts are fixed-width. Verdana and Geneva were created specifically for display on web pages. They are sans serif and do not have the fine lines or serifs that adorn the ends of the letters in the Times New Roman and Times fonts. Arial and Helvetica are also sans serif. They were created for print media but look fine on web pages.

The benefits

By choosing your fonts wisely, you will then able to get the most typography advantages on your design. And what you see when you develop the web pages, is what the visitors will see in the future.

Further reading

Check out these resourceful material on web fonts, I picked the best of them to better understand this topic:

  • Font Tester : a place where you can test and compare what your fonts will looks like on the web, it also have decent list of font-family for a safe web fonts
  • Codestyle Fonts Survey : The Code Style font sampler is a guide to the most common fonts on Windows, Mac and Linux.
  • Wikipedia : In depth look into web typography on Wikipedia.

Addition
dém pointing out a fatal mistakes of mine where I put wingding as the font family there which are not available in linux. Therefore, I agree with him that using Unicode character is also a good approach to web safe fonts compability.

If you want to add anything, feel free to comment. I’m open to suggestions.

Incoming search terms:

  • web safe fonts 2011
  • web safe serif fonts
  • safe monospaced web fonts for linux or ubuntu
  • web fonts trebuchet ms
  • web page comic sans ms
  • web page font family compatibility
  • web safe creative fonts 2011
  • web safe family fonts
  • web safe fixed width fonts
  • web safe font families 2011