In CSS you can change a fairly wide range of things relating to fonts. These you will use regularly:
body {
font-family:Verdana;
font-size:12pt;
font-style:italic;
font-weight:bold;
}
You should remember that the font colour is set by the color property.
Font family
The vital thing to remember about fonts in Web pages is that they will only work properly if the user has the right font on their system. You might love Bauhaus 93 but if the user does not have it they might see almost any other font instead (the browser picks one it likes).
These fonts should be on every computer and so should be safe to use:
Yes, there are NO fonts which are guaranteed to work right. There are some which are considered to be standard but even these have their problems:
- Times New Roman, Georgia, Andale Mono, Arial, Arial Black, Century Gothic, Impact, Trebuchet MS, Verdana, Comic Sans MS and Courier New (may not be installed by default on Linux systems due to licensing issues)
- Helvetica, Courier and Times (will probably not be on Windows systems)
The safest bet is to name a range of fonts at least one of which should be on any system like this:
body {
font-family:Verdana, Helvetica, sans-serif;
}
The last bit is a safety net. If neither Verdana or Helvetica exist on the system then another sans-serif font will be used. Sans serif fonts have no fiddly decorations on the letters so are cleaner. Serif fonts have little additions on the ends of the letters which is supposed to make them easier to read. You can also have monotype fonts which space the letters out (as with the code examples on these pages):
body {
font-family:Courier, "Courier New", monospace;
}
If there is a space in the font name you need to use quotes as above. You can have any number of fonts listed so that if the first is not available the second will be used and so on.
This page suggests some suitable fonts for Web use but don't be afraid to use others as long as you include at least one alternative from both lists above as well just in case.
Font size
This can be set using:
- pixels (e.g. 20px;) but Internet Explorer may not resize this text properly for visually impaired users
- ems (1em) fixes that problem but the size of the em is based on the default font for the browser (often 1em = 16px)
- percent (90%) which sets the size relative to the default size but is a bit easier to understand than em for most people
body {
font-size:1.2em;
}
The first method results in an absolute font size which might be important for your layout. The second two set a size relative to your user's preferences (or their browsers defaults) which is more accessible to all. Use relative where possible.
The choice between em and % is harder but em is probably better. If you use em for fonts you can also then use it to size other things. For example imagine a dropdown menu with entries in it a set width of 100px. Now image the user increasing the size of the default font so that the text no longer fits in your wonderful menu. Instead set the width as 8em and the menu width increases as base font size increases.
Font style
Italic is the only option you are likely to want to use.
body {
font-style:italic;
}
Font weight
This can be set with words or numbers:
- 100
- 200
- 300
- 400 or normal
- 500
- 600
- 700 or bold
- 800
- 900
Also available are "lighter" and "darker" which set the font-weight relative to the parent element (for example if a paragraph is inside a DIV with a weight of 800 then "lighter" would mean 700).
body {
font-weight:bold;
}
