EM versus %

liunx

Guest
I did a bunch of searches and couldn't find what I was looking for... I read a claim that 1em is the same as 100% and did some more searches to see if the claim was true. It seemed that it wasn't a hundred perfect true cas' I read somewhere else that that is only true in the Firefox browser and not true in all the others. 1.2em equals 100% in one browser .8em equals 100% in another browser... (I can't even support the Firefox claim cas' idk for nothing)

I did more and more searches and my answer seems to be "a needle in a haystack"... How is an EM calculated!!!? A pixel is easy, a "computer-dot". Percent is easy, "based on the size of the browser window". EM also seems to be based on the size of the browser window but I can't seem to figure-out what makes % different from EM. What is this mysterious distinguishing factor?EM is the height of the font; the distance between the top of the ascender and the bottom of the descender.Thanks Fang, that will at least point me in the right direction.
If EM is the height of the font, what happens if I try setting the font-size with EM? Does it look at inherit?The font-size (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/fonts.html#font-size-props">http://www.w3.org/TR/REC-CSS2/fonts.htm ... size-props</a><!-- m -->) should be inherited, irrespective of units, but it doesn't always. Tables are an obvious exception in some browsers.w3.org, Is there a better resource!? (rhetorical question) Thanks again!An EM is the width of a capital M. With proportional fonts this is the widest character in the font.And if the letter "M" isn't the widest character in the font, then an EM is the width of the widest character, correct? Or does it look at the chatacter in the "M" slot e.g. wingdings makes a bomb character/image.EM is the height of the font;
An EM is the width of a capital M.
Wait a second here... Is it the height or the width? :confused:i cant remember where, but a while ago i read a good article via google about this, you might want to try another google search. :)I did some searches and it seems that felgall was right -- em is a horizontal measurement while ex is a vertical measurement. I also ran into a cool Image Scaling (<!-- m --><a class="postlink" href="http://www.bigbaer.com/css_tutorials/css.scale.image.html.tutorial.htm">http://www.bigbaer.com/css_tutorials/cs ... torial.htm</a><!-- m -->) technique.Ultimator you are wrong
<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/syndata.html#length-units">http://www.w3.org/TR/REC-CSS2/syndata.html#length-units</a><!-- m -->

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)Ever think that you're all right?The em comes from the typesetting indrustry from long before computers. It was so named because it was based on the size of the capital M within the given font. It is therefore a relative measurement -- relative to the current font size of the current font family being used.

As it has evolved in computerized type display, it has also come to be considered equivalent to the total height occupied by a line of type of a particular font family and font size when no additional leading (line-height) is added.

For practical purposes, the important thing to remember is that an em is directly related to the font size, and that since it is relative, it changes along with any changes in the font size. This can be useful in fluid layouts where you want a given dimension to remain in proportion to the affected text if the user should change the overall font-size via his/her browser's view menu options.

When specifying a font-size, I prefer to use % when I want it to be relative to the base or inherited font size, and use ems for specifying font-size-relative distances for spacing, width, height, etc. I don't know why, I just do. :)The meaning of "em" has changed over the years. Not all fonts have
the letter "M" in them (for example Chinese), but all fonts have a height.
The term has therefore come to mean the height of the font - not the width
of the letter "M."Hakon Wium Lie and Bert Bos (<!-- m --><a class="postlink" href="http://www.w3.org/TR/2003/WD-CSS21-20030915/">http://www.w3.org/TR/2003/WD-CSS21-20030915/</a><!-- m -->) Quotation is from their book CSS: Designing for the web (<!-- m --><a class="postlink" href="http://www.awprofessional.com/bookstore/product.asp?isbn=0201596253&rl=1">http://www.awprofessional.com/bookstore ... 96253&rl=1</a><!-- m -->)
 
Back
Top