In high-resolution print typography, designers enjoy considerable freedom and control over the articulation of this [font size] range. In low-resolution screen typography, designers don't.

- Todd Fahrner

How Do I Size Fonts?

This is one of the most commonly asked questions about CSS. The basic answer is that you use the font-size property. For example:

h1 {font-size: 150%;}
h2 {font-size: 1.5em;} /* same as 150% -- see UsingEms */
h3 {font-size: 18px;} /* a bad idea! see UsingPixels */
h4 {font-size: 12pt;} /* a bad idea! see UsingPoints */
h5 {font-size: 1ex;} /* approximately same as 0.5em */

Part of: UsingFontSize

The more complicated answer is that setting font sizes involves not only the mechanics of doing so, but also the advisability of various approaches. For example, if you set all of your text with pixels, you could prevent many users from being able to resize the text (see the entry ForceFontSize). Some authors argue that text should not be free to be resized anyway, nor should it be based on the user's default font size (which many designers dismiss as being "way too big and ugly"). The flip side of the debate holds that the user's default settings should always be honored, and that while text can be sized, it should be sized relative to the user's settings. This school of thought, which advocates the use of percentage and em-based font-size values, points out the inherent accessibility advantages of relatively-sized text, which can be easily resized by the user.

Both approaches have their strengths and weaknesses, and it is left to the individual to decide which he or she would prefer to use. To assist in making that decision, here are some articles, examples, opinions, and discussions from both sides of the fence:

For more information on the use of points in Web design, please visit the entry on UsingPoints.