browser-compatible font families

September 13, 2009

There are five generic font families, each including some fonts:

serif:   have finishing strokes, flared or tapering ends, or have actual serifed endings (including slab serifs);  are typically proportionately-spaced;  often display a greater variation between thick and thin strokes than fonts from the ’sans-serif’ generic font family. Examples of fonts that fit this description include:

  • Garamond
  • Georgia
  • New York
  • Times
  • Times New Roman
font installed(%)
win mac unix
Georgia 97.76 94.20 57.70
Times New Roman 97.51 91.71 60.98
Lucida Bright 30.01 59.77 73.97

sans serif:  have stroke endings that are plain — without any flaring, cross stroke, or other ornamentation;  are typically proportionately-spaced;   often have little variation between thick and thin strokes, compared to fonts from the ’serif’ family. Examples of fonts that fit this description include:

  • Arial
  • Geneva
  • Helvetica
  • Lucida Sans
  • Trebuchet
  • Verdana
font installed(%)
win mac unix
Verdana 99.13 95.58 59.67
Tahoma 98.98 74.86 —-
Arial 98.73 96.41 65.90
Lucida Sans 41.17 59.77 73.97

monospace: have the same fixed width so it is similar to a manual typewriter. Examples of fonts that fit this description include:

  • Courier New
  • Courier
  • monospac
font installed(%)
win mac unix
Courier New 98.73 90.88 64.59
Monaco 2.77 98.34 4.11

cursive and fantasy are not suggested to be used in the body text.

Some common rules:

  1. Sans serif for online, serif for print.
  2. Monospace for typewriter and code.
  3. Cursive and fantasy for accents.

The following combinations are fairly safe when it comes to universal application across operating systems and browser platforms:

  • Arial, Helvetica, sans-serif
  • Verdana, Arial, Helvetica, sans-serif
  • Georgia, Times New Roman, Times, serif
  • Times New Roman, Times, serif
  • Courier New, Courier, monospace

[references]

http://www.codestyle.org

http://webdesign.about.com/od/fonts/a/aa080204.htm

http://www.w3.org/TR/CSS2/fonts.html#generic-font-families

“Prof ASP.NET 2.0 Design _ CSS, Themes, and Master Pages”, Wrox, 2007

Posted by bimawen
Filed in web programming
Tags:
Leave a Comment »