There are two types of properties associated with text:
- Font properties relate to the size and appearance of collections of type including family, size, bold, italic, etc.
- Text properties relate to how the text is treated; is it underlined? is there letter spacing? what is the line height?
Font Properties
The CSS syntax to specify fonts is:
body { font-family: "The Monkies Ate My Soul", Tekton, "Jazz Let", cursive; }
In developing pages and sites, designers often get carried away when they learn the syntax for specifying the font to be used.
"Wow", they think... "now my pages will look this way for everyone".
But, unless the user has The Monkies Ate My Soul installed on their computer, the browser will default to the next font, Tekton. If Tekton is not available, it will default to Jazz LET, and so on until it gets to the generic collection name, in the case above, cursive. MUCH time can be spent thinking about this when planning your design.
Default Fonts
The simplest way to specify fonts is to use one of the generic collection names. Every device can display fonts from these default collections, so if you know you want a sans-serif font for your headers, but don't want to hassle with all the options for all the platforms, you can just write the CSS specifying a default collection sans-serif. All elements that descend from the BODY (in the example below) will also inherit this same font choice unless you specify something else.
When specifying a list of fonts, you should always include a generic font name at the end of the list.
Here is a list of the generic collection names available:
serif
sans-serif
monospace
fantasy
cursive
Fonts Available on Macs and PCs
There are LOTS of fonts available. The problem is that all web-based type use fonts installed on the user's computer. You can't be sure that all Mac users, for example, will have the same fonts - some are installed with software packages, some may be download, some may be obtained illegally (gasp!), who knows???!!
To avoid problems, developers should stick to fonts which are common on most platforms. Here is a list of (relatively) safe (but boring) fonts. Also check the Resources page for links to other resources that help with this question.
Arial | Webdings | Tahoma |
Arial black | Georgia | Times New Roman |
Arial Narrow | Ompact | Trebuchet MS |
Century Gothic | Monotype | Verdana |
Comic Sans MS | Palatino | Franklin Gothic |
Courier New | Symbol |
When creating font lists, place the name of the preferred font you prefer first. Follow it with other acceptable fonts and always end the list with a generic font!
Note that if the font has more than one word in the name, that name should be inside quotes! If you leave out the quotes, the user agent may ignore that particular font. For embedded and linked CSS, either single or double quotes will work. You can mix Macintosh and Windows fonts in a declaration so that your pages will look pleasing on both platforms.
The default generic fonts should never be quoted.
In the example above, the font will be set to Arial (on a PC) and Geneva on a Mac if it doesn't have Arial installed. This setting will be inherited by all the other tags because the BODY tag is a top-level element. So, with one line, you have set all the fonts in your entire document!