Often designers will want fixed font sizes so that the text on the actual size will exactly match their mockups, but The Web is Not Print (see also Pixel Perfect Design Does Not Necessarily Equal Good Web Design). A List Apart has a worked out a good method for sizing text consistently across browsers while maintaining the user’s ability to resize the text to fit their needs.
All you need to do is define a baseline size and line height in the body tag, and then use em’s throughout the rest of the site.
body { font-size: 100%; line-height: 1.125em; /* 16×1.125=18 */ } .bodytext p { font-size: 0.875em; } .sidenote { font-size: 0.75em; }
I usually set the body font-size to “62.5%” which puts the site’s default size at 10px. This way, a setting of 1.2em = 12px. (little easier math)
Ah, that’s a good idea :)