WordPress Default Theme and CSS Font Size Tomfoolery

body { font-size: 62.5%; }

The assumption is that this will reset 1em to 10px. Kids, don’t try this at home. Or at the office. It does not work. Well, it may work some of the time, but it is not guaranteed and it is not reliable. In the words of Dan Cederholm, author of the wonerful Bulletproof Web Design, “it is not bulletproof.” And it is not bulletproof because different computers have different resolutions. Different ppi, pixels per inch, on screen. Not to mention, most browsers allow users to change font size at will. Trying to set font size to a fixed measure of pixels or points for screen display on a web page will only result in crap. Give it up. Font size, like all of CSS, is officially and in most implementations, merely a suggestion anyway.

Use relative sizes only for fonts, like ems. Never assume that it will be a specific size, but rather a size relative to the size of other page elements. Design web pages with relative sizes in most situations. Layout can use some absolute sizing, but even then, you need to have either a horizontal or vertical (usually better) flexibility in your content boxes. Remember, many users can and do change font sizes often. It is only a matter of command++ / command+- (OS X) or ctrl++ / ctrl+- (win) to increase or decrease the font size. You may never do it yourself, but I know many folks do, and I do it from time to time. One reason you should do it, find out how many increases or decreases in font size will break your page design.