Welcome to the MacNN Forums.

PianoMan · Mar 12, 2005, 12:04 PM

I'm a bit confused about the font-size property in CSS. I was defining the font of certain elements using pixels, but read in Eric Meyers ON CSS that this is a bad idea as it leads to accessibility problems. On this advice i switched to defining a font size for the body as small and then used percentages to adjust certain element sizes.

Now this looked great in firefox until I started viewing my design in differing web browsers, such as safari, omniweb, ie, etc. It seems as if different browsers interpret the percentage of a font size differently, which seems crazy, and screws up the look i hope to achieve. I thought that maybe it was interpretating the property font: small, differently, so i changed the global size to pixels and used percentages, but it still looked off.

Because of these problems I've gone back to defining the certain elements purely by pixels, and it looks great (the same) in all the different browsers, but am a bit worried and confused as eric meyer warns against this, but a different book i have XHTML & CSS bible actually recommends this approach.

Basically I'm wondering whether defining my font size by pixels will cause any wierd problems in the future or whether I can get away with it?

Thanks.

eggman · Mar 13, 2005, 01:43 AM

Originally posted by PianoMan:
Basically I'm wondering whether defining my font size by pixels will cause any wierd problems in the future or whether I can get away with it?

Theoretically, defining font sizes in pixels will cause you to have infinitesimal text if you were to send a web page to one's printer. In practice, I've never ever seen that happen. And if that was a worry, one could define a style sheet for print that addresses the issue by redefining in terms of points, for example.

I personally use pixel size as a font metric all the time because it does yield the most consistent, predictable results.

PianoMan · Mar 13, 2005, 05:48 AM

thanks for the reply. I think I'm going to stick with pixel size for now as it gives my page a consistent look in different browsers.

I might try and make a change if I figure out how to get consistency using percentages or ems etc.

registered_user · Mar 13, 2005, 06:41 AM

I've had problems with that too. Relative font sizes are inherited, so if a <body> has a font size of .8em and a <p> has a font size of .5em, you get .8 / .5 = .4em What's really annoying, is Safari and Firefox's differences. I haven't been able to quite nail it down to an exact thing yet, but I've noticed that .8 and .75 can make a huge difference in those two browsers. The bottom line is that I find that I get a lot more surprises when I used em sizes.

Anyhoo, the only problem with using pixels sizes is that WinIE can't resize that type. WinIE can only resize type set with relative sizes like smaller keywords, or percentages, or ems. Other than that, there's nothing wrong with using pixel sizes, indeed if your style sheet is for screen, pixel sizes make good sense. Unless you specficially need to address low vision users who aren't smart enough to switch to a more accommodating browser than WinIE, don't worry about it. While WinIE is popular, it is obsolete, and the only way to get that message across to its users is to stop giving yourself a headache to pander to crap browser. It's one thing to make sure your layout works in IE, it's another to give yourself a headache over font sizes.

PianoMan · Mar 13, 2005, 07:33 AM

Originally posted by registered_user:
I've had problems with that too. Relative font sizes are inherited, so if a <body> has a font size of .8em and a <p> has a font size of .5em, you get .8 / .5 = .4em What's really annoying, is Safari and Firefox's differences. I haven't been able to quite nail it down to an exact thing yet, but I've noticed that .8 and .75 can make a huge difference in those two browsers. The bottom line is that I find that I get a lot more surprises when I used em sizes.

Anyhoo, the only problem with using pixels sizes is that WinIE can't resize that type. WinIE can only resize type set with relative sizes like smaller keywords, or percentages, or ems. Other than that, there's nothing wrong with using pixel sizes, indeed if your style sheet is for screen, pixel sizes make good sense. Unless you specficially need to address low vision users who aren't smart enough to switch to a more accommodating browser than WinIE, don't worry about it. While WinIE is popular, it is obsolete, and the only way to get that message across to its users is to stop giving yourself a headache to pander to crap browser. It's one thing to make sure your layout works in IE, it's another to give yourself a headache over font sizes.

