CSS font stacks, developer FAQs & web standards

Your banner ad here

Better font stacks

Font survey results

Font questions?

Find a font?

Fonts & foundry links

Get noticed

Place your text ad here.

WestNIC provides reliable web hosting services

Free software downloads and drivers download resources

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 14 August 2010
Font name Installed (%) Sample Image
Tahoma 99.90% 99.90% Text Image
Microsoft Sans Serif 99.71% 99.71% Text Image
Verdana 99.71% 99.71% Text Image
Arial 99.66% 99.66% Text Image
Trebuchet MS 99.32% 99.32% Text Image
Lucida Sans Unicode 98.79% 98.79% Text Image
Arial Black 98.35% 98.35% Text Image
Franklin Gothic Medium 98.25% 98.25% Text Image
Estrangelo Edessa 95.44% 95.44% Text
Mangal 95.10% 95.10% Text
Tunga 94.91% 94.91% Text
Gautami 94.86% 94.86% Text
Latha 94.86% 94.86% Text
Shruti 94.81% 94.81% Text
Raavi 94.72% 94.72% Text
Arial Narrow 89.05% 89.05% Text Image
Century Gothic 88.22% 88.22% Text Image
Kartika 87.98% 87.98% Text Image
Vrinda 87.98% 87.98% Text Image
MS Reference Sans Serif 72.86% 72.86% Text Image
Arial Unicode MS 65.78% 65.78% Text Image
Lucida Sans 65.63% 65.63% Text Image
Calibri 65.10% 65.10% Text Image
Candara 64.81% 64.81% Text Image
Corbel 64.76% 64.76% Text Image
Franklin Gothic Book 62.29% 62.29% Text Image
Franklin Gothic Medium Cond 61.80% 61.80% Text Image
Franklin Gothic Demi 61.75% 61.75% Text Image
Eras Demi ITC 61.66% 61.66% Text Image
Eras Light ITC 61.46% 61.46% Text Image
Franklin Gothic Demi Cond 60.35% 60.35% Text Image
Franklin Gothic Heavy 60.35% 60.35% Text Image
Arial Rounded MT Bold 55.07% 55.07% Text Image
Segoe UI 54.97% 54.97% Text Image
Gill Sans MT 53.66% 53.66% Text
Gill Sans Ultra Bold 53.66% 53.66% Text
Gill Sans MT Condensed 53.22% 53.22% Text
Gill Sans MT Ext Condensed Bold 52.74% 52.74% Text
Eras Medium ITC 52.69% 52.69% Text
Gill Sans Ultra Bold Condensed 52.54% 52.54% Text
Eras Bold ITC 52.50% 52.50% Text
Tw Cen MT Condensed 52.30% 52.30% Text
Tw Cen MT 52.25% 52.25% Text
Tw Cen MT Condensed Extra Bold 51.96% 51.96% Text
Berlin Sans FB 50.36% 50.36% Text
Berlin Sans FB Demi 49.44% 49.44% Text
DokChampa 45.71% 45.71% Text
Euphemia 45.71% 45.71% Text
Kalinga 45.71% 45.71% Text
Microsoft Yi Baiti 45.71% 45.71% Text
MS Gothic 40.04% 40.04% Text
MS UI Gothic 38.58% 38.58% Text
GulimChe 38.54% 38.54% Text
MS PGothic 38.44% 38.44% Text
Gulim 38.15% 38.15% Text
Dotum 38.10% 38.10% Text
DotumChe 38.10% 38.10% Text
SimHei 37.81% 37.81% Text
Eurostile 20.99% 20.99% Text
Bitstream Vera Sans 18.76% 18.76% Text
Helvetica 7.42% 7.42% Text
Univers 5.96% 5.96% Text
Verdana Ref 5.82% 5.82% Text
Kabel Ult BT 5.77% 5.77% Text
Abadi MT Condensed Light 5.28% 5.28% Text Image
Helvetica Narrow 4.94% 4.94% Text
News Gothic MT 4.17% 4.17% Text Image
Abadi MT Condensed Extra Bold 3.49% 3.49% Text
Abadi MT Condensed 2.81% 2.81% Text
Optima 2.42% 2.42% Text
Gill Sans 2.28% 2.28% Text
Chicago 2.13% 2.13% Text
Geneva 1.94% 1.94% Text
Helvetica Neue 1.65% 1.65% Text
Futura 1.36% 1.36% Text
FIRSTHOME 0.97% 0.97% Text
04b_21 0.53% 0.53% Text
Gadget 0.19% 0.19% Text

