I often have to scramble to try and find just the right font-family for a site I am working on, so I created this little cheat sheet for myself. I decided it might be useful for others as well, so I’m sharing it here. Included are the various font-families that are typically used, along with a representation of what they look like. Keep in mind that not every computer has every font, so any fonts you don’t have will display the default generic font family instead (sans-serif, serif, or monospace). I just cut and paste the code in gray when I want to use one of these in my CSS.

Sans Serif

Sans serif is generally best for most text on screen.

Common Version:

font-family: Arial, Helvetica, sans-serif;

  »  Arial – The quick brown fox jumps over the lazy dog. 1234567890

  »  Helvetica – The quick brown fox jumps over the lazy dog. 1234567890

More Choices:

font-family: Verdana, Arial, Helvetica, “Trebuchet MS”, Tahoma, Geneva, “Lucida Sans Unicode”, “Lucida Grande”, “MS Sans Serif”, sans-serif;

  »  Trebuchet MS – The quick brown fox jumps over the lazy dog. 1234567890

  »  Verdana – The quick brown fox jumps over the lazy dog. 1234567890

  »  Tahoma – The quick brown fox jumps over the lazy dog. 1234567890

  »  Geneva – The quick brown fox jumps over the lazy dog. 1234567890

  »  Lucida Sans Unicode – The quick brown fox jumps over the lazy dog. 1234567890

  »  Lucida Grande – The quick brown fox jumps over the lazy dog. 1234567890

  »  MS Sans Serif – The quick brown fox jumps over the lazy dog. 1234567890

My Favorite:

font-family: “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

---

Serif

Serif is generally best for text designed to be printed.

Common Version:

font-family: Times, “Times New Roman”, Georgia, serif;

  »  Times – The quick brown fox jumps over the lazy dog. 1234567890

  »  Times New Roman – The quick brown fox jumps over the lazy dog. 1234567890

  »  Georgia – The quick brown fox jumps over the lazy dog. 1234567890

More Choices:

font-family: Times, “Times New Roman”, Georgia, Garamond, “Palatino Linotype”, Palatino, “Book Antiqua”, “New York”, serif;

  »  Garamond – The quick brown fox jumps over the lazy dog. 1234567890

  »  Palatino Linotype – The quick brown fox jumps over the lazy dog. 1234567890

  »  Palatino – The quick brown fox jumps over the lazy dog. 1234567890

  »  Book Antiqua – The quick brown fox jumps over the lazy dog. 1234567890

  »  New York – The quick brown fox jumps over the lazy dog. 1234567890

My Favorite:

font-family: Garamond, Georgia, Times, “Times New Roman”, serif;

---

Monospace

Monospace is generally best when representing code or typewritten text.

Common version:

font-family: Courier, monospace;

  »  Courier – The quick brown fox jumps over the lazy dog. 1234567890

More Choices:

font-family: “Lucida Console”, Monaco, Courier, “Courier New”, monospace;

  »  Lucida Console – The quick brown fox jumps over the lazy dog. 1234567890

  »  Monaco – The quick brown fox jumps over the lazy dog. 1234567890

  »  Courier New – The quick brown fox jumps over the lazy dog. 1234567890

My Favorite:

font-family: Courier, “Courier New”, monospace;

---

Find this post ueseful? Consider adding to my coffee fund...

Help replenish my caffeine stores

Your Email Address :

***
If you are the first to "discover" any of my posts in StumbleUpon, one of the following categories would probably be the most appropriate to place it into. You don't have to choose one of these, of course, but based on what I usually write about, there's a good chance any of my posts will fall into one of these categories.

Computers * Computer Graphics * Computer Hardware * Computer Security * Databases * Internet * Internet Tools * Linux/Unix * Web development * Weblogs(Blogs) * Windows

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.