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:
| Font family | Your browser | Sample image |
|---|---|---|
| 'sans-serif': normal fonts without serifs | ||
| 'serif': normal fonts with serifs | ||
| 'monospace': fixed-width fonts | ||
| 'cursive': fonts that emulate handwriting | ||
| 'fantasy': decorative fonts, for titles, etc. | ||
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… |
The CSS Fonts Module has more properties to specify special styles (for fonts that provide several variants), in particular the font-variant property has many more values.
Created 17 Jan 2001;
Last updated