problem using em's for font size

[waveform]

I would love to use em's for font size, since it's the standard and is supposed to play well with mobile devices. Perhaps I'm not understanding something here, but em's seem counter-intuitive in a rather big way.

My problem is this.. usually a DIV tag surrounds an area of text, in which are things like P tags, other bits like float boxes, etc. Think of a magazine article layout. Simple example:

<div class="someinfo">
_ <h1>Here's Your Info</h1>
_ <p>Some test goes here</p>
_ <div class="floatypanel">
_ _ <h1>floaty panel heading<h1>
_ _ <p>some text in a float panel</p>
_ </div>
</div>

Assume all these font sizes are specified in em's. Now, if I want to reduce the size of the text in the floaty panel, I can change

.floatypanel p { font-size: 0.8em }

This makes it 80% of whatever is defined in any *parent element* - which could be the "someinfo" DIV or, if none are defined, then it's the BODY tag.

Let's say I want to reduce the text in the outer DIV, but leave the floaty panel text *unchanged*. So I change:

.someinfo p { font-size: 0.8em }

This is where I can't stand (or understand) em's. If the base font size was defined at the BODY level, by setting an em size for the "someinfo" DIV, I've now changed the size of everything inside it - so the floaty panel is now 80% of 80% of the base font size. So I have to go and adjust all inner em sizes that are affected by setting a size on an outer DIV.

So, to me, this is just a PITA to work with - especially when a client wants to change things now and then in very particular ways. It makes more sense to me to have a separate style sheet for a mobile device, rather than design a web site to be all things to all people.

What are other people's thoughts on this? Em seems to be an academic ideal, but not very practical for web site designs in which elements need to moved from time to time, often changing their place in the tag hierarchy and hence their relationship to parental font sizes.

Is the use of em really something to strive for, or are their better strategies, like the use of px/pt and simply use multiple style sheets if needed?

[D_Blackwell]

It makes more sense to me to have a separate style sheet for a mobile device,

That's what media="handheld" is for. Using CSS to completely change HTML presentation appropriately. Same as if you wanted the page to be printable, you'd add another stylesheet with media="print". Comparable to the Zen Garden experiment - using CSS to control differing outputs of presentation.

For handheld display, everything needs to be scaled down, the non-essential removed, and the presentation linearized, IMO.
..............................

I set html, body {font-size: 100%;} as a default for everything and then adjust as necessary. Setting the reference point to anything else is bound to cause problems later.
..............................

Just set:
.floatypanel p, .someinfo p {font-size: .8em;}

So I have to go and adjust all inner em sizes...
If there is a cascade issue, then there are probably too many nested containers with differing font-size: - a problem to be sure, but an HTML structure issue, not a CSS problem; not an em problem.
..............................

I use em for almost everything because they scale as a percentage and are not fixed. They are a functional ideal for my purposes. Now that pretty much all browers zoom most all contents of a page pretty reliably, I would say that it is less critical. Pages also don't break apart nearly as much with much improved zoom features. Nevertheless, set a font-size: to 15px and then compare display an on 800 x 600 monitor to 1600 x 1200. Not pretty.
.............................

I may use pt in a print sheet, but have found to generally not be necessary.

[waveform]

Thanks, it's always good to know what conclusions other people have come to through experience.

So, with alternative style sheets for different presentation devices, the point (pardon the pun) of using em's is perhaps less about scaling to different devices, and more about scaling to the user's preferences on their screen.

Given, as you say, most browsers now scale fairly nicely even when using px's, the only issue left to be addressed by em's is that one you raised about using px in different resolutions.

Nevertheless, set a font-size: to 15px and then compare display an on 800 x 600 monitor to 1600 x 1200. Not pretty.

Isn't that true of em's as well? I just did an experiment where 3 paragraphs on a page were set to 16px, 12pt and 1em respectively. They all looked the same in every resolution - all small in a higher resolution, all ways the same size as each other and always zoomed exactly the same way (this is Firefox 2 btw).

So I still don't really see the benefit of em's. In fact I had a vague notion that using 12pt would stay roughly the same size (visually) in any resolution, as the definition of a pt in print media is 1pt = 1/72 inch or something like that. But in practice that's not the case.

In the browser, 12pt = 16px = 1em and they all behave pretty much the way, except that em's (being like "percentages") are relative to their container's settings - which makes em's not worth the fiddling IMO, unless I *specifically* want an area of text to scale in proportion to a container, in which case I'd use % not em.

Am I missing something here? It seems, in practice, using em's just makes things more complicated for no real benefit?

[D_Blackwell]

Isn't that true of em's as well?

In part, yes, because screen sizes and resolutions are pretty well maxed out, at least until small screens and lower resolutions drop away, which will be no time soon. Even so, resolutions have reached a point where nobody can read anything without zoom and one almost has to design with a base font-size: of maybe 150% or more to present text that can actually be read on a good quality monitor. That's pretty much a minimum on a large high-res monitor (I am zooming up pages all day long.) However, this would be gigantic at a lower resolution. I make sure that everything is pretty nicely readable on the most common couple of resolutions and stick to the middle ground.

You're question probably deserves a more academic answer that I cannot provide. I would not design in px or pt for screen.

Designs that stand up to a lot of zoom are now absolutely required. The improvement of zoom features has solved a lot of problems from the browser side. One does not have to be as nearly as watchful of the design and markup.

[swa66]

CSS3 has media queries:
[w3.org...]

It allows you to load different CSS depending on e.g. the size of the viewport:
[webmasterworld.com...]

And small size (in pixels) screens aren't all that likely to go away soon: think iphone and the like ...

But most modern browsers have excellent zoom features.

[waveform]

And small size (in pixels) screens aren't all that likely to go away soon: think iphone and the like ...

They're still something like VGA or less, I think iPhone is 480x320? So they will be a separate case, as opposed to PC screens, very few of which will be 800x600 nowadays in the mainstream.

I'm designing sites to ~1000 pixels in width now, which is such a huge relief after years of working with the ol' 770 site width as lowest common denominator. Those extra 230 pixels make a lot of difference! :)

Since the res difference is now quite big, between handhelds and PCs, the latter really needs completely different presentation where possible, not just smaller text sizes.

I wonder if CMS's will start to cotton onto that and allow the design of handheld versions of templates, which get swapped in when such a device is accessing the site? That would be nice.

Maybe a new HTTP request header should be invented, which is simply the resolution of the display device. Given so many devices are going to access the net, that would be SO handy. Then conditional loading of stylesheets based on resolution thresholds...

[swa66]

Those media queries do what you seek to do (and e.g. safari on the iPhone supports them).
So you could change your 3 column layout to be just one column if the viewport is small.

Remember also that people -myself included- who use really wide screens mostly run their browser not full screen, but only less than half of it
and 1920px/2 is less than 1024px ...

Those 770px are as far as I'm concerned still _very_ valid.