The concept of WHY use em as well as to the meaning of an EM is being seriously misunderstood here!
First of, typographically an EM is a unit of measurement equal to that of the width of the UPPER CASE LETTER ‘M’ in any given typeface. As such, the physical value of 1em can vary based on the font, and size of the font in question ( we will revisit this in a minute) as an aside and EX is equal to the x-height of a given font. that last tidbit comes in handy as EM width and ex height are seldom equal in in a typeface.
Now lets dive into the web world.
1EM is equivalent to 100%, so percentages can be used interchangeably with ems ( just divide 100 ).
If that doesn’t help then thing of an EM as a VARIABLE or coefficient. 1EM=100% of the parent element’s font size.
so how does that affect a reset?
Well you have to break it into two parts:
- TYPE
YOU SHOULD NEVER SET YOUR SIZE IN PXs!!! I cant emphasize that enough is not only an accessibility issue, but the web just doesn’t work that way. even a pix itself isn’t a physical measurement. 1px may be 1/72 of an inch in a screen at one resoultion and in another resolution be /144 of an inch in another or 1/288th of inch in yet another ( wow that high res!!!).
So, what to do… well using em (or %) on the body element makes your font size based on the user default font size, and it SCALES automatically along with he user font size preference.
SO the take away here is SCALING. There is NO PX EQUIVALENT for 1em ( even if MOST UA set the default at 16px, not all UAs do this some use 15px others 14px and some 18px and then the actually user can just change that value him/herself)
- ELEMENT SIZE
While with regards to font-size %s and EMs are equivalent, when setting the width of an element only EMs is type related. Same concept as above, 1em= width of the capital letter EM. SO, setting the width of an element in ems will make the element scale proportionally to the size of of the text it contains. The neat effect of this what i call “automatic copy fitting”: your line lengths ( break points) will remain virtually the same regardless on how much you scale your text.
ems were primarily used for IE otherwise it would not zoom.
Yes, that how it started, but generally speaking it’s an accessibility issue that overlaps with design. See what I said about screen resolution Think regular LED Vs retina display using EMsor %s AUTOMATICALLY correct this issue… tho you could also use PTs
I hope this helped clear things up.