Font sizes in px in modern browsers (is it good, what about 120 dpi?)

Question

I used to use the 'font-sizes in ems' approach (mostly for IE users) and some CSS hacks to have the same font size on systems where screen is set to 120dpi. I know that forcing the same font size in 120 dpi is not good in usability terms, but this is the way I should get it done.

I'm curious is it good to switch to pixels instead of ems, as far as I see all my target browsers (IE7,8; FF 3.6, Chrome 5, Opera 10.6, Safari Win) support full page zoom.

I have the following restrictions:

• No IE6 support
• Font size should be the same in 96dpi and 120dpi (I usually have many graphics that requires that text should be in some particular size).

Should I switch?

Thanks in advance!

Answer 1

I generally recommend to stick w/ em- or %-based font-sizes to avoid headaches related w/ the pixel based approaches. However, you might want to use px for the base font size and adjust it w/ CSS3 media queries to your needs (particularly querying for the resolution should help you).

The downside of this method is that, as so often, IE 7 and 8 will need yet another hack as IE is the only browser in your list currently not supporting media queries. hth & good luck!