Build better CSS font stacks

The font stack builder will help you build a better font stack from scratch, but what if you need a jump start, inspiration, or want to build on tried and trusted CSS font stacks? Start with this selection of pre-built font stacks and customise with your own preferred fonts.

Use the font stack builder links below to preview and adjust the initial font selection, then copy and paste the finished CSS font family declaration into your style sheet.

Most common font stacks

These minimal font stacks are the most common foundation for more elaborate CSS font-family declarations created using the font stack builder. Add your preferred fonts and other fallback fonts to make a font stack that is more robust.

1. Serif font stack based on Georgia
2. Monospace font stack based on Monaco
3. Sans serif with Arial and Helvetica
4. Cursive font stack featuring Bradley Hand ITC
5. Sans serif font stack based on Lucida
6. Serif font stack based on Palatino
   Suggestion: Serif font stack based on Palatino with URW Palladio L
7. Serif font stack based on Times
8. Monospace font stack based on Courier

Tuck's definitive font stacks

This selection is based on Michael Tuck's 8 definitive Web font stacks at Site Point, which is a good guide to the build process for robust, cross-platform font stacks. Tuck presents a set of comprehensive font stacks with good Linux coverage, adapted for the font stack builder below.

Serif font stacks

• Times New Roman font stack
  Cambria, Hoefler Text, Utopia, Liberation Serif, Nimbus Roman No9 L, Times, Times New Roman
• Georgia font stack
  Constantia, Lucida Bright, LucidaBright, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia
• Garamond font stack
  Palatino Linotype, Palatino, URW Palladio L, Book Antiqua, Baskerville, Bookman Old Style, Bitstream Charter, Nimbus Roman No9 L, Garamond, New Century Schoolbook, Century Schoolbook, Century Schoolbook L, Georgia

Sans serif font stacks

• Verdana font stack
  Corbel, Lucida Grande, Lucida Sans Unicode, Lucida Sans, DejaVu Sans, Bitstream Vera Sans, Liberation Sans, Verdana
• Trebuchet MS font stack
  Segoe UI, Candara, Bitstream Vera Sans, DejaVu Sans, Trebuchet MS, Verdana

Monospace font stack

• Slab serif monospace font stack
  Consolas, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Monaco, Courier New, Courier

Ford's better font stacks

Nathan Ford's Better CSS Font Stacks at Unit Interactive takes a carefully considered comparison of font metrics and delivers 21 font stacks honed for paragraph body text and headings in matched pairs. The fallback lists are short with limited Linux coverage; the emphasis is on the font sequence and better-assured continuity of style amongst the alternatives on Windows and Mac.

Sans serif font stacks

Content type	Font stack
Paragraphs	Arial, Helvetica Neue, Helvetica
Headings

Content type	Font stack
Paragraphs	Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana
Headings	Geneva, Verdana, Lucida Sans, Lucida Grande, Lucida Sans Unicode

Content type	Font stack
Paragraphs	Helvetica Neue, Arial, Helvetica
Headings	Helvetica, Helvetica Neue, Arial

Content type	Font stack
Paragraphs	Lucida Sans, Lucida Grande, Lucida Sans Unicode
Headings

Content type	Font stack
Paragraphs	Tahoma, Geneva, Verdana
Headings	Tahoma, Verdana, Geneva

Content type	Font stack
Paragraphs	Trebuchet MS, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial
Headings	Trebuchet MS, Tahoma, Arial

Content type	Font stack
Paragraphs	Verdana, Geneva, Tahoma
Headings	Verdana, Tahoma, Geneva

Serif font stacks

Content type	Font stack
Paragraphs	Baskerville, Times New Roman, Times
Headings	Baskerville, Times, Times New Roman

Content type	Font stack
Paragraphs	Garamond, Hoefler Text, Times New Roman, Times
Headings	Garamond, Hoefler Text, Palatino, Palatino Linotype

Content type	Font stack
Paragraphs	Georgia, Palatino, Palatino Linotype, Times, Times New Roman
Headings	Georgia, Times, Times New Roman

Content type	Font stack
Paragraphs	Palatino, Palatino Linotype, Georgia, Times, Times New Roman
Headings	Palatino, Palatino Linotype, Hoefler Text, Times, Times New Roman

Content type	Font stack
Paragraphs	Times, Times New Roman, Georgia
Headings

Monospace font stacks

Content type	Font stack
Paragraphs	Consolas, Lucida Console, Monaco
Headings

Content type	Font stack
Paragraphs	Courier New, Courier
Headings

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.

Name:
Email:
Was this useful?	Yes, very comprehensive Yes, but lacked important details No, but some parts were good No, very superficial
Reference URL:
Comments:
Do NOT put any URLs here
Join mailing list:	Yes (requires email address) No

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.

NavigationTopics & tools

• Home page
• CSS style guide
  • Web font sampler
  • Font stack builder
• Java & servlets
• Javascript & DOM
• HTML & XHTML
• Help and FAQs
• Site log

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

Copyright © 2000-2010 Philip Shaw, all rights reserved, terms and conditions apply.
Valid XHTML and correct CSS. Last updated 04 May 2010 at 08:32:13 AM BST.
URI: http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml Metadata: RDF