10 fonts that are safe to use with CSS

Post by Mirko on May 15, 2013

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;

baskerville

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;

palatino

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;

bodoni-mt

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;

georgia

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;

century-gothic

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;

tahoma

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;

arial-narrow

 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;

trebuchet-ms

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;

consolas

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;

lucida-sans-typewriter

Go back to the original post on Design daily news

Comments

No comments yet

Comments are closed.

PanoramicPanoramic.com Image