In the labs we have over 2,500 fonts to choose from.
On the web, fonts are a bit more complex.
In order for a typeface to show on our websites, our visitors have access to that typeface on their computer. The easiest way to access a typeface is if it's already installed on the computer.
Most people don't ever intentionally install typefaces on their computers. Instead, they simply rely on the typefaces that get installed with the operating system and other software.
After comparing typefaces across different operating systems and common software packages, you are left with a very small subset of typefaces, referred to as web safe fonts. These are typefaces that you can be reasonably sure are installed on all computers.
Below is a list of "web safe fonts". Each typeface is marked up as itself. Unavailable typefaces will display as the Courier New typeface.
Safe
Mostly Safe
Not Safe
Other font charts:
Lists and examples of common web safe fonts:
As graphic designers, we always want to have control of the font being rendered.
When specifying fonts for web pages, we use a system of "fallbacks", called a font stack.
The font stack allows us to:
This allows us to be sure that we have some control over what font is displayed in our website. Even if the user doesn't have our first choice font, they have some font that we chose.
The font-family property allows us to specify several fonts we might like to use.
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}The font stack breaks down like this:
font-family SyntaxGeneric Font Families are defined in the CSS Specification as a last resort method. Here is the explanation from the CSS Specification (Note: "user agent" means browser):
Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent in the worst case when none of the specified fonts can be selected. For optimum typographic control, particular named fonts should be used in style sheets.
All five generic font families are defined to exist in all CSS implementations (they need not necessarily map to five distinct actual fonts). User agents should provide reasonable default choices for the generic font families, which express the characteristics of each family as well as possible within the limits allowed by the underlying technology.
Here are the descriptions of the five generic font families:
In practice, cursive and fantasy fallbacks are rarely used because the font that may be used is unpredictable.
When selecting your font stacks, you should choose several fonts that are the same type of font (serif, sans serif, slab serif, script, etc.).
You should also consider the spacing and x-height of a typeface. They can look drastically different if not chosen carefully. Additionally, some typefaces will take up much more space than others, causing your layout to differ significantly depending on the typeface rendered.
They should be listed in order of your preference and also by prevalence.
Your second-to-last font choice should be installed on most systems (see the chart at the top of the page).
The last choice is mostly just there to make sure the right classification of font shows up if all else fails. We hope to never get to this point, but just in case.
Here are some articles with more information on appropriately choosing your font stacks.
Even though we can use a wide variety of typefaces by taking advantage of the @font-face property, which we'll cover later, we still need to be aware what the common system fonts are for a few important reasons: