Re: [css-d] I Have a Really Big 'm'
I think we're going around in circles. Here's my existing experiment page: http://www.ghodmode.com/experiments/emsize.html I'm going to do another one with more information. It's a square block, 1em wide and tall, with a lowercase 'm' inside it. I used Javascript (jQuery) to get the width and height of the block and the numbers it comes up with match what Firebug friends say for the computed height and width. It shows that an em is as wide as it is tall, but it's not the size of the letter 'm'. Since the block's width is the same as its height, that shows that em is both a horizontal measurement and a vertical measurement. However, the letter doesn't fit, so an em isn't based on the size of a letter in the font specified... at least not the letter 'm'. more inline ... On Wed, Jan 25, 2012 at 6:28 AM, Tim Climis tim.cli...@gmail.com 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. But a 1em block is a square. It's the same size vertically as it is horizontally. How can it be only a vertical measure, or only a horizontal measure? The problem is, it's not a measure of anything. It's relative to the font size, but none of the letters in the font are necessarily 1em tall or wide. This is the part I didn't understand before. 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 You copied that from the comment in one of the example code blocks, not the actual description of the unit. It still leaves the question: How big is that? What it actually says is The relative units 'em' and 'ex' are relative to the font size of the element itself. It doesn't go on to say how they relate to the font size. 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 The CSS 2.1 spec does make it much clearer by linking to the font-size property definition. So, the 'em' is the font-size. But then it says The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. That makes me ask Huh?! How is it computed? How big is an 'em'?! If they just took that word computed out of there, it would have been easier for me to understand. That's perfectly clear to some of you on this list? What I think it should say is that 1em is equal to the element's font-size. If the font-size isn't defined, the size of the em is equal to the user agent's default font size. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.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/
Re: [css-d] I Have a Really Big 'm'
Ghodmode wrote: It shows that an em is as wide as it is tall, No, it does not. An em is one-dimensional, not two. Philip Taylor __ 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/
Re: [css-d] I Have a Really Big 'm'
Am 25.01.2012 11:04 schrieb Ghodmode: I think we're going around in circles. This matches my impression. It shows that an em is as wide as it is tall, but it's not the size of the letter 'm'. As described in the spec, the em unit is defined as the font size. em is maybe not the best of all possible names for it. In typography, this value is called a mutton (if I found the right translation for German Geviert). But the latin capital M is considered to be about that width, if designed traditionnally with serifs. Some people also talk about M height when they mean the capital height of a typeface. This may increase the confusion. __ 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/
Re: [css-d] I Have a Really Big 'm'
I'm giving up on this topic. After reading the specs numerous times, I'm realizing that the specs themselves are circular. I feel like I'm trying to find out if the chicken or the egg came first. On ems and exes: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#length-units : em: the 'font-size' of the relevant font. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.) ex: the 'x-height' of the relevant font If reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. On font-size: http://www.w3.org/TR/2011/REC-CSS2-20110607/fonts.html#propdef-font-size: On all other properties, 'em' and 'ex' length values refer to the computed font size of the current element. em = font-size = em = font-size = em = font-size === paceaux wants to finger paint /email signature id=paceaux @paceaux /signature On Jan 25, 2012, at 3:04 AM, Ghodmode wrote: I think we're going around in circles. Here's my existing experiment page: http://www.ghodmode.com/experiments/emsize.html I'm going to do another one with more information. It's a square block, 1em wide and tall, with a lowercase 'm' inside it. I used Javascript (jQuery) to get the width and height of the block and the numbers it comes up with match what Firebug friends say for the computed height and width. It shows that an em is as wide as it is tall, but it's not the size of the letter 'm'. Since the block's width is the same as its height, that shows that em is both a horizontal measurement and a vertical measurement. However, the letter doesn't fit, so an em isn't based on the size of a letter in the font specified... at least not the letter 'm'. more inline ... On Wed, Jan 25, 2012 at 6:28 AM, Tim Climis tim.cli...@gmail.com 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. But a 1em block is a square. It's the same size vertically as it is horizontally. How can it be only a vertical measure, or only a horizontal measure? The problem is, it's not a measure of anything. It's relative to the font size, but none of the letters in the font are necessarily 1em tall or wide. This is the part I didn't understand before. 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 You copied that from the comment in one of the example code blocks, not the actual description of the unit. It still leaves the question: How big is that? What it actually says is The relative units 'em' and 'ex' are relative to the font size of the element itself. It doesn't go on to say how they relate to the font size. 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 The CSS 2.1 spec does make it much clearer by linking to the font-size property definition. So, the 'em' is the font-size. But then it says The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. That makes me ask Huh?! How is it computed? How big is an 'em'?! If they just took that word computed out of there, it would have been easier for me to understand. That's perfectly clear to some of you on this list? What I think it should say is that 1em is equal to the element's font-size. If the font-size isn't defined, the size of the em is equal to the user agent's default font size. -- Vince Aggrippino a.k.a. Ghodmode http://www.ghodmode.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/ __ 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/
Re: [css-d] I Have a Really Big 'm'
On Tue, 24 Jan 2012, 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. It may be used for horizontal or vertical measurement, but its definition is based on a vertical measurement, the font-size. -- Chris F.A. Johnson, http://cfajohnson.com/ Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ 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/
Re: [css-d] I Have a Really Big 'm'
I'm giving up on this topic. After reading the specs numerous times, I'm realizing that the specs themselves are circular. I feel like I'm trying to find out if the chicken or the egg came first. That is why Ghostmode started from the first principles and as I see it he wanted to develop it further but now it doesn't look like this will happen. __ 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/
Re: [css-d] I Have a Really Big 'm'
On Tue, Jan 24, 2012 at 3:08 PM, Jukka K. Korpela jkorp...@cs.tut.fi wrote: 2012-01-24 8:23, Ghodmode wrote: So, how big is an ‘em’? I set up a small experiment to tell me just that. I don’t see the point of the blog entry or the experiment. You acknowledged misconceptions. That's the point... to put aside the misconceptions for myself and those with similar experience. http://www.ghodmode.com/blog/2012/01/i-have-a-really-big-m/ The text says ‘Letters aren’t all 1em wide.’ I find that an odd formulation, since _no_ letter is 1em wide. Ya, but we (myself and others who have the same misunderstanding) think the 'm' is 1em wide. Understanding that it isn't is part of the point of the experiment and article. You seem to argue against the wrong idea that em is the width of the letter ‘m’. But that’s not the most common common misconception; people think that em is the width of the _capital_ letter ‘M’. And it is easy to see that these misconceptions are wrong if one just _looks_ at things. Okay. Fair enough. Capital 'M'. However, it still amounts to the same thing... the widest letter in the alphabet. We could probably have used another letter, but that wouldn't have shown the relation to the name of the unit. I hope you're not implying that anyone who didn't understand that the 'M' isn't 1em wide just wasn't paying attention... I mean, I don't care what you say about me, I make lots of mistakes, but you might offend someone ;} What things do you look at to see that 'M' isn't 1em wide? Before I did that experiment page I didn't have anything to look at that showed me a comparison of a 1em block to a single letter. For example, putting ‘M’ or ‘m’ in a 1em by 1em box is quite sufficient. Using any font. I don’t see why you would need Web fonts for this. It's based on the size of the font, so I was worried that it would actually fit within the 1em box. As you pointed out, I haven't been paying attention. So, I wasn't sure that a regular font would demonstrate the point. I wanted a font that was fancy enough to stick out of the block. If I used one of the generic font family names, I couldn't be sure about which font would replace it on the client side. If I used a specific font (I considered Comic Sans MS :) ), I couldn't be certain that it would be available on the client side. I chose to use a web font to get a consistent representation everywhere and because it was sufficiently fancy that I could be confident it would be bigger than its container. Thank you for your helpful and constructive comments. -- Ghodmode http://www.ghodmode.com Yucca __ 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/
Re: [css-d] I Have a Really Big 'm'
Jukka K. Korpela wrote: I find that an odd formulation, since _no_ letter is 1em wide. On what basis do you claim that, Jukka ? Surely not even you have had time to measure every glyph in every font that has ever been invented ... ! But that’s not the most common common misconception; people think that em is the width of the _capital_ letter ‘M’. I think if you replace is by was, it may well be a valid assertion : Knuth wrote (TB, p.~60) In olden days, an 'em' was the width of an 'M', but this is no longer true; ems are simply arbitrary units that come with a font, and so are exes. Philip Taylor __ 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/
Re: [css-d] I Have a Really Big 'm'
I think other comments have kind of addressed that for most of us in this discussion group, we knew that the em isn't one M. Regarding your article, I have a few thoughts: 1. Experiments have results. For the sake of your readers, provide the results of the experiment. 2. explain the experiment. I can see you've bordered out the width and height, but for a reader unfamiliar with em calculation, they won't understand the relationship that pixels will have to it. 3. I'm struggling to understand your thesis or argument. Is it that the em is not the best letter to measure by? Or is it that the em isn't always an em? The statement I have a really big m doesn't support either of the arguments. That's fine if it doesn't, but you should clearly, in the first two sentences, state your argument/thesis. A few other things to consider: em is generally thought as the relative width of the relevant font. The CSS2 spec, however, doesn't say that explicitly. It refers to the em square ex is relative height of the relevant font. Some UAs may base x-height on a measurement between o and the baseline. I've read where the em is calculated based on the default font size. so you may want to rerun the experiment with a default font. Also: I think if you're making the argument that an em isn't always an M, why not also check to see if an ex is an x /email signature id=paceaux Frank M Taylor http://frankmtaylor.com @paceaux /signature On Jan 23, 2012, at 11:23 PM, Ghodmode wrote: I wrote a new blog entry inspired by past discussions on WebDesign-L and CSS-D: I Hava a Really Big 'm' blockquote Contemporary wisdom says that we should use the relative unit ‘em‘ for most, if not all, element measurements in web design. So, how big is an ‘em’? I set up a small experiment to tell me just that. Continue reading → http://www.ghodmode.com/blog/2012/01/i-have-a-really-big-m/ /blockquote I appreciate any comments, questions, or complaints. Thank you. -- Ghodmode http://www.ghodmode.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/ __ 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/
Re: [css-d] I Have a Really Big 'm'
This a curious subject that you've brought up. So to satisfy my curiosity as to the size of an em and an ex, I tried the most boring experiment possible: http://cssdesk.com/aHUQR 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. However, the x is definitely an x and not an X. (at least in Chrome on a Mac) more interestingly, I looked at the computed size in Chrome, and it reported that the div had a calculated size of 140px. Now I really feel ignorant on the subject of font-size calculation. Good job! (that's a compliment, not sarcasm). /email signature id=paceaux Frank M Taylor http://frankmtaylor.com @paceaux /signature On Jan 24, 2012, at 1:06 PM, Paceaux wrote: I think other comments have kind of addressed that for most of us in this discussion group, we knew that the em isn't one M. Regarding your article, I have a few thoughts: 1. Experiments have results. For the sake of your readers, provide the results of the experiment. 2. explain the experiment. I can see you've bordered out the width and height, but for a reader unfamiliar with em calculation, they won't understand the relationship that pixels will have to it. 3. I'm struggling to understand your thesis or argument. Is it that the em is not the best letter to measure by? Or is it that the em isn't always an em? The statement I have a really big m doesn't support either of the arguments. That's fine if it doesn't, but you should clearly, in the first two sentences, state your argument/thesis. A few other things to consider: em is generally thought as the relative width of the relevant font. The CSS2 spec, however, doesn't say that explicitly. It refers to the em square ex is relative height of the relevant font. Some UAs may base x-height on a measurement between o and the baseline. I've read where the em is calculated based on the default font size. so you may want to rerun the experiment with a default font. Also: I think if you're making the argument that an em isn't always an M, why not also check to see if an ex is an x /email signature id=paceaux Frank M Taylor http://frankmtaylor.com @paceaux /signature On Jan 23, 2012, at 11:23 PM, Ghodmode wrote: I wrote a new blog entry inspired by past discussions on WebDesign-L and CSS-D: I Hava a Really Big 'm' blockquote Contemporary wisdom says that we should use the relative unit ‘em‘ for most, if not all, element measurements in web design. So, how big is an ‘em’? I set up a small experiment to tell me just that. Continue reading → http://www.ghodmode.com/blog/2012/01/i-have-a-really-big-m/ /blockquote I appreciate any comments, questions, or complaints. Thank you. -- Ghodmode http://www.ghodmode.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/ __ 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/ __ 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/
Re: [css-d] I Have a Really Big 'm'
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/
Re: [css-d] I Have a Really Big 'm'
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/
Re: [css-d] I Have a Really Big 'm'
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/
Re: [css-d] I Have a Really Big 'm'
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/
Re: [css-d] I Have a Really Big 'm'
On 2012/01/24 18:31 (GMT-0700) Paceaux composed: 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? A typical em box is much closer to a 2X1 rectangle than a square, making the average 16px glyph roughly 8px wide nominally, less visibly, in both directions. assuming the inverse measurements are true, the total space is still 16sqr px, right? 16x8=128px is roughly what is available to draw the average 16px glyph, not the square of the em height. These two questions are why I would adjust either line-height or letter-spacing by ex; to compensate for disproportionate visual space. Note that line-height can be specified unitless, and the units used or not can make a big difference: http://fm.no-ip.com/Auth/line-height-inherit.html 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? I thought Phillipe's response would have been sufficient. Apparently not. Stop thinking of vertical, horizontal and square as limitations or requirements, particularly square. Both em and ex are lengths appropriate for specifying lengths and widths independently. The length of an em equals the nominal height of a character box, which is likely only square for limited number western glyphs that are unusually wide, plus probably a whole bunch of CJK glyphs. Maybe something from http://dbaron.org/css/test/ like http://dbaron.org/css/fonts/sizes/variants and/or http://fm.no-ip.com/Auth/widths-em-v-px.html would help you visualize and understand meaning and usage. -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! Felix Miata *** http://fm.no-ip.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/
Re: [css-d] I Have a Really Big 'm'
On Tue, Jan 24, 2012 at 7:13 PM, Paceaux pace...@madebypaceaux.com wrote:
/...trimmed
This morning I totally understood font-sizing. Now I don't know
anything. Please share any insights you have.
Frank M Taylor
http://frankmtaylor.com
Keep it simple. body{font:100%/1.4 sans-serif}. And allow the primary,
secondary, and tertiary content p to inherent same...
Best,
Isak Dinesen
PS Love your novels!
--
Chelsea Creek Studio
http://ccstudi.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/
Re: [css-d] I Have a Really Big 'm'
Thank you very much Paceaux. Youve made a number of good points. I think I'll do a follow-up blog entry. more comments inline ... -- Ghodmode http://www.ghodmode.com On Wed, Jan 25, 2012 at 4:06 AM, Paceaux pace...@madebypaceaux.com wrote: I think other comments have kind of addressed that for most of us in this discussion group, we knew that the em isn't one M. For the record, I didn't know before I created that experiment page. I thought that, for any given font, the lowercase 'm' was exactly 1em wide, but I wondered how it handled an m with a tail or flourish like the web font I chose. Regarding your article, I have a few thoughts: 1. Experiments have results. For the sake of your readers, provide the results of the experiment. 2. explain the experiment. I can see you've bordered out the width and height, but for a reader unfamiliar with em calculation, they won't understand the relationship that pixels will have to it. I agree. I may update it to make this more clear. For, me it became clear when I saw that the 'm' stuck out the right side of the 1em box, but I realize that might not be clear to everyone. 3. I'm struggling to understand your thesis or argument. Is it that the em is not the best letter to measure by? Or is it that the em isn't always an em? The statement I have a really big m doesn't support either of the arguments. That's fine if it doesn't, but you should clearly, in the first two sentences, state your argument/thesis. I don't think I really had an argument. It was just the question How big is an 'em'?. The title was partially supposed to be funny. Maybe I should have put an ellipsis: I have a really big... 'm'. Well, humor isn't my strong suit, but I was also referring to the fact that sometimes a letter 'm' is bigger than normal because of a flourish or tail in a scripty font and I wanted to understand if/how that affected the size of the unit. I'm not formally educated, so the proper form of a thesis statement or formal argument eludes me. I just like to read a lot about web d. stuff. I only understand about 40% of it, though. For the rest I write it down on the wall, then bang my head against it repeatedly until I understand. When I'm done, if there's still more ink than blood on the wall, I call it a success. A few other things to consider: em is generally thought as the relative width of the relevant font. The CSS2 spec, however, doesn't say that explicitly. It refers to the em square That's the cause of confusion for me... If it's the relevant width of the font, what's the height of 1em? My experiment page shows that it's the same as the width, but I didn't know that before I created it. ex is relative height of the relevant font. Some UAs may base x-height on a measurement between o and the baseline. I've read where the em is calculated based on the default font size. so you may want to rerun the experiment with a default font. That doesn't help. If an ex is the relative height, what's the width of an ex? I like the idea of re-running the experiment. I think I'll try a few different fonts. I wonder if an 'm' is an 'em' in a monospace font. Also: I think if you're making the argument that an em isn't always an M, why not also check to see if an ex is an x Not argument, discovery. But you're right. I didn't bother with ex because it's em that everyone is adamant about using. I did wonder why no one ever mentions ex. Since it's relative to the font size, isn't it just as good as em? In fact, since it's a little narrower than em, wouldn't it be a better unit to use when we're trying to aim for a target width in terms of the number of characters? Thank you. /email signature id=paceaux Frank M Taylor http://frankmtaylor.com @paceaux /signature On Jan 23, 2012, at 11:23 PM, Ghodmode wrote: I wrote a new blog entry inspired by past discussions on WebDesign-L and CSS-D: I Hava a Really Big 'm' blockquote Contemporary wisdom says that we should use the relative unit ‘em‘ for most, if not all, element measurements in web design. So, how big is an ‘em’? I set up a small experiment to tell me just that. Continue reading → http://www.ghodmode.com/blog/2012/01/i-have-a-really-big-m/ /blockquote I appreciate any comments, questions, or complaints. Thank you. -- Ghodmode http://www.ghodmode.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/
Re: [css-d] I Have a Really Big 'm'
On Wed, Jan 25, 2012 at 9:31 AM, Paceaux pace...@madebypaceaux.com wrote: geeze, this morning I thought I knew this stuff. Now I'm lost. See... it was a good blog entry... it made ya think :) __ 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/
Re: [css-d] I Have a Really Big 'm'
2012-01-24 8:23, Ghodmode wrote: So, how big is an ‘em’? I set up a small experiment to tell me just that. I don’t see the point of the blog entry or the experiment. http://www.ghodmode.com/blog/2012/01/i-have-a-really-big-m/ The text says ‘Letters aren’t all 1em wide.’ I find that an odd formulation, since _no_ letter is 1em wide. You seem to argue against the wrong idea that em is the width of the letter ‘m’. But that’s not the most common common misconception; people think that em is the width of the _capital_ letter ‘M’. And it is easy to see that these misconceptions are wrong if one just _looks_ at things. For example, putting ‘M’ or ‘m’ in a 1em by 1em box is quite sufficient. Using any font. I don’t see why you would need Web fonts for this. Yucca __ 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/
