Posted by Steve Pugh on 11/14/06 14:58

K A Nuttall wrote:
> Steve Pugh wrote:
>
> >> 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?
>
> Virtually all my pages use them, so it suits me. YMMV.

The only one I use it on is sfsfw.org where it creates the blue border.
An effect that (when I wrote that stylesheet five years ago) was tricky
to achieve by setting a border on body - it may still be tricky today,
I don't know.

> > So we've set the basic font size to less than two thirds of the
> > user's chosen default. Not a good start.
>
> None of the child containers will actually use that size. It's just to
> make relative font-size calculations easier.

I would have thought that needing to multiply by 0.625 made things more
complex, not less. But I've yet to see a computer without a calculator
app of some sort, so it doesn't really make any difference.

> >> 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.
>
> You lost me there. That sounds like a useful thing to know, if only I
> understood. Can you expand on that please?

Compare the rendering of these two examples:

<div style="line-height: 1.1em">
<p style="font-size: 150%;">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc bibendum libero vitae libero. Etiam dignissim
ante at eros sagittis molestie. Nunc mollis consequat purus. Mauris
suscipit arcu in justo. Cras at nisl. Ut lectus. In tortor ipsum,
pharetra congue, venenatis vel, commodo vitae, elit. Etiam nisl pede,
mattis id, fringilla ac, porttitor et, odio. Morbi laoreet lacus
sagittis mauris. Mauris molestie nulla et nulla. Donec lorem. Aliquam
dignissim lorem eget ligula.</p>
</div>

<div style="line-height: 1.1">
<p style="font-size: 150%;">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc bibendum libero vitae libero. Etiam dignissim
ante at eros sagittis molestie. Nunc mollis consequat purus. Mauris
suscipit arcu in justo. Cras at nisl. Ut lectus. In tortor ipsum,
pharetra congue, venenatis vel, commodo vitae, elit. Etiam nisl pede,
mattis id, fringilla ac, porttitor et, odio. Morbi laoreet lacus
sagittis mauris. Mauris molestie nulla et nulla. Donec lorem. Aliquam
dignissim lorem eget ligula.</p>
</div>

In the first example the line height is 1.1em of the font size of the
div, regardless of what the font size of the paragraph is. In the
second example the line height is 1.1 times the actual font size used
on that line.

Steve

[Back to original message]