Dysfunctional Font-Family

Perhaps one of the toughest decisions to make when designing a website, for me at least, is choosing which font-family to use as well as which fonts work for most users. I have wished since I started my career in web design that it was possible to use a font uploaded to the web server and use that, rather than relying on client machines to have a compatible font. However, it seems our lot in life to make the best of a less than ideal situation.

So, in the spirit of aiding my fellow designers, I have compiled a list of some of the best font families and their respective counterparts in both Mac and Linux/Unix. According to Code Style, the fonts listed below are available on more than 50% of all computers using that operating system. In general, the families are listed as follows:

"font-family: Windows or MSIE Font, Mac Font, Linux Font, Generic Alternative;"

I also did you the favor of formatting so that it can be copied and pasted into your css file. Feel free to use these as you will. I would really like to get more examples of font-families, so if you have a unique one that you would like to contribute, please let me know. I would also like to know if this has been helpful.

Sans-Serif fonts

The advantage to sans-serif fonts is that they are very easy to read on the web. Sans-serif fonts eliminate the strokes, or serifs, on the ends of letters.

  • Arial, Helvetica, sans-serif
  • "Arial Black", Gadget, sans-serif
  • Impact, Charcoal, Chicago, sans-serif
  • "Lucida Sans Unicode", "Lucida Grande", sans-serif
  • Tahoma, Geneva, sans-serif
  • "Trebuchet MS", Helvetica, sans-serif
  • Verdana, Geneva, sans-serif

Serif Fonts

Serif fonts are especially good for headings. They tend to give the appearance of antiquaited or typed text. Obviously, serif fonts have been used well as content text, however, sans-serif fonts are still often the font of choice for that purpose.

  • Georgia, "Hoefler Text", "URW Bookman L", serif
  • "Palatino Linotype", "Book Antiqua", "URW Palladio L" serif
  • "Times New Roman", Times, "Nimbus Roman No9 L", serif
  • "Bookman Old Style", Didot, "URW Bookman L", serif
  • Sylfaen, Palatino, "URW Palladio L", serif

Cursive Fonts

I have yet to see cursive fonts well-used in websites, however, that does not mean that they cannot. For the longest time, I avoided cursive fonts simply because I believed the only one that could be used on most systems was Comic Sans (which I detest with a passion). However, in my research, I found that the Chancery fonts are common on Macs and Linux computers and there is a Windows font that is close enough to give the same effect. I haven't actually used it myself yet, but I think it would be a good thing to try.

  • "Comic Sans MS", cursive
  • "Monotype Corsiva", "Apple Chancery", "URW Chancery L", cursive

Fantasy Fonts

Again, Fantasy fonts are rarely used. I haven't really found any good fonts for this class. If you know of any, please let me know.

Monospace Fonts

Monospace fonts are commonly used to indicate code.

  • "Courier New", "Nimbus Mono L", Courier, monospace
  • "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace

The one thing I want to be clear to point out is that these are merely recommendations. While sans-serif fonts are typically the most readable on the web, there is nothing against using a serif font instead. In fact, there is nothing against using a monospace font, as I did. Remember that CSS grants you great freedom and flexibility. Try to bear in mind accessability and standards, but there are no rules to define beautiful.