Sent by Gunlaug_Sørtun on 13 September 2006 19:07
richard n wrote:
> I just read your article (and the accompanying one about Minimum Font
> Very interesting, but quite complicated for a beginner such as
Not just beginners... :-)
> Going forward, I want to make sure that I'm following best (or at
> least 'good'!) practice.
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
Visit the css-d Wiki, as a lot is written about font-size there...
....and many more pages on that and related subjects.
I've added some below.
> - 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...
....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.
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).?
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...
....and so on. Would be nice :-)
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/