CSS font stacks, media style sheets & web standards

Your banner ad here

WestNIC provides reliable web hosting services

Site navigation below

CSS fonts should be based on a generic font family to ensure an appropriate style font is rendered in any circumstances. Preferred font names should be declared in order of preference in a comma separated font family list tailored for specific platforms.

CSS font family: sans-serif

Sans serif fonts have a very regular, often geometrical shape with no serifs on the end of the letter strokes. Sans serif font faces are generally considered to have a simple, clean, modern font style that is reliable for the Web. Use the CSS font family name sans-serif.

The most common sans serif fonts

Key sans serif fonts common to all systems include Microsoft Arial, Arial Black, Trebuchet MS and Verdana, although their frequency on Unix family systems is quite low.

Helvetica is very common on Mac and Unix systems but not on Windows, where Arial is the closest equivalent. Avant Garde for Mac and Avantgarde for Unix are variants of the same font, not usually present on Windows. In this case, the closest match would be Century Gothic.

Lucida Grande for Mac, Lucida Sans Unicode for Windows and Lucida for Unix family systems are quite similar, though not particularly common.

Most common sans serif fonts on Windows systems to 6 February 2010
Font name Installed (%) Sample Image
Microsoft Sans Serif 99.70% 99.70% Text Image
Verdana 99.61% 99.61% Text Image
Tahoma 99.46% 99.46% Text Image
Arial 99.22% 99.22% Text Image
Trebuchet MS 99.22% 99.22% Text Image
Arial Black 98.54% 98.54% Text Image
Lucida Sans Unicode 98.39% 98.39% Text Image
Franklin Gothic Medium 97.87% 97.87% Text Image
Arial Narrow 88.73% 88.73% Text Image
Century Gothic 87.95% 87.95% Text Image
Vrinda 86.58% 86.58% Text Image
Kartika 86.38% 86.38% Text Image
MS Reference Sans Serif 70.68% 70.68% Text Image
Arial Unicode MS 62.93% 62.93% Text Image
Franklin Gothic Book 60.46% 60.46% Text Image
Franklin Gothic Medium Cond 60.05% 60.05% Text Image
Eras Demi ITC 59.85% 59.85% Text Image
Franklin Gothic Demi 59.85% 59.85% Text Image
Eras Light ITC 59.65% 59.65% Text Image
Franklin Gothic Demi Cond 58.38% 58.38% Text Image
Franklin Gothic Heavy 58.33% 58.33% Text Image
Calibri 56.15% 56.15% Text Image
Candara 55.76% 55.76% Text Image
Corbel 55.76% 55.76% Text Image
Arial Rounded MT Bold 53.32% 53.32% Text Image
Gill Sans Ultra Bold 52.05% 52.05% Text
Gill Sans MT 51.85% 51.85% Text
Gill Sans MT Condensed 51.44% 51.44% Text
Lucida Sans 51.27% 51.27% Text Image
Eras Medium ITC 50.89% 50.89% Text
Gill Sans MT Ext Condensed Bold 50.89% 50.89% Text
Eras Bold ITC 50.73% 50.73% Text
Gill Sans Ultra Bold Condensed 50.73% 50.73% Text
Tw Cen MT Condensed 50.43% 50.43% Text
Tw Cen MT 50.38% 50.38% Text
Tw Cen MT Condensed Extra Bold 50.18% 50.18% Text
Berlin Sans FB 47.75% 47.75% Text
Berlin Sans FB Demi 46.94% 46.94% Text
Segoe UI 46.63% 46.63% Text Image
Bitstream Vera Sans 21.22% 21.22% Text
Eurostile 21.06% 21.06% Text
Helvetica 7.04% 7.04% Text
Abadi MT Condensed Light 6.15% 6.15% Text Image
Univers 6.08% 6.08% Text
Verdana Ref 5.90% 5.90% Text
Kabel Ult BT 5.79% 5.79% Text
Helvetica Narrow 4.81% 4.81% Text
News Gothic MT 3.95% 3.95% Text Image
Abadi MT Condensed Extra Bold 3.90% 3.90% Text
Abadi MT Condensed 3.18% 3.18% Text
Optima 2.99% 2.99% Text
Gill Sans 2.43% 2.43% Text
Chicago 2.13% 2.13% Text
Geneva 2.08% 2.08% Text
Helvetica Neue 1.42% 1.42% Text
Futura 1.37% 1.37% Text
FIRSTHOME 0.87% 0.87% Text
04b_21 0.51% 0.51% Text
Gadget 0.15% 0.15% Text

Font stack builder: Start a sans serif font stack

