On Jan 25, 2012, at 9:13 AM, Paceaux wrote: > 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
No, not really. 'em' as an unit of measurement is defined here (along with 'ex'): http://www.w3.org/TR/CSS21/syndata.html#em-width. The 'em square' mentioned in your link above means that the size of the font increases proportionally (glyphs are scaled in both directions). Both increase or decrease the size of text based on the font-size of the root element and ultimately based on the font-size expressed by the user preferences. '1em' declared on the root element (<html>) means - match the font-sixe in the user pref, usually 16px by default. > 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? They are both units for vertical and horizontal measurement. > 2. Since the em is a square, width of the glyph affects line-height, right? No. The width of glyphs doesn't come into play here. But font-size may affect line-height, yes. > 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? Again, no. Those css units do not affect the width of individual glyphs – iow, they do not stretch of compress glyphs (if you want to do that, you'll need to look at the 'font-stetch' property, which is poorly supported and will only work if the font-family has a narrow/condensed/... face [1]). They scale the overall font-size of the text. body{font-size: 2ex} would make the glyphs both taller and wider. > 4. Is this the reason that body{line-height: 2ex} is shorter than > body{line-height: 1em}? 1em is not equal to 2ex for most fonts. > 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} To both questions: why ? [1] This test case should work correctly on Firefox 3.6 + running on OS X 10.5 and newer (with some bugs on 10.7.2) : http://dev.l-c-n.com/_temp/font-stretch1.html OS X only because it uses fonts installed by default on OS X. A similar test case could be created to work across platforms with Gecko based browsers using an appropriate family through @font-face Philippe -- Philippe Wittenbergh http://l-c-n.com/ ______________________________________________________________________ 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/
