What’s the benefit of using em’s instead of px’s?

[brianatlarge]

What’s the benefit of using em’s instead of px’s?

[ANeuby]

Hi Chris,

You said that the modern browsers can resize px font size values but IE6 and something below can not. So what do you think? In my opinion I think that px values are okay for your own website, but if you create something for business I think the better way is to use em instead of px.

For my opinion I refer to the W3C Counter Global Stats. Okay IE 7 is also widely spreaded but I think its not a big problem to use ems.

bye,
ANeuby

[webwiz]

I have just been struggling with the same dilemma. While it’s not quite true that pixels cannot be resized in IE 6 — they can, but only with difficulty — I found that percentages or EMs are not consistent across browser-land.

Fortunately, all versions of IE give the same results at certain percentage sizes. Since IE is the only browser that won’t re-size pixel-based text, I have decided to use percents for IE, and pixels for other browsers.

FWIW here are the results I came up with (at 96 DPI) —

Points vs. Pixels and Percents

6pt nonpareil 8px 50%
7pt minion 9px 57%
8pt brevier 11px 69%
9pt bourgeois 12px 75%
10pt long primer 13px 82%
11pt small pica 15px 94%
12pt pica 16px 100%
14pt english 19px 119%
16pt columbian 21px 132%
18pt great primer 24px 150%
21pt double small pica 28px 175%
24pt double pica 32px 200%
36pt double great primer 48px 300%

Be aware, though, that 100% in IE is 16 pixels on many PCs, but is 20 pixels on most high-definition laptops like mine. Other platforms, too, may not be running at 96 DPI, so don’t depend entirely on this "100% = 16 pixels" formula.

[vladocar]

Few mounts ago I public Emastic – CSS Framework based on ems. http://code.google.com/p/emastic/
Why I picked ems to be play key part in this Framework?

First better usability if you are using IE6 or Firefox2. Also I think that in Firefox3 text resize is default and you must manually change it in order to resize all page. One thing particularly cool about em’s is by controlling the font-size of body you can resize all the page.

Let’s say you have page like 960 px in ems and the font-size:100% someone comes with 800×600 monitor and by changing font-size:~80% all page size will change.

[constancy]

What is the exact css code to put a background behind a centered div tag? I want to center my website and behind the centered div tag i want to have a plain gray background but i can’t seem to get any codes to work. Please give me the exact codes and where to put them…i dont know if i should put it in a css or right in the page code.
__________
matrimonial

[updated123]

Pixel is a solid unit of fixed size, it is not designed for fonts, which are usually defined in Points. Pixel is a measurment that should never be used for text as it is meaningless for text. It is like measuring weight using inches/centimeters.

Pixel, Point etc are fixed sizes. Some users have poor eyesight, or maybe sit farther away from the monitor. Fixed sizes set the text size to something you choose and not what the user wants or needs. Firefox and Opera will enlarge the text in fixed units, IE6 will not, so the sizes can not be changed for them.

EM and % are both flexible units based on the chosen font and size the user has in their browser, this means each user will see the size as they chose it and not as you chose it. The text size can be changed to fit their wishes/needs as it is flexible.

But that has it’s price, you must create your web site to be flexible as well. Normally you use em/% for text, &/pixel for width of structural elements. However if you create say a menu flexible, then the box holding it must be flexible as well to stretch with it or at larger text sizes it will overspill. So is a case like that you can define the box in em as well so that it grows at the same rate as the em text when enlarged.

[Author]

Posts