Most common sans serif fonts on Mac systems to 6 February 2010
Font name Installed (%) Sample Image
Helvetica 100.00% 100.00% Text Image
Lucida Grande 99.44% 99.44% Text Image
Geneva 99.15% 99.15% Text Image
Arial 97.46% 97.46% Text Image
Verdana 97.18% 97.18% Text Image
Helvetica Neue 95.49% 95.49% Text Image
Trebuchet MS 94.65% 94.65% Text Image
Arial Black 94.08% 94.08% Text Image
Gill Sans 92.39% 92.39% Text Image
Futura 90.99% 90.99% Text Image
Arial Rounded MT Bold 90.70% 90.70% Text Image
Arial Narrow 90.42% 90.42% Text Image
Optima 90.14% 90.14% Text Image
Skia 90.14% 90.14% Text Image
Tahoma 78.03% 78.03% Text Image
Lucida Sans 67.18% 67.18% Text
Century Gothic 39.01% 39.01% Text Image
News Gothic MT 20.43% 20.43% Text
Abadi MT Condensed Light 19.50% 19.50% Text
Charcoal 17.75% 17.75% Text Image
Chicago 17.46% 17.46% Text Image
Gadget 15.21% 15.21% Text Image
Bitstream Vera Sans 14.55% 14.55% Text
Univers 13.52% 13.52% Text
Calibri 12.69% 12.69% Text
Techno 12.38% 12.38% Text Image
Corbel 12.07% 12.07% Text
Candara 10.84% 10.84% Text
Berthold Akzidenz Grotesk BE 8.57% 8.57% Text
Interstate 6.67% 6.67% Text
TradeGothic 6.67% 6.67% Text
ITC Franklin Gothic 5.71% 5.71% Text
Avenir 4.76% 4.76% Text
HelveticaNeue 3.81% 3.81% Text
RotisSemiSans 2.86% 2.86% Text
Avant Garde 2.79% 2.79% Text
Helvetica Narrow 0.31% 0.31% Text

Font stack builder: Start a sans serif font stack

Most common sans serif fonts on Unix systems to 6 February 2010
Font name Installed (%) Sample Image
URW Gothic L 96.26% 96.26% Text Image
Nimbus Sans L 93.22% 93.22% Text Image
DejaVu Sans 90.68% 90.68% Text Image
DejaVu Sans Light 88.41% 88.41% Text
Bitstream Vera Sans 82.24% 82.24% Text Image
DejaVu Sans Condensed 80.97% 80.97% Text
Lucida Sans 77.87% 77.87% Text Image
FreeSans 72.46% 72.46% Text Image
Liberation Sans 72.12% 72.12% Text
Arial 67.29% 67.29% Text Image
Verdana 61.99% 61.99% Text
Arial Black 61.37% 61.37% Text
Trebuchet MS 60.44% 60.44% Text
Electron 59.42% 59.42% Text
Metal 59.42% 59.42% Text
Nice 59.42% 59.42% Text
MgOpen Modata 34.07% 34.07% Text
MgOpen Moderna 33.63% 33.63% Text
MgOpen Cosmetica 33.19% 33.19% Text
Luxi Sans 30.53% 30.53% Text Image
Helvetica 29.91% 29.91% Text Image
Dustismo 20.29% 20.29% Text
Nimbus Sans L Condensed 15.93% 15.93% Text
DejaVu Sans Extra Light 12.39% 12.39% Text
Lucida 11.84% 11.84% Text Image
DejaVu LGC Sans 7.25% 7.25% Text
DejaVu LGC Sans Condensed 7.25% 7.25% Text
DejaVu LGC Sans Light 7.25% 7.25% Text
Vera Sans 4.87% 4.87% Text
Arial Narrow 0.82% 0.82% Text

Font stack builder: Start a sans serif font stack

Font stacks for print style sheets

Our main interest is to build reliable font stacks for screen rendering, but CSS allows us to specify a different font stack to print Web pages. The most reliable way to apply print media style sheets is to use the media attribute on the style sheet link element. The selectors you choose and font-family declarations you add to this style sheet will only apply when the page is printed.

<link rel="stylesheet" type="text/css"
      href="/styles/print.css" media="print" />
    

What font combinations would you choose for print? Use the font stack builder to create a print font stack and submit your ideas.

Other CSS font family resources

Article feedback

Your comments on this article will be appreciated, please use the form below to submit your views. If you would like a reply or article update notification, include your email address.

Information: Your email address will not be mis-used. If you include your address you may be sent a personal reply, you will not be added to any mailing list unless you request update notification. Read the site privacy statement for details.

Add this page to your chosen social bookmarking service

Style warning - please read

Home · CSS · Java · Javascript · HTML · Help · Log