The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Is there a scalable absoulte font size unit?

Hi,

I've been using 'pixels' to define my font size since I've started coding for the web. However, I keep seeing people often complaining about how, unlike 'em' and percentages for example, users can't change its size.

So, is there an absoulte unit that I could use for font sizes? I don't use relative units mainly because they're a mess. And if I change the parent's font size, I have to adjust its children as well. (correct me if I'm wrong)

And if I change the parent's font size, I have to adjust its children as well. (correct me if I'm wrong)

No you are correct and that's the beauty of using ems

If a user scales the text then all the text scales accordingly because it is all related.

Using pixels is a problem because IE7 and under don't scale text when it is sized in pixels (although IE7 does have a zoom feature). Once IE6 usage is zero it won't be a problem and you can use pixels if you wish although you will still have issues with layouts breaking when scaled unless the containers are sized in ems also (or allowances have been made).

It's quite easy to use relative font size but you need to have a logical approach and not apply sizes to elements that may be nested without controlling them or they will compound.

Problems can arise if at a later date you wanted the parent a larger size but keep the children the same. A single change to the parent would affect any nested children also that have ems applied and you would then need to re adjust the size of the children accordingly. However I don't think this is a problem that will likely happen very often.

I use ems for font sizes on all the work I do and rarely run into issues although it does take slightly longer at design time to work out what percentage to use.

You can base your font sizes on the Yahoo font reset which has a basic cheat sheet to show the differences between percentages although it makes assumptions on what the defaults of browsers usually are which is not always the case.

These are the choices we have to make and ultimately you can never control the font size on a visitors browser because they can always over-ride you in one way or another; so you make it the best you can

Not sure exactly if this is answering your question, but if you use the following:
body {font-size:62.5&#37;;}

this sets the base font-size ( 1em) to about 10px in most (all?) browsers. So then if you want eg a header to have font-size 22px you would add eth css rule

h2 {font-size:2.2em}

It can get a bit tricksy sometimes. If you have eg

h2 {font-size:2.2em}
span {font-size: 1.2em}

and

<h2>Header with <span>bigger text</span></h2>

then the text inside the span will be 1.2em x 2.2em = 2.64em = 26.4px big. If you change the h2 font-size then the span font-size will also change.

But if you had a more specific selector

h2 {font-size:2.2em}h2 span {font-size: 1.2em}

then the text inside the span would only be 1.2em tall, as it's (not sure what the technical term woudl be) more singled out by the selector. You can change the h2 font-size all you liek and it won't affect the span.

So you can set it up so that either the children's font-size is dependent on the parent, or is independent of it.

then the text inside the span would only be 1.2em tall, as it's (not sure what the technical term would be) more singled out by the selector. You can change the h2 font-size all you like and it won't affect the span.

I think you have confused yourself a bit there

It will make no difference how you target the span as it will always be 120&#37; bigger than the parent whether you say h2 span {font-size:1.2em} or just span{font-size:1.2em}.

The em size of the span will always be relative to its parent size and you cannot bypass the mechanism. You could of course use the following instead to ensure the span stays at the same size as the h2 if you have defined other rules for spans elsewhere.

h2 span {font-size:100%}

That will ensure the span stays at the same size as the parent assuming that styles of a greater weight don't exist.

Not sure exactly if this is answering your question, but if you use the following:
body {font-size:62.5&#37;;}

this sets the base font-size ( 1em) to about 10px in most (all?) browsers.

Not really, because it assumes that all browsers are set to 16px by default (Firefox is, that much I know - IE and Opera obey the system metric, and I'm not too sure about Safari, but if I had to gander a guess I'd say 14px for that browser). Not only that but you have users who have their computers set to 120 .dpi (or 100 on Linux) which they tend to call "large fonts" which increases the text size by about 25% on average thereby making the 62.5% = 10px arguement fall flat on its face.

Not really, because it assumes that all browsers are set to 16px by default

Not only that, but it also assumes that the user hasn't changed the font size setting/zoom from Default or 100%. That's easy to do inadvertently by moving the mouse scrollwheel while holding down the Ctrl key. I've seen beginners do this many times, and they have no idea why the text on all websites is suddenly so large or small.

More advanced users may do this deliberately, if they need larger text because of a slight visual impairment.