Posted by Steve Pugh on 11/14/06 10:39

K A Nuttall wrote:

> Get a book called Bulletproof Web Design.

And throw it away if what you wrote is any indication of what it
contains.

> I recommend setting BODY to font-size:medium*,

Which is the default.

> then your page wrapper DIV to font-size: 62.5%.

What if you don't have a page wrapper div because you don't need one?

So we've set the basic font size to less than two thirds of the user's
chosen default. Not a good start.

> That sets a base font size of 10px.

Maybe, some of the time on some browsers. On my main browser 62.5%
would be 8.75px if my minimum font size setting didn't bump it up to a
slightly saner 12px.

> Then set sections within the page using percent or ems,
> like 120% (=12px), or 1.5em (=15px).

Or just do this wothout any of the preceeding rubbish and without
assuming that a % or em value will consistently give the same pixel
size.

> That way, you can predict roughly how big the fonts will be to the
> nearest pixel,

No you can't. Really you can't.

> and user-agents can zoom in or out to their hearts' content.

They could anyway. It takes effort on the developer's part to stop text
zooming.

> Try not to design with fixed height containers, unless you allow for
> expanding text.

This is good advice, though you could omit everything after the comma.

> Setting blocks using line-heights in percent or ems
> allows for fonts to expand without overlapping.

No. Don't set line-height in a unit at all, use bare numbers. If you
set it in ems then it will be inherited at that size and won't respect
any font-size changes in child elements.

> (* old IE messes up medium, so you need tan hack to fix it)

IE5 (and 6+ in quirks mode) treats the browser default as being
equivalent to small. So medium is one step bigger than default. With a
hack or conditional comment to set small instead of medium you get back
to where you started, i.e, the browser default. Doing nothing at all
has the same effect.

Steve

[Back to original message]