I'd be careful using ems for your font sizes. I ran into an issue where I had nested bullet lists within a bullet list and the font got progressively smaller. For example, if the first

-Posted by huxley on February 14, 2003 12:30 PM

huxley is right, em's can be tricky, but only if you use css incorrectly.

putting any em measurement on a base element (like TD or DIV) will basically kill a site because of the multiplicative effect they have (on some browsers). However, if you are really using CSS in the purist method, you should only be putting font-size on elements with text, and you shouldn't be putting anything in those elements except text. E.G., don't put a font size on a UL, put it on an LI. If you have nested lists, use a different class for LI's containing UL's.

Also, consider looking at %. Its similar to em, but behaves just a little differently on some browsers. I switched to em's a couple years ago but I am now switching to % because it seems to be a little more forgiving in some cases.

Good idea getting away from px though. So many sites use it because the programmers there are lazy, and this widespread abuse has caused caused several browsers (like Mozilla) to intentionally break the recommendation and allow resizing of these fonts.

If you want to see a size using em exclusive (for font-size) check out my link below.

-Posted by Eric on February 14, 2003 02:23 PM

Cleaner and brighter is good. Improvements in contrast are a plus.

I also like the little picture on the side.

I tend to use font size names in anything that needs to be resized... they're roughly equivelant to the font sizes in standard HTML and allow resizing.

On the other hand, I use px a lot, too, at the office. It's safer if certain people who have their default font sizes set to 4x can't break the layout just by viewing... better that they complain about it being hard to read than us having to redesign an entire site so it looks right in (and perhaps only in) giant text....

It'll be interesting to see how the em concept works. I've not tried that yet except when I was first learning CSS, and it didn't work very well then. (IE 4 days)

-Posted by JC on February 14, 2003 03:27 PM

The CSS in 'take three' uses em's only, and I don't see the incremental cascading that Huxley mentioned (but I have seen that behavior elsewhere).

I'll do my best to follow Eric's guidelines, but so far, attaching em to the body and doing inline em definitions hasn't results in anything too messy.

/me treads lightly...

-Posted by Dan on February 14, 2003 03:46 PM

I've yet to see a really awful em implementation, and take_three looks just fine. So long as you're aware that some browsers will depict the text slightly smaller or larger (a minority admittedly), then you're good to go.

-Posted by Paul on February 14, 2003 03:50 PM

ARGH! JC, why?

"better that they complain about it being hard to read than us having to redesign an entire site so it looks right in (and perhaps only in) giant text.... "

Don't you see how fundamentally anti-internet that is? So what if your site looks funny when the font is big, if someone is visually impaired they are hardly going to complain that your logo is misplaced, but you can be sure you lost a reader/customer if they can't read the text. They are already running at low-res, high-contrast, probably overriding your stylesheets, so forget about how it looks when someone messes with it, and focus on keeping them happy.

Yes, I know clients can be dumb and expect it work fine if the reader changes the size, so explain what I just said to them. If they still have a problem forget pixels entirely, use em for everything (including images). Then changing font size effectively becomes a zoom and your design is still intact. (this is actually a pretty cool exercise anyways).

-Posted by Eric on February 14, 2003 04:43 PM

Ah, Eric... I guess you've never worked for a large corporation where one man in a high position can arbitrarily destroy an entire project beyond all possibility of redemption, causing months of wasted effort and thousands of dollars of lost revenue, simply because he doesn't like how the layout looks on his monitor in netscape 4 with the fonts cranked up to 30 point.

Suffice it to say, I do. And I deal with a marketing department who is only now, after 3 years of nagging at them, beginning to become flexible enough with designs that I can even BEGIN to think of doing such a thing.

Sure, I'd LIKE to do it the 'right' way, (and as I noted, I generally DO use a scalable solution) but I also like to be EMPLOYED... and this is occasionally dependent upon managing idiosyncracies.

If someone IS overriding our stylesheet, then they have no problems. He simply has his default font set to 30 points. He also had his monitor set too dark, which is why our website is a less pleasant shade of green closer to lime than forest, because the original correct shade looked black on his monitor. And HIS was right, and we have the stone tablets to prove it.

