Website development and design blog, tutorials and inspiration

Web Safe Font List

By , 23rd May 2010 in Graphic Design

Here you can find a list of the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as "browser safe fonts" or "web safe fonts". This list can be used to ensure that the fonts you use on your website designs will look similar on all platforms.

Introduction to Typography

Difference between Sans-Serif (left) and Serif (right) fonts. Notice the trailing lines from the edges of letters highlighted yellow.
Difference between Sans-Serif (left) and Serif (right) fonts. Notice the trailing lines from the edges of letters highlighted yellow.

Traditionally, designers could use any font they wish, and once printed they can rest assured that everyone will see the same design, layout and typeface.

Web designers face a far greater challenge than designers for print as they have to select a font family from a very limited list, as there is never a single font that is installed on 100% of computers across Windows, Apple and Linux operating systems. Even when the same font family is available, there is no guarantee that everyone will see the same exact thing due to differences in how they are rendered by various operating systems.

Because of this, web designers use what's known as a web safe font list which lists the most commonly installed fonts on all machines.

Show below are the most popular web safe fonts with some sample text showing a sentence, bold and italic styles. It also shows the percentage availability of the font on Windows, Apple Mac and Linux and provides an average "score" for the font.

The list also provides a web safe font stack which you can use in CSS and includes the intended font, alternative font, Mac and, if available, Linux alternative.

Serif Web Safe Fonts

Times

Times TimesTimes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

99%
Average

font-family:"times new roman", times, serif;

99%99%99%

Georgia

Georgia GeorgiaGeorgia

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

80%
Average

font-family:georgia, "times new roman", norasi, serif;

45%96%99%

Garamond

Garamond GaramondGaramond

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

52%
Average

font-family:garamond, "apple garamond", baskerville, times, serif;

23%49%86%

Sans-Serif Web Safe Fonts

Arial

Arial ArialArial

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

93%
Average

font-family:arial, sans-serif;

82%99%99%

Verdana

Verdana VerdanaVerdana

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

81%
Average

font-family:verdana, geneva, tahoma, kalimati, sans-serif;

45%99%99%

Tahoma

Tahoma TahomaTahoma

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

81%
Average

font-family:tahoma, geneva, verdana, kalimati, sans-serif;

45%99%99%

Trebuchet

Trebuchet TrebuchetTrebuchet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

80%
Average

font-family:"trebuchet ms", "lucida sans", "lucida grande", sans-serif;

45%96%99%

Lucida

Lucida LucidaLucida

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

72%
Average

font-family:"lucida sans", "lucida grande", garuda, sans-serif;

19%99%99%

Web Safe Monospace Fonts

Courier

Courier CourierCourier

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

93%
Average

font-family:"courier new", courier, andale mono, "free mono", monospace;

82%96%99%

Lucida Console

Lucida Console Lucida ConsoleLucida Console

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

71%
Average

font-family:"lucida console", "bitstream vera sans mono", monospace;

18%96%99%

Consolas

Consolas ConsolasConsolas

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

32%
Average

font-family: consolas, monospace;

<10%<10%96%

Web Safe Fantasy, Cursive and Script Fonts

Impact

Impact ImpactImpact

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

76%
Average

font-family:impact, haettenschweiler, "arial narrow bold", sans-serif;

45%84%99%

Century Gothic

Century Gothic Century GothicCentury Gothic

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.

71%
Average

font-family:"century gothic","avant garde",'apple gothic',sans-serif

18%98%99%

Font availability statistics from VisiBone Font Survey - Browsershare.

Further Reading
Comments
  1. Tim Trott
    Tim Trott

    Comic sans walks into a bar and the barkeep shouts "Get out - we don't want your type in here."

  2. Shrinath
    Shrinath

    Sadly, there is no font that is fully supported by Windows, Mac OS X and Linux/Unix.

Leave a Reply

Your email address will not be published.