Because there is no way of determining whether a font specified by a website designer is installed on every computer, font-stacks are defined which provide a system of graceful degradation - ie: if the specified font is not installed, the browser will choose an appropriate replacement. Thus, font stacks are defined as a list of fonts, in order of preference.
body{font-family:Arial, Helvetica, sans-serif;}
In the case above the fonts would be rendered in Arial first, and if unavailable, in Helvetica and as a last resort, in the operating systems default sans-serif.
The so-called core web fonts are those fonts which are installed by default on almost all computers. CSS specifies five basic font types - serif, sans-serif, cursive, fantasy and monospace.
Two of these, cursive (handwriting fonts such as Brush Script and Comic Sans) and fantasy (display fonts such as Papyrus and Curlz MT) are not suitable for body text and should be used for headings and subheadings only, if then.
The remainder form the basis of legible copy on the web. Serif and Sans-serif fonts are most appropriate for body copy, with monospaced fonts being used to represent computer code. Both serifs and sans-serifs can be divided into two sub-categories - wide and narrow.
Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user’s system.― nathan ford, better font stacks
Serif fonts are traditionally considered more legible than sans-serifs, at least in print. The serifs on the letterforms aid the flow of text. On screen the serifs can become a liability, particularly at smaller sizes as browsers attempt to render the extra visual information. Recent serif designs such as Georgia and Cambria have been designed specifically for screen output and do much to address this issue.
The basic font stacks for serifs are as follows -
/* wide serif stack - has a large x-height to aid legibility */
{font-family:Georgia, Palatino,'Palatino Linotype',serif;}
/* narrow serif stack - had a smaller x-height and narrower letters. Useful for fitting more copy.*/
{font-family:'Times New Roman',Times,serif;}
Sans-Serifs lack the tails of serifs and tend to be more geometric in form. They also lack the contrast in stroke which is characteristic of the serif font. This consistency of stroke weight makes sans-serif fonts very useable on-screen, and legibility tends to be superior to serifs at smaller sizes, eg: less than 12px. It should be noted that Helvetica renders very poorly under Windows XP.
Here are the basic sans-serif font stacks -
/* wide sans-serif font stack */
{font-family:Verdana,Geneva,sans-serif;}
/* narrow sans-serif font stack */
{font-family:'Trebuchet MS', Tahoma, Arial, Helvetica, sans-serif;}
Monospaced fonts also known as fixed width or non-proportional fonts, are fonts whose glyphs or letters each occupy the same amount of horizontal space. They are commonly used to represent computer code, and occasionally, to create ascii images (opens in a popup). The css code displayed on this page is set in Courier, a monospaced font.
/* monospaced font stack */
{font-family:'Courier New', Courier, monospace;}
In Summary
The core web font stacks are very limited in their application. The type selections are severely limited by a lowest common denominator approach. This has resulted in a homogenous uniformity in web typography with a near ubiquity of Arial in particular.