HTML and CSS Reference
In-Depth Information
In this instance, the user agent will look through the list of monospaced typefaces one by one,
and use the first one it finds. Since Monaco is commonplace on Macs, Mac users will likely see
code
elements displayed in Monaco. Windows users are likely to see Courier New. If the user
agent finds neither Monaco nor Courier New, it will search for Courier. If none are found, the
user agent will resort to its default font—which may or may not be monospaced.
For this reason, it is a best practice to always end any
font-family
declaration with
a generic font family name. This way, even if none of your specific fonts are found, the user
agent will at least display the selected text in a face of the same classification:
code {
font-family: Monaco, 'Courier New', Courier, monospace;
}
The Typeface Problem on the Web
A limitation of web design that frustrates designers more than any other is the lack of selection
in typefaces. Because (X)HTML content is rendered and displayed on the viewer's end, design-
ers must ensure their sites work properly with only the fonts installed on the viewer's computer
(or other device).
Because of this limitation, it has been a common practice to use only those typefaces that
are preinstalled on both Windows and Mac computers. Sadly, the list of typefaces a designer
can reliably count on to be installed on most computers is quite short. See Figures 9-6 through
9-14 for examples of these font names and classifications.
Figure 9-6.
Arial (sans serif )
Figure 9-7.
Arial Black (sans serif )
