Years ago I read a book on typography and it didn't click until today that the "em" isn't strictly a horizontal measurement in CSS. I'd never thought that hard about it until today. I was naturally concluding that "em "was a horizontal measurement and "ex" was vertical - and that either could be used as relative measurements. I'd never thought otherwise until today.
I read the CSS2 spec this afternoon, and learned that the em is really an "em square" and the square is how font-size is determined. http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html So out of new-found ignorance, I have questions: 1. If em is really the "em square", and ex is strictly an "x", then am I right to conclude there is not a relative horizontal measurement? 2. Since the em is a square, width of the glyph affects line-height, right? 3. Since "ex" isn't an "ex square", body{font-size: 2ex} sets the width of the glyph's the same as its height, correct? 4. Is this the reason that body{line-height: 2ex} is shorter than body{line-height: 1em}? Since font-size is always a square, then "em" seems appropriate when the typeface is more squared. Therefore: 1. If the typeface is wider than it is tall, it seems that I should use body{line-height: 2ex} rather than body{line-height: 1em} or body{line-height:1}. 2. If the typeface is taller than it is wide, then it seems that I should use{letter-spacing:-.5ex} This morning I totally understood font-sizing. Now I don't know anything. Please share any insights you have. </email> <signature id="paceaux"> Frank M Taylor http://frankmtaylor.com @paceaux </signature> On Jan 24, 2012, at 3:28 PM, Tim Climis wrote: >> From my this, it really visually appears as if the em is not an "m" or an >> "M" in >> even the most plain typeface. That's when the text is centered. If it's left >> or >> right aligned, you can fit in two more "m". > > As has been discussed before in this thread, em is not a horizontal measure. > It is a vertical measure, and is defined as the size of the font. > > Directly from the CSS 1 spec (just to show that it's always been defined this > way - at least in CSS) "ems, the height of the element's font" > http://www.w3.org/TR/CSS1/#units > > The CSS 2.1 spec gets more precise, particularly in regard to x-height. > http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#length-units > > It was (a really long time ago, and only a really long time ago *in print*) a > measure of the width of a capital M. It has been (and is defined in the CSS > spec as) the font height for quite a while. > >> more interestingly, I looked at the "computed size" in Chrome, and it >> reported that the div had a calculated size of 140px. >> > > That's not interesting at all. That's expected. The font-size is 14px (you > set it to that). 1 em is the font-size. So 10em would be 14px x 10=140px. > > ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
