When designing web pages, using the appropriate font for your design does wonder to the overall look, feel and layout of your page. Unfortunately, web designers are quite limited to the fonts they can use. Most web designers stick to the tried and true “web safe” fonts.
If you take all considerations including operating systems: Windows, Mac OS X, Linux, Unix, and browsers: IE, Firefox, Safari, Opera, etc, then you are really stuck with just 3 of the safest fonts on the web. They are: Arial/Helvetica, Times New Roman/Times, and Courier New/Courier.
Other fonts that work across platforms are: Palatino, Garamond, Bookman, and Avant Garde.
Fonts that work in Windows and Mac OS, but not in Unix+X are: Verdana, Georgia, Comic Sans MS, Trebuchet MS, Arial Black, and Impact.
If you like to consider all OS platforms in your design, then the order of your fonts in CSS is important. I recommend this sequence.
Establish a Baseline
At the very least, you need to establish your baseline font. Choose whether you want “Serif or Sans-Serif” font. The CSS would look something similar to this:
html { font-family: Serif}
html { font-family: Sans-Serif } |
Choose a Web Safe Font
Next, choose a “web safe” font. Your choice comes down to either taking Arial/Helvetica, Times New Roman/Times, and Courier New/Courier. Most people don’t use the monotype Courier font except when displaying code. So, you are essentially down to four fonts, Arial/Helvetica or Times New Roman/Times. Helvetica is very popular. Arial is not far behind. New Times Roman is better than Times. In our example, will now look like this:
html { font-family: Times New Roman, Serif }
html { font-family: Arial, Sans-Serif } |
Choose a Cross-Platform Font
If you must, you can choose a “cross platform font.” Again, our choices are: Palatino Linotype, Garamond, Bookman, and Avant Garde. The first 3 are Serif fonts. Avant Garde is the only Sans-Serif font.
html { font-family: Palatino Linotype, Times New Roman, Serif }
html { font-family: Avant Garde, Arial, Sans-Serif } |
Add Other Fonts
If you must, you can choose other fonts, although they do not work in Unix+ systems. They are: Verdana, Georgia, Comic Sans MS, Trebuchet MS, Arial Black and Impact.
html { font-family: Georgia, Palatino, Times New Roman, Serif }
html { font-family: Verdana, Avant Garde, Arial, Sans-Serif } |
There you have it. A safe way to implement CSS Fonts across all OS platforms.