November 26, 2004

10:43 AM

How do you ensure consistent yet accesible font sizes across platforms using CSS?
I have a site where I set the SIZE attribute of the BODY tag to 80%, and then set all the other font sizes using ems, which in theory should give me consistent fonts while allowing people to change the font size (which is why I don't just use pixels for the whole thing).
Unfortunately, in IE 5, this results in way too large fonts.
What's your method?
posted by signal to (7 comments total)

My method? A stiff drink and a milddle finger pointed towards Redmond.
posted by pwb503 at 11:12 AM on November 26, 2004

as far as i know, the best compromise is to use pixel sizes. or use javascript to detect the browser and then handle things correctly for that particular browser.
there's a page on the web somewhere that discusses this in detail... (which i say because iirc that's where i read that pixel sizes was the best you could do).
posted by andrew cooke at 11:37 AM on November 26, 2004

yeah, i missed the bit where you said about not using pixels. sorry...
posted by andrew cooke at 12:00 PM on November 26, 2004

http://thenoodleincident.com/tutorials/typography/ should guide you on your way to decent and accessible typography.
posted by SemiSophos at 12:06 PM on November 26, 2004

Are you using tables, by any chance?

The IE bug (emulating Netscape 4's) that makes font sizes not inherit into tables also makes the unrelated font-size mis-scaling bug crop up in tables. The %-fix also does not inherit into the table.

So if you set a font-size in 'em' inside a table, the percentage based font in body will do nothing. To fix both this and the broken inheritance in IE5 in general, use the rule:

table { font-size: 100%; }

Or simply set all your fonts in '%' instead of 'em'.

This is only an issue where the use sets the Text Size option to something other than 'Medium'.
posted by BobInce at 1:21 PM on November 26, 2004

BobInce: awesome! I didn't even know about that bug, much less how to solve it. That did the trick, my site now looks the same in all versions of IE.
posted by signal at 1:31 PM on November 26, 2004

i use multiple stylesheets with CSS hacks to differentiate between browsers - IE uses smaller default font sizes than Mozilla browsers, so size="small" in IE = "microscopic" in Mozilla (and a lot of designers forget this, making huge pages ful of unreadable tiny text - TEST YOUR CODE, YOU BASTARDS!!! oops sorry)

anyway the handy dandy stylesheet switcher (found at www.alistapart.com, under "css") handles cross-browser text resizing, via a cookie and alternate stylesheets. using the CSS hacks within stylesheet ensures that medium in Mozilla is the same as medium in IE.

and the whole middle finger towards redmond, yeah that helps too.
posted by caution live frogs at 2:19 PM on November 27, 2004