In short, the big gorilla pisses farthest. The little monkeys try not to drown.

-Posted by jc on February 14, 2003 05:46 PM

OK, I just redid my blog using ems... and yeah, I ran into the same issue Huxley mentioned, because I had the font size specified in several locations, making the page unreadable. I cleared them out, applied .6em to the full page, and for some reason had to go in and specifically apply a size to the calendar, and I found I had to use 1em there, because it was in relation to the original .6em, and .6em there displayed as (presumably) .36 of the default text.

I wonder if it would be worthwhile to use ex instead of em... maybe you could avoid using decimals then.

-Posted by jc on February 14, 2003 06:24 PM

Ex is not a good choice, its not supported that well and is somewhat inconsistent. If you don't like em, use %. Its basically equivalent (i.e. .50em = 50%) and to my knowledge works as well, or better, than ems.

Applying relative font-size to the body element is a quick but limiting approach. Keep in mind that em measurement is not a correctable measure, i.e setting something to 0.50 and then an element within to 2.0 does not yield 1.0. It does at base font size, but when you change font size in IE, it adds some number, say 0.25 to the base size. So now your 0.50 is 0.75, your 2.0 is 2.25 and your net result is now 1.68, not 1.0. You can see how bid a problem this gets 10 or 12 levels deep.

The safest way to use em (and % for that matter) is to ONLY apply size for elements that only contain text. Then you avoid the multiplicative effects and you can safely assume things will Look Right.

Don't even get me started on CSS font keywords. These are so heinously inconsistent I would rather write a site that generated PDF instead of HTML (yes I have done this).

Re: your previous post, I actually work exclusively with large companies (most Fortune 100) so I can honestly say that the situation you described is unfortunate, but rare. Someone that obtuse does not usually stay around very long, and its your job to make everyone aware (in a subtle manner) of what damage this guy is causing. If things are so 19th century at your company that it just won't change, do yourself, your family, and your health a favor and get the hell out. I can tell by your blog that you are (at minimum) above average on the clue scale, and people like you can find better jobs eventually.

-Posted by Eric on February 14, 2003 07:13 PM

I can certainly comiserate on the ignorant boss thing (not in my current employ tho, I'm reallt referencing previous clients) and have had to mangle interfaces to keep the dollars comin' in.

Leaving the company as a solution to the problem is a little 'baby and the bathwater' imho and is dependant on too many factors.

Getting out of situations like that can be a liberating experience though. Too bad the tech jobs market still blows (although, I'm doing ok where I am right now and have been doing some useful work).

2 cents.

-Posted by Dan on February 14, 2003 11:49 PM

" Someone that obtuse does not usually stay around very long, and its your job to make everyone aware (in a subtle manner) of what damage this guy is causing"

He's been there since before I was born, and will probably be there long after I leave. 3rd highest position in the corporation. Not my direct boss, who's great. He's rather like a grue. Randomly kills when the situation allows for it. We just be sure to carry extra lamp oil wherever we go.

And many of his arbitrary decisions have been good ones in the long run... just... not all of them. And there's no appeal process, really.

But in the next year, we'll redesign the secondary website using up-to-date standards... xhtml, css2, css positioning instead of tables, and so on... maybe even a little flash here and there. And if that goes well, in the following year we'll redo the main one, run the whole thing from a database backend, and again use all the aforementioned tools... and let them resize all they want, the design will flow around it. We hope.

And yeah, Dan, leaving the company would be somewhat ridiculous. They pay well, they have good benefits, they treat me well, I work with good people... I'm not going to leave because they dare to ignore some of the recommendations of the W3C. I'll leave when I decide I can support myself with my own business, or when I get to know the guy who offered me twice as much to come work for him a little better. Hey, I'm not stupid... above average on the clue scale, even. :-) (just teasing, Eric.)

-Posted by jc on February 15, 2003 12:17 PM

FWIW, em's suck. I went back to px.

-Posted by Dan on February 16, 2003 12:31 AM