Font stack builder: Start a sans serif font stack

Most common sans serif fonts on Mac systems to 14 August 2010
Font name Installed (%) Sample Image
Helvetica 100.00% 100.00% Text Image
Lucida Grande 100.00% 100.00% Text Image
Geneva 99.47% 99.47% Text Image
Arial 97.63% 97.63% Text Image
Verdana 97.63% 97.63% Text Image
Helvetica Neue 95.78% 95.78% Text Image
Trebuchet MS 94.72% 94.72% Text Image
Arial Black 94.20% 94.20% Text Image
Gill Sans 93.14% 93.14% Text Image
Futura 92.08% 92.08% Text Image
Arial Rounded MT Bold 91.29% 91.29% Text Image
Skia 91.03% 91.03% Text Image
Arial Narrow 90.50% 90.50% Text Image
Optima 90.24% 90.24% Text Image
Tahoma 81.53% 81.53% Text Image
Lucida Sans 77.04% 77.04% Text
Hiragino Kaku Gothic ProN 75.00% 75.00% Text
Hiragino Kaku Gothic StdN 69.64% 69.64% Text
Hiragino Maru Gothic ProN 69.64% 69.64% Text
Century Gothic 40.11% 40.11% Text Image
Heiti SC 39.29% 39.29% Text
Heiti TC 39.29% 39.29% Text
Adobe Heiti Std 33.93% 33.93% Text
Adobe Kaiti Std 33.93% 33.93% Text
Abadi MT Condensed Light 24.80% 24.80% Text
News Gothic MT 24.54% 24.54% Text
Calibri 17.15% 17.15% Text
Corbel 15.30% 15.30% Text
Candara 13.98% 13.98% Text
Chicago 13.72% 13.72% Text Image
Charcoal 13.46% 13.46% Text Image
Bitstream Vera Sans 12.66% 12.66% Text
Univers 12.66% 12.66% Text
Gadget 11.61% 11.61% Text Image
Techno 11.08% 11.08% Text Image
Berthold Akzidenz Grotesk BE 7.78% 7.78% Text
TradeGothic 6.67% 6.67% Text
Avenir 6.11% 6.11% Text
ITC Franklin Gothic 5.56% 5.56% Text
Interstate 5.00% 5.00% Text
HelveticaNeue 3.89% 3.89% Text
RotisSemiSans 3.89% 3.89% Text
Avant Garde 1.85% 1.85% Text
Helvetica Narrow 0.26% 0.26% Text
URW Grotesk T 0.26% 0.26% Text

Font stack builder: Start a sans serif font stack

Most common sans serif fonts on Unix systems to 14 August 2010
Font name Installed (%) Sample Image
URW Gothic L 97.57% 97.57% Text Image
Nimbus Sans L 94.33% 94.33% Text Image
DejaVu Sans 91.49% 91.49% Text Image
DejaVu Sans Light 90.43% 90.43% Text
DejaVu Sans Condensed 83.09% 83.09% Text
Bitstream Vera Sans 77.51% 77.51% Text Image
FreeSans 74.11% 74.11% Text Image
Lucida Sans 73.21% 73.21% Text Image
Liberation Sans 72.79% 72.79% Text
Arial 69.00% 69.00% Text Image
Verdana 65.35% 65.35% Text
Arial Black 64.74% 64.74% Text
Trebuchet MS 64.13% 64.13% Text
Electron 46.09% 46.09% Text
Metal 46.09% 46.09% Text
Nice 46.09% 46.09% Text
MgOpen Modata 31.25% 31.25% Text
MgOpen Moderna 30.88% 30.88% Text
MgOpen Cosmetica 30.51% 30.51% Text
Luxi Sans 27.66% 27.66% Text Image
Helvetica 23.10% 23.10% Text Image
Dustismo 21.74% 21.74% Text
Nimbus Sans L Condensed 13.97% 13.97% Text
DejaVu Sans Extra Light 10.29% 10.29% Text
DejaVu LGC Sans 9.57% 9.57% Text
DejaVu LGC Sans Condensed 9.57% 9.57% Text
DejaVu LGC Sans Light 9.57% 9.57% Text
Lucida 9.12% 9.12% Text Image
Vera Sans 4.04% 4.04% Text
Arial Narrow 0.60% 0.60% Text

Font stack builder: Start a sans serif font stack

Web font classification

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

Web font survey and sampler

Contribute to the survey and discover the new Web safe fonts.

Web font foundations

Font jargon: CSS font family glossary

Find fonts: Anchor Points: Font foundries & sources

Get the sampler font code: Sampler.css

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