richard n wrote: > I just read your article (and the accompanying one about Minimum Font > Size) > > Very interesting, but quite complicated for a beginner such as > myself.
Not just beginners... :-) > Going forward, I want to make sure that I'm following best (or at > least 'good'!) practice. Fine. What's "best" practice is always debatable, but a 'good' practice is one that tends to work no matter what - even under some stress. That's a good starting-point. Visit the css-d Wiki, as a lot is written about font-size there... <http://css-discuss.incutio.com/?page=UsingEms> <http://css-discuss.incutio.com/?page=UsingPercentages> ...and many more pages on that and related subjects. I've added some below. > So... > > - I should replace the 'small' in my body tag with a percentage? 100% > or 62.5% or ???? I would start with 'font-size: 100%' on body as base, since that equals default in all browsers - regardless of what that default is. (Sometimes body isn't the best element to declare font-size base on, but it'll only be a problem in obscure cases.) The often used 'font-size: 62.5%' is the one I'm warning against in... <http://www.gunlaug.no/contents/wd_1_03_04.html> ...because of the way some browsers apply 'minimum font size'. I certainly don't mind the very large text I get in my browsers when designers use such a small value as base, but a lot of layouts tend to break needlessly so it's an efficient way to prevent me from ever wanting to revisit such weak and badly prepared sites. While you're at it: declare a 'line-height: 1.3' (or something near that value in most cases) on body too. That's a unit-less value for line-height, that will be inherited by all text elements. You can of course change that value on any element further in. More: <http://css-discuss.incutio.com/?page=LineHeight> If you need/want smaller font-size anywhere further in, then a font-size smaller than 100% or, if using 'em', smaller than 1.0em, will give you the font-size you want. The exact value is best found through trial and error across browser-land because of slight differences between browsers. Remember - make notes about - the values you find, so you can reuse them later. This approach will assure good predictability across browser-land, without putting limits on what users can do at their end. > - I should then use percentages for sizing all other text elements > ('p', 'h1', 'h2', 'ul', 'li' etc).? Basically: yes. Percentages or ems are pretty equivalent when used for font-sizing - as long as the starting-point (on body) is a percentage. 'font-size:1.0em' = 'font-size: 100%' = no change = inherited font-size. Note that any change in font-size is calculated from whatever font-size you have further out (inherited font-size), so there's no need to declare font-size more than once if you don't need a change. > - Ems - Ems are new to me. I started using them in the navigation > menu to give a 'margin right' to the horizontal list elements (i.e. > to space out the elements). I was keen that when the text was > enlarged, that the spacing between the menu items would enlarge > proportionally. Is this a good use for ems? Or is there a better unit > to use? Maybe pixels will enlarge in the same way? The 'em' is the only unit that'll scale dimensions relative to font-size, so that's the right choice for the effect you're after. Doesn't matter what unit you use for 'font-size', as 'margins', 'paddings' and 'width' will scale with font-size when declared in 'em'. Test well and make sure it all adds up in a complete layout. Pixels - 'px' - give you fixed dimensions (no scaling), so that's what you use them for. Good practice says "don't use 'px' for 'font-size' and/or 'line-height'", but 'px' for anything else is just depending on what kind of layout you want. Note that mixing units for dimensions ('paddings' in 'em', 'margins' in '%' and 'width' in 'px' - or any such combination) may give you a headache. Nothing wrong with doing that, but it is difficult - and sometimes impossible - to calculate the end-result. I mix units all the time, but I'm used to that sort of headaches :-) > Sorry - very basic beginner's questions. Always good to get the basics working - and understood, before one starts complicating things. Create simple test-pages and test out the basics across browser-land. As mentioned: there are some differences between browsers, and also quite a few bugs around (mostly in IE), or else we could all settle for what's written in the standards... <http://www.w3.org/TR/CSS21/fonts.html#font-size-props> ...and so on. Would be nice :-) 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/
