Scalable Text and CSS Best Practices

[rogerd]

I've got a large site that uses CSS for all text formatting. Some users are complaining about the font size, although most seem happy. We have 90%+ IE users, and they aren't able to resize the text in their browser when it is specified in the style sheet in pt or px.

I tried completely removing the size specification from the CSS, but the "medium" setting is enormous and even the "smallest" setting is probably larger than some users would choose.

In a perfect world, I'd like to "suggest" a size that could be resized by the user. Inserting font tags seems kind of a backward step, though.

Are user-selectable style sheets the only solution to this dilemma? This would involve some significant recoding that I'd prefer to avoid.

I've experimented a bit and found that on this site specifying .8em seems to result in a fairly pleasing "medium" size and allow quite dramatic resizing by the user, but the fact that this is really a percentage specification makes me wonder what kind of weird situations I might run into if I use it. Thoughts?

[SuzyUK]

rogerd..

IE cannot handle ems very well (hence the reports from your users?) unless you specify the root font size as a percentage. If you don't that's where you get this weird variation between huge and tiny on resize.

Suggestion, general practice is that you try something like this if you have a container/wrapper element available:
body {font-size: 100%;}
<container> {font-size: 0.8em;}

or if no wrapper/container element available:
body {font-size: 80%;}
then if are using em's further in your document already, you can just leave them or alternatively just use percentages throughout, instead of em's

both ways should be very easy to implement, with very little change to the CSS

Suzy

[rogerd]

The thing I find a bit confusing is that it seems percent and em are really intended to modify an inherited size. When one specifies .8em for the body (which is what seemed to work fairly well for me), it's not clear what that .8 modifies, and whether in some browsers or under some conditions it might produce a weird display.

With the .8em setting, the resizing effect is quite extreme compared to an HTML font size. The "normal" font looks fine, but the "smallest" font looks rather like small gray lines on the page. And the "largest" is enormous, though possibly useful for the visually impaired.

[rogerd]

You are right, SuzyUK... even though ems are supposed to be percentages, specifying a percent seems to result in less size volatility in IE when users resize. Good tip!

(It still begs the question, "80% of what?" :))

[SuzyUK]

80% of... the users default setting, so you see you are still only suggesting a size ;)

Suzy