Marc Funaro wrote: > I have a question related to decisions that are made when "first > starting a new project". > > I am aware that using em as a font size unit is a "Best Practice". We > want people to be able to resize their text, and ems allow us to give > them that ability, consistently.
So far so good, but there are more than one way to resize text, and consistency doesn't depend as much on unit used, as on the way font-size is applied on elements down the chain. > Per this article: > > http://www.clagnut.com/blog/348/ > > If I set > > BODY {font-size:62.5%} > > Then I am now starting out with (assuming a setting of "medium" in > the browser) a default font size equivalent to 10px for my entire > document... You shouldn't assume "anything" :-) The article is correct, but the article ignores just about everything that can be ignored when it comes to what Users may actually set, and subsequently get. Thus, that old article is only useful if/when you know and understand all about "font-size inheritance" and "User-options in all major browsers". > And "numbers that are easy to work with", because a setting of > > {font-size:1.2em} > > Is equivalent to 12px. > > This is really nice, because I still tend to think of font settings > in px, and it's nice to be able to think in px but write in ems. > > The problem I have comes when I go further into the blog article, and > I set up my "containers" and set "default" font sizes there. ...and loose those nice "relative to px" calculations further in :-) (see below) > For example, if I set #contentArea{font-size:1.2em} then I get my > desired 12px font size for my body text. [...] > ACK! My "easy to work with numbers" now appear to be gone... Because > 2em is equivalent to 24px, not 20px as expected. 1.5em = 18px > instead of 15px, etc. > > My question... Why is this? Font-size for each element is based on inherited values down the chain, so when you have set 'font-size: 1.2em' on a container, all other font-sizes inside that container are based on the resulting size of those 1.2em - whatever that is. > And what is everyone else doing to work easily with font sizes, while > not having to turn around and specify a font size on most of the > elements in their document? Is anyone else using this technique, and > if so, can you provide some info on how you work with it on a daily > basis? I don't declare font-size on container-elements, but only on the text-carrying elements. Then I won't have to recalculate anything down the chain since they all are based on what I declare on body. Example: body {font-size: 62.5%;} p,pre,img {font-size: 1.2em;} h1 {font-size: 2em;} h2 {font-size: 1.5;} h3 {font-size: 1.3em;} h4,h5 {font-size: 1.2em;} h6 {font-size: 1em;} ...and a few other text-carrying elements - if I need them. --- Now, the values in that example are not the ones I actually use, since I'm also aware of what "browser-defaults" really are: an unknown variable - that can be changed by any User. 1: I use (and mix) '%' and 'em' as font-size unit, since they give identical results. 1.2em = 120% of whatever font-size (on body or elsewhere) the calculation is based on. 2: I use 'body {font-size: 100%;}' as base, since that is about as close to the "browser-default" as one can get. Besides, it /improves/ on /predictability/ when exposed to any and all "User-options" in any and all browsers. 3: I test by applying all available User-options to the extremes, in all browsers I can lay my hands on. "Some" predictability is the end-result. A bit more on the subject... <http://www.gunlaug.no/contents/wd_1_03_04.html> <http://www.gunlaug.no/contents/wd_1_03_02.html#item3> <http://www.gunlaug.no/contents/wd_additions_13.html> regards Georg -- http://www.gunlaug.no ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
