What are the advantages of using ems instead of % in CSS?

Question

I understand the advantages of using ems in favor of static measurements like pixels and points, but why do most of the CSS people out there (SO excepted) prefer using ems instead of % values?

Answer 1

For font sizes:

• em and % are both relative to the font size of the parent element (i.e. 2em and 200% always give same result)
• ems have a history in typography (although a CSS em is not the same as a typographic em)
• Browser implementations of CSS have fewer bugs with % than with em

For everything else (e.g. the width of an element):

• em is relative to the font size
• % is relative to the parent element

… so they do completely different things and need to be considered on a case by case basis.

Answer 2

Ems are based on a known and consistent value (the font-size) whereas percentage is based on the size of the container. It's much harder to design and understand CSS when the basis of your dimensions and sizes is changing depending on the context (which element/container you are in).

Answer 3

I would imagine that one reason is that a lot of web designers started out as print designers, and so are used to ems as a unit of measurement. That's certainly the case with me.

Answer 4

Give a page 3-column layout with 25%/50%/25%, give it font which allows for 6 lines of article (16% font-size), with 5 articles per page (20% height)

Now imagine it on an embedded device that has screen resolution of 320x200px