Relative Font Sizing Functionality
Owen Briggs came up with a technique that involves specifying the global font size in the body tag's CSS as 76%. This 76 is a magic number that seems to work the same way across all browsers. For every other style after the body style, specifying EM values for the font size of each element results in those elements being sized relative to the current font size of the user's browser. That means that if a user increases or decreases the font size of the page manually, all elements will get bigger or smaller relative to their original design. Go ahead, resize the default browser font size for this page. As you can see, all the headers are still bigger than the paragraph text relative to the original difference in size. This gives the users, not the webmasters, ultimate control over how big the text should be without compromising the stability or look of the page. Read more about the technique at Owen Briggs's Sane CSS Sizes.
Relevant HTML
Not Applicable
Relevant CSS
/* Note: This CSS was edited to only show relevant parts. */
body
{
font-size:76%;
}
#content p
{
font-size:1em;
}
#content h1
{
font-size:1.8em;
}
#content h2
{
font-size:1.3em;
}
etc.