Now that IE7 supports pixel font resizing

Is it OK to just use pixels for font sizes?

[AndyA]

I have an older site that needs to have all the font commands removed from the HTML. I've been putting it off because it's a very visual site, and I've found it difficult to maintain the look of the pages using CSS.

One of the things that's held me back is using font size % instead of pixels. So many of the images get messed up if text is not where it should be.

Now that IE7 does support resizing of pixel fonts, what is the concensus about using pixels now? I know points are for printed media, and ems and such just confuse me, but I can do pixel sizing.

Since Microsoft is rolling out IE7 as an automatic update, most people should be using it in the next month or so it would seem, which would make IE6 more rare. Comments?

[piskie]

Consider setting a Standard Font Size for all containers in your external CSS file which you can set in pixels. A search in this CSS Forum is a good place to explore external CSS files and "Standard" ways to impliment global settings.

For example you may set your standard size to 12px.
Then you can define an individual area or block of text using em. So define an area or block of text as 1.0 em and it will display as 12px. Now set it to 1.5 em and your standard 12px will be multiplied by 1.5 resulting in 18px text and so on.

This method is gaining popularity amongst many CSS users.

[Setek]

Except the proportion of IE6 users far outweighs IE7 users.

I believe at a stage where all IE6 users become IE7 users, or at least a great majority, then one should use... absolute relative methods. We can always know every browser will display our base text as 12px, and relatively size upwards/downwards from there.

If you have a base font size as 12px, and relatively use

em

s to size differently from there, IE6 will still not be able to resize any of the text.

Theoretically, when IE6 users become IE7 users, we could just size our fonts absolutely, with the knowledge that all our fonts can be resized if desired, otherwise will display as we want it to.

Until that time, I recommend full relative font sizing, plus workaround for irregular resizing on IE's part:

body { font-size: 100.01%; }
div { font-size: 0.8em; }
div blockquote { font-size: 1.1em; }
...

[Fotiman]

I just use the Yahoo UI Library [developer.yahoo.com]'s Reset [developer.yahoo.com] and Font [developer.yahoo.com] tools. This provides a consistent and cross browser solution.