With the rise of @font-face and the new possibilities it opens, web designers like to use fancy fonts to make their website more unique. However, this does come with a price, an more important loading time for web pages.
If saving bandwidth and having fast loading pages is important for you, don’t worry too much, it doesn’t mean you have to give up on typography. There are a few fonts that you can use to make sure your website is looking right without using Arial or Times New Roman. In this post we take a look at some fonts that are already installed on your visitors computers most of the time.
Serif fonts
1. Baskerville
A classic serif font published by Bitstream. Baskerville is an elegant and stable serif font that will give your webpages a beautiful look.
Usage: Windows 60.3% – Mac 93.3%
Font stack example
font-family: Baskerville, "Baskerville Old Face", "Goudy Old Style", Garamond, "Times New Roman", serif;
2. Palatino
Palatino was superstar type designer Herman Zapf’s first very popular font, it was based on his own calligraphy.
Usage: Windows 99.3% – Mac 83.1%
Font stack example
font-family: Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua", Georgia, serif;
3. Bodoni MT
Widely used in the luxury industry, Bodoni MT or Didot are synonymous with elegance.
Usage Bodoni: Windows 55.8% – Mac 0%
Usage Didot: Windows 0% – Mac 93.5%
Font stack example
font-family: "Bodoni MT", Didot, "Didot LT STD", "Book Antiqua", Garamond, "Times New Roman", serif;
4. Georgia
Many designers already use Georgia on their website, a great option if you want a highly-readable font.
Usage: Windows 99.4% – Mac 97.5%
Font stack example
font-family: Georgia, Times, "Times New Roman", serif;
Sans-serif fonts
5. Century Gothic
Century Gothic is a clean, rounded sans-serif font to give your site a modern look.
Usage: Windows 87.6% – Mac 53.2%
Font stack example
font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
6. Tahoma
Tahoma is a sans-serif font that was designed specifically for on-screen display, it is very legible at small sizes.
Usage: Windows 97.8% – Mac 91.7%
Font stack example
font-family: Tahoma, Verdana, Segoe, sans-serif;
7. Arial Narrow
Arial is one of the most despised fonts by designers, but its condensed version looks actually quite decent (unless you compare it to Helvetica Condensed, then it looks bad).
Usage: Windows 88.4% – Mac 94.8%
Font stack example
font-family: "Arial Narrow", Arial, "Helvetica Condensed", Helvetica, sans-serif;
8. Trebuchet MS
Trebuchet is a humanist sans serif typeface designed for good screen readability by Vincent Connare, the guy who designed Comic Sans.
Usage: Windows 99.7% – Mac 97.1%
Font stack example
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
Monospaced fonts
9. Consolas
Consolas is a nice monospaced font, perfect for programming or sharing code on your website.
Usage: Windows 83% – Mac 34.8%
Font stack example
font-family: Consolas, monaco, monospace;
10. Lucida Sans Typewriter
Lucida Sans Typewriter is a monospaced sans serif typeface with subtle curves and a good display on screen.
Usage: Windows 74.8% – Mac 99.6%
Font stack example
font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
About the Author
Mirko Humbert
Mirko Humbert is the editor-in-chief and main author of Designer Daily and Typography Daily. He is also a graphic designer and the founder of WP Expert.