Font Families and Relative Sizing

Font families first. You're probably all aware of the global font families. But, just in case, you should always add a system-default font to the end of the font-family tag. You have three to choose from:

serif will display the system's default Times-style font. Serif fonts are very good for long paragraphs of text. They are easy on the eye and easy to read. They are especially graceful for italics.

sans-serif are for the Arial/Helvetica derivatives. A bit less traditional than Serif fonts. Good for attention -grabbing headlines placed to catch the eye and be read quickly.

monospace fonts for code blocks or other fixed-font uses.

As long as you degrade to one of these font-families, you can be sure that your site's font won't be too far from the one you picked.

Font sizing is equally important, if not more so. If you fix your fonts at 10px, you give a very hard time to anybody with impaired sight, or who is viewing your site in a different environment to the one you coded it in. Projectors and mobile phones are the two extreme examples. You need to let users decide if they want to increase or decrease the size of the font. It is, after all, their choice. You're building your site for them - so give them an option. If they can't read the text on your site, why should they come back? It's useless to them.

Use relative sizes for your fonts. But remember, relative sizes are inherited. In your CSS, begin by setting the initial size:

body, html{
   font-size: 100%;
   font-family: "trebuchet ms", tahoma, arial, sans-serif;
}

After that, you can increase or decrease the % size for paragraph text, headers and so-on. Personally, I pull the paragraph text down to about 90% - but that's something easily overridden by the user.