Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
125 lines (71 sloc) 7.11 KB

Font Stacks

Different Web safe fonts, font stack combinations and fallbacks, and typography classifications and definitions.

Here you will find recommendations for:

  1. Font stacks that you can copy and use in your project.

  2. Web safe fonts, i.e. fonts that are most common on most versions of Windows, Mac, and Linux.

    You can copy these and feel confident using them as your overall default font stack, or as a fallback font stack for a more interesting typeface.

  3. Typefaces that go well together, say one font for your headers and another contrasting font for your body.

  4. Mobile fonts.

  5. Font classifications and definitions.


  1. 06/26/08 - Better CSS Font Stacks

    One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use.

  2. 08/15/08 - Web fonts can be nice (honest)

    ...but it strikes me that we are still not using the few fonts we can play with to their full potential. So today Ladies and Gents, I present the case for these, somewhat under-used gems...

  3. 01/08/09 - 8 Definitive Web Font Stacks Article

    The font stacks listed here are grouped together by the universal font that forms the base of that stack. A designer can therefore decide on a typographical look for their site, grab the appropriate font stack, and tweak it to suit their needs.

  4. 09/22/09 - Guide to CSS Font Stacks: Techniques and Resources

    CSS Font stacks are one of those things that elude a lot of designers. Many stick to the basic stacks Dreamweaver auto-recommends or go even more basic by just specifying a single web-safe font.

  5. 03/19/12 - Complete Guide to Pre-Installed Fonts in Linux, Mac, and Windows

    Web fonts are gaining in popularity now, but they can still be a bit of a challenge to use. Copyright issues often require the use of a third-party font service, which can be risky and expensive.The good news is that all major operating systems come with a variety of fonts that you can use to create your font stacks.

  6. 04/21/12 - Font Stacks

  7. 06/18/12 - The 10 Best Script and Handwritten Google Web Fonts

    A good script is hard to find. I’m extremely picky when it comes to this particular area of typefaces and tend to hate most of what I see. With this post, you can skip the work of sorting through the crap and cut straight to the awesome scripts that are readable, attractive and perfect for your site.

  8. CSS Font Stack

    Web Safe and Web Font Family with HTML and CSS code.

  9. Revised Font Stack

    Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts.

Web Safe

  1. 2010? - 16 Gorgeous Web Safe Fonts To Use With CSS

    I have gathered together a nice resource list of stunning web safe fonts that you can use with CSS stylesheets.

  2. 12/12/10 - Web Safe Fonts Cheat Sheet v.3

    This is the third major overhaul of the Web Safe Fonts Cheat Sheet, which now includes examples of fonts suitable for the CSS @font-face property, along with revised CSS font stacks, font installation breakdowns by operating system, and some of the new Google Font API fonts.

  3. Common fonts to all versions of Windows & Mac equivalents

    Here you can find the list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as "browser safe fonts".

  4. CSS Font Stack

    A complete collection of web safe CSS font stacks

  5. Combined font survey results

    Is that font Web safe? Code Style font survey results show the most common fonts on Windows, Mac and Linux computers to help you build a Web safe font stack.

  6. CSS Web Safe Font Combinations

    The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.

Font Classifications and Definitions

  1. Typefaces, like most things, are made up of constituent parts.

    Typefaces, like most things, are made up of constituent parts. It is the characteristics of these parts that gives typefaces their character.

  2. Font Factory

    Fonts fall into logical categories, e.g. Serif or Script etc. But within a category, there are many subtitles, so we have assigned each font a specific sub-category that best describes the unique elements of a font. Each of the primary categories below have further categories to explore.

  3. Type Classifications

    Adobe typefaces are organized in the Type Classification pop-up menu according to a simplified version of the internationally recognized system adopted by the Association Typographique Internationale (ATypI).

  4. Typeface Classifications

    Serif and Sans Serif. A serif is a small projection that finishes the end of a stroke of a letter. Sans is an early French term based on a Latin word that means without.

  5. What are the different categories for fonts?

    You can browse fonts in the following categories...