CSS font stacks, developer FAQs & 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: monospace

Monospace fonts have a fixed width like typewriters and often have strong angular or block serifs. Monospace font faces are often used code samples and have a simple, functional font style. Use the CSS font family name monospace.

The most common monospace fonts

The only monospace font that is likely to be present on all systems is Microsoft Courier New, which is relatively common on all platforms. However, the original Courier font on which it is based is more common on Mac and Unix family systems. Andale Mono is also available on Windows, Mac and Unix family systems, but is far less common.

Monospace font names may indicate the style of lettering, with suffixes "console", "typewriter", "mono" and "fixed".

Most common monospace fonts on Windows systems to 14 August 2010
Font name Installed (%) Sample Image
Courier New 99.71% 99.71% Text Image
Lucida Console 99.18% 99.18% Text Image
Consolas 64.81% 64.81% Text Image
OCR A Extended 60.79% 60.79% Text Image
Lucida Sans Typewriter 45.86% 45.86% Text Image
Bitstream Vera Sans Mono 24.04% 24.04% Text
Andale Mono 3.88% 3.88% Text Image
Andale Mono IPA 3.49% 3.49% Text
OCRB 3.01% 3.01% Text
Monaco 2.71% 2.71% Text
Monotype.com 0.97% 0.97% Text Image
Terminal 0.15% 0.15% Text Image

Font stack builder: Start a monospace font stack

Most common monospace fonts on Mac systems to 14 August 2010
Font name Installed (%) Sample Image
Monaco 99.47% 99.47% Text Image
Courier 98.94% 98.94% Text Image
Courier New 92.61% 92.61% Text Image
Andale Mono 91.03% 91.03% Text Image
Lucida Sans Typewriter 77.04% 77.04% Text
Menlo 39.29% 39.29% Text
Consolas 15.04% 15.04% Text
Bitstream Vera Sans Mono 13.98% 13.98% Text
Monotype.com 0.53% 0.53% Text

Font stack builder: Start a monospace font stack

Most common monospace fonts on Unix systems to 14 August 2010
Font name Installed (%) Sample Image
Nimbus Mono L 96.66% 96.66% Text Image
DejaVu Sans Mono 94.12% 94.12% Text Image
Courier 10 Pitch 80.00% 80.00% Text
Bitstream Vera Sans Mono 78.72% 78.72% Text Image
FreeMono 74.82% 74.82% Text Image
Liberation Mono 73.53% 73.53% Text
Lucida Sans Typewriter 73.21% 73.21% Text Image
Courier New 67.48% 67.48% Text
Andale Mono 62.61% 62.61% Text
Courier 36.78% 36.78% Text Image
Luxi Mono 27.66% 27.66% Text Image
Fixed 16.41% 16.41% Text Image
DejaVu LGC Sans Mono 10.43% 10.43% Text
Lucida Typewriter 9.56% 9.56% Text
Terminal 7.60% 7.60% Text
Vera Sans Mono 4.04% 4.04% Text
Monaco 1.79% 1.79% Text

Font stack builder: Start a monospace 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

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