geeze, this morning I thought I knew this stuff. Now I'm lost. I wasn't thinking that the em or the ex stretched the glyph. I understand that the font-size constructs a square out of the measurement, regardless of the type of measurement.
assuming an "m" is 16px wide but 10px tall, it's total space up on the screen is 16sqr pixels, right? That just means that visually, there's more vertical space in the 16 sqr px. Right? assuming the inverse measurements are true, the total space is still 16sqr px, right? These two questions are why I would adjust either line-height or letter-spacing by "ex"; to compensate for disproportionate visual space. So my question now is the difference between "em" and "ex". Is "em" a horizontal measurement and "ex" a vertical? I get that font-size will make both of them a square, but are they relative to x and y axes, respectively? </email> <signature id="paceaux"> Frank M Taylor http://frankmtaylor.com @paceaux </signature> On Jan 24, 2012, at 6:13 PM, Philippe Wittenbergh wrote: > > 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/
