Suggestion for Font-Sizing in default themes

Topics: Developer Forum, User Forum
May 28, 2008 at 4:29 PM
Edited May 28, 2008 at 4:56 PM
**Often referred to as the "Clagnut" method, or the "62.5% reset", or "62.5% hack"**

If not already familiar with this... basically, instead of fixing all font-sizes in pixels, the concept is to set the body font-size at a percentage (of browser default) and then set all font sizes to ems.

Which, besides making IE6's fonts resizeable, makes all fonts scalable just by changing the body's font-size percentage.  The 62.5% value makes the conversion, from pixels to ems, "equate" by moving a decimal one place, like:

10px = 1.0em...   
14px = 1.4em... etc.

For thorough explanations, how and why, arguments for and against, see:

or, google "fonts ems 62.5%" or ???

This has become the font-sizing method of choice by many, and considered "best practice" by some css pros.  

Though, I'm suggesting that the default themes included in mwpsk be converted to use this method, it's easy to convert your themes:

Go thru and insert the "font-size:  62.5%;" into each theme's BODY css definition in textstyle.css.  Then, using your favorite means; visual studio, topstyle, whatever, you can find/replace the "font-size: XXpx" in the .css files with related "font-size: X.Xem"... etc. 

The line-heights can also be converted px to ems, as they're relative to font-size. 

I've done this to a set of default themes (though, I've found that a value closer to 70% works for me) and it works.  Adjust your body font-size and everything scales nicely.

Disclaimer... Using ems there can be issues where nested ems can be compounded (IE), but I haven't come across any yet, in these themes.