RE: Proper font-size calculation with ems

> I would love to take all our font sizes in 
> http://ocw.mit.edu/OcwWeb/style/core.css
> and convert them to ems.

I took a VERY brief look at your CSS code.
I would say that the simplest thing to do is to:

(1) Add the following to your top-level CSS definition:

html { font-size: 100%; /* IE hack */ }
body { font-size: 0.92em; /* 11 point */ }

(2) Convert all current px references to pt multiplying the associated integer value by four-thirds (rounding, or using decimals, as desired).

The reason this works is that even though both px and pt are nominally absolute values, contemporary browsers will scale pt but not px.

It may be the case that with some browsers you achieve the desired scalability just by step (1).

For an authoritative contrary opinion to this advice, please reference:
http://css-discuss.incutio.com/?page=UsingPoints

> The problem I run into is inheritance and nesting. 

I really like working with em, but I have been able to avoid inheritance issues, and my CSS is no where near as complex as yours.  (And I hadn't encountered Patrick's IE hack, above, before recently.)  Specifying em for things like column widths works quite well in my experience, but other nesting can be problematic as you observe.  The problem is confounded because not all browser apply the relative sizing with the same rules.  "Nesting SMALL tags may produce text in a smaller font than with just one SMALL tag, but this is not required by the specs."
http://www.htmlhelp.com/reference/wilbur/font/small.html

Received on Wednesday, 5 January 2005 15:39:09 UTC