CSS Font Sizes

[Jeewhizz]

Saw this on a mailing list I am on - I wasn't aware of it, and thought i'd share!

If you want good font size control, set the font size of your body to 62.5%
This should effectively give you a starting size of 10px. Then you can
use the magic of ems to scale your fonts with pixel perfection.
1.6em gives you 16px font.
1.2em gives you 12px font and so on.

Even though you have font sizing to the pixel, it's still able to be
changed by the browser as desired.

[Mr Anderson]

Make sure you keep an eye on inheritance. For example, if you set list items to 1.2em and have nested lists the nested list items will be larger than their parent list items.

Personally, unless I'm going to be setting box widths in ems, I set the font on the body to 75% (12px in most Windows and Mac browsers) so that text is readable without having to have multiple settings (10px is very often far too small for most people, and so a setting over 62.5% generally needs to be overridden elsewhere in the CSS).

Saw this on a mailing list I am on - I wasn't aware of it, and thought i'd share!

If you want good font size control, set the font size of your body to 62.5%
This should effectively give you a starting size of 10px. Then you can
use the magic of ems to scale your fonts with pixel perfection.
1.6em gives you 16px font.
1.2em gives you 12px font and so on.

Even though you have font sizing to the pixel, it's still able to be
changed by the browser as desired.

[JasonD]

Eh? Why complicate what is already a simple calculation? Sticking with your assumption of 16px default:

0.625em = 10px
0.75em = 12px.
1em = 16px (only worth typing if default style for an element changes the size)

This level of math is not beyond most peoples abilities. Plus you won't get extra large text if the browser has a minimum font size > 62.5% of default.

[Mr Anderson]

16px isnt exactly default though

Really? Not even in Windows? Nor more recent Macs?

and setting to 62.5% does the job of making it more consistant over all browsers.

How does it?

[samhs]

I tend to set to 66% as the base size, then assume 1em is roughly equiv to 10pt/10px. Not had a client complain yet.

Sam

[Mr Anderson]

I tend to set to 66% as the base size, then assume 1em is roughly equiv to 10pt/10px. Not had a client complain yet.

I generally use 75% which is roughly 12px. Saves too much faffing about, unless I'm intending to use ems for box dimensions in which case I'll use 62.5%.