On 2/16/07, Rob Stevenson <[EMAIL PROTECTED]> wrote:
> I've heard this before, and I witness the results daily since this idea
> seems to have caught on widely with eCommerce template people.
>
> But why is it important that you get a nice round number of pixels? Who
> cares? And why would you want the base font size to be less than 2/3 of
> the medium size?
A base size of 10px is just handy for easily calculating other sizes
using ems. Multiplying by 10 is infinitely easier for the
mathematically challenged than multiplying by 16. Given a base of 10,
I know at a glance how many pixels 1.5em or 150% will be without
pulling out a calculator.
> I can attest that text at 62.5% is unreadably small on my 1280 x 960
> resolution display. And isn't that the important issue? If you leave an
> em as an em, we can both read the text. If you force the em to be
> whatever size works on YOUR monitor, it might not work on mine.
Agreed, leaving 10px as the size of body text is a poor design choice.
But setting a 10px base size does create a handy point of reference
for further scaling. My recommendation is to declare 62.5% for the
body, then scale other elements up for readability. Eg:
body { font-size: 62.5%; }
#content { font-size: 1.2em; } /* if all readable content is within
something called #content */
Or perhaps:
p, li, dl { font-size: 1.2em; }
h1 { font-size: 1.8em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
Essentially that base size declaration just sets you up for easy and
precise em-based sizing everywhere else. Where I find the 10px em most
useful, though, is in elastic layouts where widths are also declared
using ems, eg:
#somebox { width: 55.6em; } /* 556px at medium, expanding
proportionally as text is resized by the user */
You get the ease and precision of pixels and the flexibility of ems.
As with any other technique, use it responsibly and appropriately.
--
Craig, www.focalcurve.com
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/
