Re: [css-d] TwoQuestions: min/max-width, change layout with width
On 2012/01/24 11:19 (GMT+0800) Ghodmode composed: Felix Miata wrote: ... Here are a few real-world examples of fixed width sites: http://www.mashable.com 972px http://fm.no-ip.com/SS/SC/sc-mashable2560-01.jpg http://www.stackoverflow.com 960px http://fm.no-ip.com/SS/SC/sc-stackoverflow2560-01.jpg http://developers.whatwg.org/ 820px http://fm.no-ip.com/SS/SC/sc-whatwgdevel2560-01.jpg http://lifehacker.com/ 980px http://fm.no-ip.com/SS/SC/sc-lifehacker2560-01.jpg http://developer.yahoo.com/ 974px http://fm.no-ip.com/SS/SC/sc-yahoodevel2560-01.jpg http://paulirish.com 936px http://fm.no-ip.com/SS/SC/sc-paulirish2560-01.jpg On 2012/01/24 19:15 (GMT+0800) I don't know about the original poster's target demographic, but 960px works well on a modern computer or a modern mobile device Debatable... I guess some of this stuff is a matter of opinion. In each of the screenshots, you're saying that the site could make better use of the horizontal space available, right? That, among other things which should be evident, some from reading the content, more from merely looking at perspective. Content links, for convenience, included in those screenshots: http://www.informationarchitects.jp/100e2r?v=4 http://www.w3.org/2003/07/30-font-size http://bureau.tsailly.net/2010/10/honey-i-shrunk-the-pixels.html Related ones not used there: http://www.yourwinningresources.com/all-about-websites/The-Web-is-Not-Paper.htm http://www.useit.com/alertbox/designmistakes.html http://www.dev-archive.net/articles/font-analogy.html Those and more are listed without comment on http://fm.no-ip.com/Auth/refmarks.html In my humble opinion, those sites make effective use of horizontal space and presentation of their content. When more fits on the screen than just the web site it's a good thing. That's one school of thought. Some people use a bigger screen to fit more stuff. That's you. Others use a bigger screen to make stuff bigger. That's me. Many others fall somewhere in between those two basic schools, but most designers seem to fit yours, and without demonstrating knowledge that any other exists. I'd make the browser window only big enough to show the site, then use the rest of the space for other windows. But that's just me. Many, but hardly all. Consider also the general rule that content shouldn't exceed some horizontal width. It often applies to coding practices and communications mediums... even some mailing lists. Relevant width is the key. When the width as measured in a designer's em that is a fraction of the browser UI em, and a smaller fraction of the browser's default em, the width is too narrow, as everything in that viewport is too small. Maybe you need to define what you mean by "talented", "successful" and "look great". Clearly here these sites don't make much of anything big enough to evaluate, certainly providing little evidence of enough talent to both understand and care about the impact of screen density on px layouts from the perspective of non-designer web users. NAICT from here they all look like they were designed for print. Here's what I meant: talented = I think that these people are smarter than me, with regard to web d. They've had significant experience working on high-visibility sites and/or they've made significant contributions to the web d. community, earning my respect. Or it could mean they're copycats, not a particularly meaningful talent. successful = lots of visitors How many actually stay more than a few seconds needs to count too. I hit a lot of sites that are loaded only for as long as it takes to see how rude they are and hit the back or close tab button to escape. look great = pretty Look great cannot be evaluated when everything is too small. It doesn't seem like anything is holding back screen densities. I''m a novice, but I keep hearing about retina and super amo oled plus and 4k HD displays. It seems like hardware capacity is out-pacing software capacity. Your first sentence and third sentence conflict. For the most part, pixel densities _are_ being held back for lack of software support. For several years, desktop displays had a fairly wide range of sizes for any given resolution. More recently the range has been much narrower, with more discrete resolutions available than previously, and depending on manufacturer, a range of about 3" or less for each one up to the highest of the high volume sizes (1920x1080). Okay. I don't get it. This is clearly a topic that you understand much better than I do. Maybe a bit of study of http://fm.no-ip.com/PC/displays.html could be helpful here. Compare it to http://fm.no-ip.com/PC/dpi.xhtml to see the latter is older, and populated by a much smaller number of combinations, many of which are no longer available to purchase except as new old stock or used. Even
Re: [css-d] TwoQuestions: min/max-width, change layout with width
On Tue, Jan 24, 2012 at 10:19 PM, Ghodmode wrote: How wide it should be is a matter of opinion, and I think that's the original question... What do we, as a community, think is a good width. Ghodmode http://www.ghodmode.com -- Sigh. I have no idea what the community thinks is a "good width." But, perhaps the width self-adjusts to be appropriate, insofar as is possiblt for children of all ages -- even those in hand -- 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'
On Wed, Jan 25, 2012 at 9:31 AM, Paceaux 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'
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 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. > > > Frank M Taylor > http://frankmtaylor.com > @paceaux > > > 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'" > > > 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/ > > > 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] TwoQuestions: min/max-width, change layout with width
On Wed, Jan 25, 2012 at 3:43 AM, Felix Miata wrote: > On 2012/01/24 19:15 (GMT+0800) Ghodmode composed: > >> I don't know about the original poster's target demographic, but 960px >> works well on a modern computer or a modern mobile device > > Debatable... I guess some of this stuff is a matter of opinion. In each of the screenshots, you're saying that the site could make better use of the horizontal space available, right? In my humble opinion, those sites make effective use of horizontal space and presentation of their content. When more fits on the screen than just the web site it's a good thing. I'd make the browser window only big enough to show the site, then use the rest of the space for other windows. But that's just me. Consider also the general rule that content shouldn't exceed some horizontal width. It often applies to coding practices and communications mediums... even some mailing lists. How wide it should be is a matter of opinion, and I think that's the original question... What do we, as a community, think is a good width. >> I don't know about the current generation of netbooks, but I expect >> resolutions to go up. > >> High resolution users can see and use a 960px wide web site quite well >> also. > > Clearly not... > > >> Here are a few real-world examples of fixed width sites: >> http://www.mashable.com 972px > http://fm.no-ip.com/SS/SC/sc-mashable2560-01.jpg > >> http://www.stackoverflow.com 960px > http://fm.no-ip.com/SS/SC/sc-stackoverflow2560-01.jpg > >> http://developers.whatwg.org/ 820px > http://fm.no-ip.com/SS/SC/sc-whatwgdevel2560-01.jpg > >> http://lifehacker.com/ 980px > http://fm.no-ip.com/SS/SC/sc-lifehacker2560-01.jpg > >> http://developer.yahoo.com/ 974px > http://fm.no-ip.com/SS/SC/sc-yahoodevel2560-01.jpg > >> http://paulirish.com 936px > http://fm.no-ip.com/SS/SC/sc-paulirish2560-01.jpg > > >> These are some really successful web sites with talented developers >> using fixed width layouts. Their sites all look great everywhere. > > > Maybe you need to define what you mean by "talented", "successful" and "look > great". Clearly here these sites don't make much of anything big enough to > evaluate, certainly providing little evidence of enough talent to both > understand and care about the impact of screen density on px layouts from > the perspective of non-designer web users. NAICT from here they all look > like they were designed for print. Here's what I meant: talented = I think that these people are smarter than me, with regard to web d. They've had significant experience working on high-visibility sites and/or they've made significant contributions to the web d. community, earning my respect. successful = lots of visitors look great = pretty These are all my opinion, from my point of view. I wasn't trying to refer to some normative definition. Note: There are talented designers/developers working on ugly sites with no users. e.g. ghodmode.com :( There are extremely successful sites that are ugly and have clueless designers/developers. e.g. facebook.com There are beautiful sites with clueless designers/developers and no visitors. They're usually flash-based. > In most cases it's about appropriate line lengths, which are always > measurable in em. Not everyone agrees on what is too long or not. If you > want 15 word lines and two columns straddling the center with 2-4 word > lines, 60em or so may be a good starting point. Yep. That's the answer to the original question. That wasn't so hard, was it? >> It doesn't seem like anything is holding back screen densities. I''m >> a novice, but I keep hearing about retina and super amo oled plus and >> 4k HD displays. It seems like hardware capacity is out-pacing >> software capacity. > > Your first sentence and third sentence conflict. For the most part, pixel > densities _are_ being held back for lack of software support. For several > years, desktop displays had a fairly wide range of sizes for any given > resolution. More recently the range has been much narrower, with more > discrete resolutions available than previously, and depending on > manufacturer, a range of about 3" or less for each one up to the highest of > the high volume sizes (1920x1080). Okay. I don't get it. This is clearly a topic that you understand much better than I do. If you're talking about the desktop environments, is it related to web d.? -- Ghodmode http://www.ghodmode.com > -- > "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://c
Re: [css-d] I Have a Really Big 'm'
On Tue, Jan 24, 2012 at 7:13 PM, Paceaux wrote:
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'
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'
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?
Frank M Taylor
http://frankmtaylor.com
@paceaux
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 () 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 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 () 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/
[css-d] Class working everywhere but IE
I have a class called "tagline" that is located in the css file here: http://www.redcanoecu.com/_css/global.css It's located in the /*Header*/ section. The problem is that when you go to our site: http://www.redcanoecu.com then try and login to Online Banking the tagline "your dreams our passion" image doesn't pad right 12em. It's ends up next to the logo. For some reason in IE it's not seeing the img.tagline class in the css file, but at least Firefox and Safari seem to be okay. Anyone have an idea on how to fix this? BTW, to see the problem just put any number in the member number box to get to the next screen. Thanks, Russ This electronic mail message and attachments (if any) are confidential and legally privileged. The information is intended solely for the addressee(s). If you have received this email in error, please contact the sender and delete all copies of it. Any unauthorized use or disclosure may be unlawful. __ 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.
Frank M Taylor
http://frankmtaylor.com
@paceaux
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'
> 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] TwoQuestions: min/max-width, change layout with width
I won't speak to appropriate min/max sizes for "most" as that debate seems to already be handling itself quite nicely without me. ;) However, if you want to look into responsive design, Ethan's books is short, to the point and filled with more than enough info to get your feet wet. It's well worth a look and the description about the book includes some valuable sample content: - http://www.abookapart.com/products/responsive-web-design Best of luck, Daniel -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Freelance Traveller Sent: Monday, January 23, 2012 4:50 PM To: css-d@lists.css-discuss.org Subject: [css-d] TwoQuestions: min/max-width, change layout with width Question the First: After seeing plenty of discussion, here and on other forums focussing on website development, I've decided that maybe it's a good idea to implement max-width (and possibly min-width) settings on my site. The sense I get from the discussion is that a max-width of 960px is probably the best choice. What's a good reasonable value for min-width, given that I have a fixed 120px vertical nav bar down the left side of the page? Sub-Question: Should max-width (and min-width, if deemed appropriate) be applied to the HTML tag, the BODY tag, or should I enclose everything in a DIV and apply it to that? Question the Second: Would it be better, instead of setting min-width, to allow the page to "reformat" itself so that instead of a left nav, it has a horizontal breadcrumb trail for nav across the top? If so, can someone point me to material that will explain how best to do so? -- Jeff Zeitlin, Editor Freelance Traveller The Electronic Fan-Supported Traveller(r) Fanzine and Resource edi...@freelancetraveller.com http://www.freelancetraveller.com http://come.to/freelancetraveller http://freelancetraveller.downport.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'
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). Frank M Taylor http://frankmtaylor.com @paceaux 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" > > > > > > > Frank M Taylor > http://frankmtaylor.com > @paceaux > > > 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'" >> >> >> 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/ >> >> >> 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'
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" Frank M Taylor http://frankmtaylor.com @paceaux 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'" > > >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/ > > > 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] TwoQuestions: min/max-width, change layout with width
On 2012/01/24 19:15 (GMT+0800) Ghodmode composed: I don't know about the original poster's target demographic, but 960px works well on a modern computer or a modern mobile device Debatable... I don't know about the current generation of netbooks, but I expect resolutions to go up. High resolution users can see and use a 960px wide web site quite well also. Clearly not... Here are a few real-world examples of fixed width sites: http://www.mashable.com 972px http://fm.no-ip.com/SS/SC/sc-mashable2560-01.jpg http://www.stackoverflow.com 960px http://fm.no-ip.com/SS/SC/sc-stackoverflow2560-01.jpg http://developers.whatwg.org/ 820px http://fm.no-ip.com/SS/SC/sc-whatwgdevel2560-01.jpg http://lifehacker.com/ 980px http://fm.no-ip.com/SS/SC/sc-lifehacker2560-01.jpg http://developer.yahoo.com/ 974px http://fm.no-ip.com/SS/SC/sc-yahoodevel2560-01.jpg http://paulirish.com 936px http://fm.no-ip.com/SS/SC/sc-paulirish2560-01.jpg These are some really successful web sites with talented developers using fixed width layouts. Their sites all look great everywhere. Maybe you need to define what you mean by "talented", "successful" and "look great". Clearly here these sites don't make much of anything big enough to evaluate, certainly providing little evidence of enough talent to both understand and care about the impact of screen density on px layouts from the perspective of non-designer web users. NAICT from here they all look like they were designed for print. Well, em is obviously a better unit in most cases, but it doesn't have that much to do with the original question. What's a good target width? In most cases it's about appropriate line lengths, which are always measurable in em. Not everyone agrees on what is too long or not. If you want 15 word lines and two columns straddling the center with 2-4 word lines, 60em or so may be a good starting point. What's DTE? http://en.wikipedia.org/wiki/Desktop_environment It doesn't seem like anything is holding back screen densities. I''m a novice, but I keep hearing about retina and super amo oled plus and 4k HD displays. It seems like hardware capacity is out-pacing software capacity. Your first sentence and third sentence conflict. For the most part, pixel densities _are_ being held back for lack of software support. For several years, desktop displays had a fairly wide range of sizes for any given resolution. More recently the range has been much narrower, with more discrete resolutions available than previously, and depending on manufacturer, a range of about 3" or less for each one up to the highest of the high volume sizes (1920x1080). -- "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'
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] TwoQuestions: min/max-width, change layout with width
On Tue, Jan 24, 2012 at 5:07 PM, Felix Miata wrote: > On 2012/01/23 10:35 (GMT+0800) Ghodmode composed: > > >> 960px is a good max width... for most site visitors. > > > ...where "most" is as little as 50% + 1 of today's visitors. I consider that > a gross exaggeration except in cases where you know your demographic > includes no netbook or handheld devices. At the other end are today's high > resolution users, and tomorrow's much higher resolution users. IOW, the size > of a px, until such future time as a CSS px and a device px are normally not > identical, and probably even after that time for a long time to come, if not > indefinitely, is an unknown size that bears an unknowable relationship to > legibility and usability on users' screens, because px size depends on px > density, which varies considerably among environments. I don't know about the original poster's target demographic, but 960px works well on a modern computer or a modern mobile device whether it's tablet, netbook, or handheld. The handhelds will initially show the site zoomed out, but they're designed for that. Pinching, tapping and zooming is the normal use case for a handheld device. Netbooks aren't a problem. The Asus EeePC is already pretty old, but it handles a 960px web site pretty well. It's resolution is 1024x600. I don't know about the current generation of netbooks, but I expect resolutions to go up. High resolution users can see and use a 960px wide web site quite well also. Here are a few real-world examples of fixed width sites: http://www.mashable.com 972px http://www.stackoverflow.com 960px http://developers.whatwg.org/ 820px http://lifehacker.com/ 980px http://developer.yahoo.com/ 974px http://paulirish.com 936px These are some really successful web sites with talented developers using fixed width layouts. Their sites all look great everywhere. > OTOH, the em unit bears a predictable relationship to both legibility and > usability, and thus is the better way to determine how wide is wide enough. > It makes a big difference how wide is 960px on a display on which 960px is > nearly the full width of the screen (1024x768), or one on which it is less > than half a screen wide (e.g. 2560x1440); and similarly where 960px is 60em > wide (16px browser default), or one in which 960px is less than 24em wide > (e.g. 3840x2160 or higher; considerably more than 16px browser default). Well, em is obviously a better unit in most cases, but it doesn't have that much to do with the original question. What's a good target width? Platforms currently use pixels to define their viewports. Working within that limitation, we can come up with a target number. Then perform the necessary calculations to convert to em. Just like you said, we start with a pixel number, then make an educated guess about default font size on target platforms in order to convert to em: 960px / 16px = 60em > Screen densities are rising and will continue to rise. The main thing > holding them back from rising more and faster is DTEs that presume > yesteryear's crude average density and make little or no allowance for > things to work properly when density is more than a little bit higher. Em > units make no such anachronistic assumption, even going so far as to allow > respect for user settings without significantly disrupting layout. What's DTE? It doesn't seem like anything is holding back screen densities. I''m a novice, but I keep hearing about retina and super amo oled plus and 4k HD displays. It seems like hardware capacity is out-pacing software capacity. -- Ghodmode http://www.ghodmode.com > -- > "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 3:08 PM, Jukka K. Korpela 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] TwoQuestions: min/max-width, change layout with width
On 2012/01/23 10:35 (GMT+0800) Ghodmode composed: 960px is a good max width... for most site visitors. ...where "most" is as little as 50% + 1 of today's visitors. I consider that a gross exaggeration except in cases where you know your demographic includes no netbook or handheld devices. At the other end are today's high resolution users, and tomorrow's much higher resolution users. IOW, the size of a px, until such future time as a CSS px and a device px are normally not identical, and probably even after that time for a long time to come, if not indefinitely, is an unknown size that bears an unknowable relationship to legibility and usability on users' screens, because px size depends on px density, which varies considerably among environments. OTOH, the em unit bears a predictable relationship to both legibility and usability, and thus is the better way to determine how wide is wide enough. It makes a big difference how wide is 960px on a display on which 960px is nearly the full width of the screen (1024x768), or one on which it is less than half a screen wide (e.g. 2560x1440); and similarly where 960px is 60em wide (16px browser default), or one in which 960px is less than 24em wide (e.g. 3840x2160 or higher; considerably more than 16px browser default). Screen densities are rising and will continue to rise. The main thing holding them back from rising more and faster is DTEs that presume yesteryear's crude average density and make little or no allowance for things to work properly when density is more than a little bit higher. Em units make no such anachronistic assumption, even going so far as to allow respect for user settings without significantly disrupting layout. -- "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/
