CSS Font Size Solutions: How to get there from here.

Update: Start with Tripoli.

Credit where credit is due: http://www.websemantics.co.uk/tutorials/useful_css_snippets/ is a fantastic article, best of class in this area.

How should you size fonts using CSS? Many, many choices, each with many, many problems. Here's an excellent and simple solution, formatted ready to be cut-n-pasted into your CSS. Following that are some links and further explanation:

* {margin:0; padding:0}
/* Margin and padding removed from all elements. Adding border:0 is bad: issues with Opera and input radios/checkboxes. */
html {height:100%; font-size:100.01%} /* Sets the window height. */
body {
min-height:101%;
/* Prevent content jumping on fixed width pages: Min page height greater than window height forces vertical scrollbar display in Netscape/Firefox -- IE ignores this setting. */
font:100.01%/130% Verdana, Helvetica, sans-serif;
/* Set font-size to a percentage preventing a Windows IE "extreme font re-sizing" bug.
Set font-size slightly larger than 100% to repair Opera rounding errors.
Set less than 101% to prevent Safari errors.
130% line-height setting is an easy-to-read spacing.
*/
color:#000; background:#fff;
/* Set general color & background. */
width:760px;
/* If you want a fixed width, this is set for 800 pixel wide browser displays. Usability studies show many 800x600 browsers not maximized, this is a common "real-world" user browser width*/
}

/* Browsers vary top margin on paragraphs/headings:
use bottom margin to separate them from elements below. */
p, h1, h2, h3, h4, h5, h6 { margin: 0 0 1.2em }

If centering in IE, add two extra properties to the body, an extra body setting, and create a "container":
body {
text-align:center;
/* Force IE to centre all content, text re-aligned left below */
margin:0 auto
/* Works for IE6, Firefox, Opera, Safari and Netscape; IE5 and IE5.5 need text-align hacks above and below */
}

body * {text-align:left} /* Resets all text aligns to the left */
#container {width:760px} /* centered content goes inside a div with an id="container"

Tips and Further Discussion

Once the body font-size is stated as a percent, ems and percents are equivalent. But scale elements with percents, NOT ems, because there are still some old AOL users with browsers that do not support ems.

Of course if you use
@import "styles.css";

.. your style sheets are hidden from Internet Explorer v4 and Netscape v4 on Mac and PC.

And if you use:
@import"styles.css"; /* Note no white-space and double quotes */

.. your style sheets are hidden from Internet Explorer versions prior to v5.5 and Netscape v4 series on both Mac and PC.

Also use percentages, NOT ems if you want a dimension to scale with the width of its parent (which can be the browser window).

A collection of great links on related topics:

http://www.websemantics.co.uk/tutorials/

From that list, for displaying code on web pages, see:

http://www.websemantics.co.uk/tutorials/displaying_code_on_web_pages/