Font families After the color, the font is probably the most basic property of a page. On this page I won't show any "tricks," but I will show the range of font variations that CSS allows. Since not all fonts are available on all computers (there are thousands of fonts, and most are not free), CSS provides a system of fallbacks. You list the font that you want first, then any fonts that might fill in for the first if it is unavailable, and you should end the list with a generic font, of which there are five: serif, sans-serif, monospace, cursive and fantasy. The following table shows examples of various fonts (your browser may not know all of them) and you can see what your browser does with each of the five generic ones: 'sans-serif': normal fonts without serifs Arial, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog Helvetica, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog Gill Sans, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog Lucida, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog Helvetica Narrow, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog sans-serif The Quick Brown Fox Jumps Over The Lazy Dog 'serif': normal fonts with serifs Times, serif The Quick Brown Fox Jumps Over The Lazy Dog Times New Roman, serif The Quick Brown Fox Jumps Over The Lazy Dog Palatino, serif The Quick Brown Fox Jumps Over The Lazy Dog Bookman, serif The Quick Brown Fox Jumps Over The Lazy Dog New Century Schoolbook, serif The Quick Brown Fox Jumps Over The Lazy Dog serif The Quick Brown Fox Jumps Over The Lazy Dog 'monospace': fixed-width fonts Andale Mono, monospace The Quick Brown Fox Jumps Over The Lazy Dog Courier New, monospace The Quick Brown Fox Jumps Over The Lazy Dog Courier, monospace The Quick Brown Fox Jumps Over The Lazy Dog Lucidatypewriter, monospace The Quick Brown Fox Jumps Over The Lazy Dog Fixed, monospace The Quick Brown Fox Jumps Over The Lazy Dog monospace The Quick Brown Fox Jumps Over The Lazy Dog 'cursive': fonts that emulate handwriting Comic Sans, Comic Sans MS, cursive The Quick Brown Fox Jumps Over The Lazy Dog Zapf Chancery, cursive The Quick Brown Fox Jumps Over The Lazy Dog Coronetscript, cursive The Quick Brown Fox Jumps Over The Lazy Dog Florence, cursive The Quick Brown Fox Jumps Over The Lazy Dog Parkavenue, cursive The Quick Brown Fox Jumps Over The Lazy Dog cursive The Quick Brown Fox Jumps Over The Lazy Dog 'fantasy': decorative fonts, for titles, etc. Impact, fantasy The Quick Brown Fox Jumps Over The Lazy Dog Arnoldboecklin, fantasy The Quick Brown Fox Jumps Over The Lazy Dog Oldtown, fantasy The Quick Brown Fox Jumps Over The Lazy Dog Blippo, fantasy The Quick Brown Fox Jumps Over The Lazy Dog Brushstroke, fantasy The Quick Brown Fox Jumps Over The Lazy Dog fantasy The Quick Brown Fox Jumps Over The Lazy Dog Font styles Most fonts have various styles within the same family, typically a bold and an italic one, often also a bold italic style, somewhat less often a small-caps and in a few cases extra-light/extra-bold or stretched/condensed versions. The table below shows a number of different styles. Unless you have a very rich collection of fonts, many of the rows will be the same. rule serif sans-serif Styles font-style: normal The Quick… The Quick… font-style: italic The Quick… The Quick… font-style: oblique The Quick… The Quick… Weights font-weight: 100 The Quick… The Quick… font-weight: 200 The Quick… The Quick… font-weight: 300 The Quick… The Quick… font-weight: normal The Quick… The Quick… font-weight: 500 The Quick… The Quick… font-weight: 600 The Quick… The Quick… font-weight: bold The Quick… The Quick… font-weight: 800 The Quick… The Quick… font-weight: 900 The Quick… The Quick… Variants font-variant: normal The Quick… The Quick… font-variant: small-caps The Quick… The Quick… Stretch font-stretch: ultra-condensed The Quick… The Quick… font-stretch: extra-condensed The Quick… The Quick… font-stretch: condensed The Quick… The Quick… font-stretch: semi-condensed The Quick… The Quick… font-stretch: normal The Quick… The Quick… font-stretch: semi-expanded The Quick… The Quick… font-stretch: expanded The Quick… The Quick… font-stretch: extra-expanded The Quick… The Quick… font-stretch: ultra-expanded The Quick… The Quick… In CSS3, there is one more style available: 'font-effect' makes the letters look engraved or embossed.