[CSS] Base text size + em's

[zackiv31]

So I do the typical browser reset, and set my body font size to the 62.5% that we all have grown accustom to. Now I throw my page into a container, lets say #page. #page is defined with a font-size of 1.3em (to get my baseline font-size of 13px).

Now my problem is this, I want to create a bunch of CSS classes that I can use to structure set font sizes from this baseline. So say i want ".f1" to render at 1 px higher, what should I set for its font-size em? {1.1em} would be 1.1 * 13px which is 14.3px.

Is there a set library somewhere that has these numbers for set baselines? Like if I have a 12px base, what the values for .f1,.f2,.f3.. or even .fm1 (for 1 px smaller) would be?

Thanks Neowinians!

[sweetsam]

Why set a base font of 1.3em ? Instead assign font sizes directly to .f1, .f2 etc. The method you are suggesting will produce unpredictable results because doing so brings up another issue rounding. Each browser has its own way of rounding.

[primexx]

where did 62.5% come from? I've never heard of it.

Much more common is to set the basic size to 100% (16px) and then adjust from there.

[sweetsam]

62.5% is generally preferred because 62.5% of 16 is 10 which gives a nice base to start with making math a lot easier. Its just a matter of convenience.

[zackiv31]

I want the base size of my page to be 13px... I don't want to have to set a class for fonts to be of that size. Then I want classes to be able to define 14px, 15px, 16px, 12px... etc... based off of that base.

I won't set them with straight font-size: 14px; because that is a no-no in the css world... IE6 doesn't handle scaling correctly...

As for starting at 100% or 62.5% it really doesn't matter, as I want defaults to be at 13px.. but after that, without absolutely setting pixels (so I need either ems or %'s) how do you pros do it?

[sweetsam]

Well in that case I would set the font size for body as 81.25%. That would set the base font size as 13px. Now for 14px it would be 108%. Beware that I have not tested this and you probably will run in to issues from rounding and the methods used by browsers for rounding are known to vary from browser to browser.

[zackiv31]

Ya, I mean that seems like the best solution... just wondering if people know if these numbers are published anywhere...

Like Yahoo's User Interface utils are great for zeroing in and testing all the irregularites across browsers, so I'm just looking for a list somewhere of all these numbers since like you said, it could vary for the rounding.

[primexx]

you can try google, but i haven't seen anyone bored enough to test this stuff yet.

just stick with pixels if you need pixel-perfect control, IE6 can go screw itself.

[zackiv31]

  primexx said:

you can try google, but i haven't seen anyone bored enough to test this stuff yet.

just stick with pixels if you need pixel-perfect control, IE6 can go screw itself.

Yes.... screw 20% of your market.... dumbest thing I've ever heard, but thanks.

[The_Decryptor Veteran]

If you want pixel perfect changes you're going to need to use pixels (or possible rem's, because they're a percentage of the font-size on the root element)

Or use lots and lots of maths and leave strange percentages laying around everywhere.

<p style="font-size: 13px">13 pixels tall <span style="font-size: 1.07692308em;">14 pixels tall-ish</span></p>

And just for reference, even IE8 doesn't get the whole "scale font-sizes marked as pixels" thing right, it doesn't look like they're ever going to fix that bug (On one hand I'm surprised they can't get simple units right, yet on the other hand I'm not, and that saddens me)

Edited February 21, 2009 by The_Decryptor

[fall3n]

Actually, it's 18.5% now ;) http://www.w3schools.com/browsers/browsers_stats.asp

[zackiv31]

I rounded up thinking my google skills outsurpassed his :)

And ya, I'm going to set a base and do some calculations on my own since it seems no ones has done this work for me

[Kami-]

Maybe Useful?

[The_Decryptor Veteran]

Nah, that chart's pretty useless (only the px/pt parts are useful)

<span style="font-size: 16px;"><span style="font-size: 2.0em;"><span style="font-size: 75%;">Text</span></span</span>

The text inside the inner span is 24px tall, because em's and percentages are relative to the font-size of the containing element, a chart is only valid for one element vs. it's parent element (e.g. the body tag when the html tag is set to 16px or so)