thanks for that. it sounds like you were having the same problems i was as i was giving body a font size and changing the font size of my postioned side bar, and it would seem to jump down about 5 pixels more than i required.

One thing is for sure, while learning CSS, I'm gaining a huge hatred for IE that I never had before.

Any book you seem to follow says do one thing for your browsers, but remember to do it totally differently just to accomodate IE.

Millennium · Mar 13, 2005, 07:55 AM

Originally posted by eggman:
Theoretically, defining font sizes in pixels will cause you to have infinitesimal text if you were to send a web page to one's printer.

Actually, the standards are written to avoid this situation. If the medium in which the page is being rendered has a resolution significantly different from 90dpi (such as printers), then a 1px resolution is supposed to be scaled to 90dpi.

This causes problems for Opera on Macs, because they made the -frankly boneheaded- decision that 72dpi is "significantly different", and therefore scale the px resolution on screens as well as printers. That wouldn't be so bad if they scaled all images to match, but they don't. The inconsistent measurement wreaks havoc on quite a few page layouts.

The accessibility issues that Eric Meyer talks about have to deal with IE/Windows. All browsers have methods for you to resize text on a page (except Opera, which actually magnifies the entire page instead). However, there is a bug in IE such that it cannot resize any text whose height has been set in terms of pixels. This is where the accessibility problem comes from.

Finally, a note on font-size keywords: according to the standards, each keyword should be scaled by 50% relative to the ones next to it (smaller or larger). The only browser which actually conforms to this part of the standard is NS4, of all things. The other browsers all ignore it, because that much of a difference gets ridiculous very quickly. Most browsers instead use something around a 20% scaling factor.

PianoMan · Mar 13, 2005, 09:31 AM

Originally posted by Millennium:
Finally, a note on font-size keywords: according to the standards, each keyword should be scaled by 50% relative to the ones next to it (smaller or larger). The only browser which actually conforms to this part of the standard is NS4, of all things. The other browsers all ignore it, because that much of a difference gets ridiculous very quickly. Most browsers instead use something around a 20% scaling factor.

curiously, which approach would you recommend when it comes to sizing fonts? Do you feel there are any significant disadvantages by simply defining them in terms of pixels, apart from the IE resizing bug?

mania · Mar 13, 2005, 08:43 PM

does IE win have the same bug for font size using pt instead of px?

also, you can start with * {font-size: 1em;} and go from there - to minimize the multiplication factor for children.

Millennium · Mar 13, 2005, 09:00 PM

Originally posted by PianoMan:
curiously, which approach would you recommend when it comes to sizing fonts? Do you feel there are any significant disadvantages by simply defining them in terms of pixels, apart from the IE resizing bug?

Usually, I use either em or % units. Neither is perfect, but they get the job done. With any luck, IE 7.0 (supposedly due this summer) will fix the bugs.

IE doesn't have trouble resizing fonts defined in point sizes, however there are other issues which you should be aware of. Among other things, while pixels are only supposed to scale in certain cases, points are always supposed to scale to a specific real-world size (not that this ever works right, since there are no major resolution-independent GUIs). On Macs, 1pt usually equals 1px, because Macs assume 72dpi screen resolution and there are 72 points in an inch. On Windows, however, 1pt is assumed to be slightly larger than 1px. This can do interesting things to your layout if you're not careful, because you can't lay out anything relative to your bitmapped images.

Actually, that's not quite true; you can size all your images in terms of points. However, this can lead to cumbersome CSS, and all of your images will be scaled to different sizes on Macs and Windows besides, to the point where one or the other is almost guaranteed to look bad.

Millennium · Mar 13, 2005, 09:02 PM

Originally posted by mania:
also, you can start with * {font-size: 1em;} and go from there - to minimize the multiplication factor for children.

You can, but it's redundant. em is a relative unit, so the condition you describe is essentially assumed as the default anyway.