Best Use CSS Font-Family Samples
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;
