This page is premised on setting the base size to 10 pixels instead of 16 pixels.
This is effected by saying
body { font-size: 62.5%; }
resetting the value of an em. Now you can precisely set sizes to known pixels by single-decimal
em values while maintaining scalability.
The down side of this method is that you will have
to make adjustments to account for browser heading differences. MSIE and Gecko/Opera heading sizes will
be different unless you define them yourself—MSIE larger, using the regular size, where Gecko
and Opera use the new em as the basis for sizing headings (see table at bottom).
However, this does not show the quirky
behaviour in Opera as the other scalable method except that xx-small and x-small are still the
same size, em resizing not having any effect on named sizing, nor is there a difference
in how Gecko squeezes points between pixels under OS X. Why does it not surprize me that
MSIE under OS X defeats this method by making most sizes one pixel smaller than
advertised here.
The one problem I've found with this method is curtesy of my computer science PhD
nephew—he sets a minimum font-size of 13px. That means that he rewrites the 62.5%
to 13px and since I commonly use 1.3em (13px) as my regular type size, he sees it as 17px
(1.3em x 13px = 16.9px ⇒ 17px), much larger than needed.
Here h1-6 have been redefined to be the indicated sizes that correspond to the
“standard” sizes (sorry Gecko), based on matching
font size 6 ⇒ heading 1 etc.
Naturally, you may set the size as desired, as has been done on these pages,
where the h1 (“HTML and CSS Standards”) is smaller than the h2 used as a page title.