Sent by Paceaux on 25 January 2012 00:12
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 [EMAIL-REMOVED]]
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/
