CSS - font sizes

Didn't Megan put one up here a while ago? I'm sure I remember seeing something like that here. I'll go have a look...

Maybe this page will explain it a little http://www.allmyfaqs.com/faq.pl?CSS_Units

Hey, thanx for that link Zollet

I couldn't find what I thought I had seen on here a while back. Thanks for your links Zollet.

No problem, I just did a quick search on google

There was a page I found once that showed how fonts are actually rendered in browsers at different sizes - it showed a remarkable amount of variation, even with settings that you'd think would be quite stable. I can't seem to find it now though...

Do you mean this site you posted here?

Yup, that's the one - doesn't directly answer Busy's question, but this page does a better job:

http://developer.apple.com/internet/fonts/fonts_sizing.html

1pt = 1px on a Mac
1pt = 1.3px on a PC

The article goes on to say, however, that these problems have been fixed in NS6 and IE 5 so there shouldn't be a difference between platforms in newer browsers. There wouldn't be a direct relationship for ems since that's a relative measure not an absolute one.

Thanks, both links are interesting but don't give the whole picture.
Am mostly looking for the relationship between em - px - % - font

em is one m -- so there isn't going to be a real way to measure it.

em is like %. You set a base size of say 1em -- that means that whatever the person has set for their browser size is 1 (100%). Then you scale up and down from there... .95em is like 95% -- nothing in and of itself, but of 12px, then it's meaningful. .95em of font-size: small; is something entirely different than .95em of font-size: x-large.

Pixels are pixels are pixels.

so the old font size="3" (default on most cases) is equal to 1 em which is the same as 100% ?

If I set the font to 80% and zoom in (on opera) to 110% its about right, but if I set the font size to 90% (without zooming) it's to big

not to worried about the small, x-large etc as they arent fully accepted.

yes, that's about right. but it depends on everyone's browser what 1 em will be -- the browser, the resolution, the operating system... Because of that, there is no real definitive "size" relation that can be made.

I tend to work from the assumption of 12pt or 12-14px as the "average" size that people have set on their browsers as default.

So which in everyones opinion is the best method to use for font sizing then?

default...

depends on the purpose of the site, the design, and the audience.

With the ability to hide things from IE in the CSS using the box model hack, you can use keywords for base sizes and ems or % for relative sizing from there.

I'm a villian I suppose. I use px for better control. I know that I shouldn't but the compatability battle is such a b***** otherwise

I know, I do too - it just seems to be the easist way. I've played with percentages on a few sites but it becomes a problem with inheiritance etc.

I was having that problem (and I do use px as well, when required) but I found the solution was to rethink how I made the CSS in the first place. When I rearranged things (thanks to a discussion here, actually) on my blog, I was able to make it all work out. I'm using px there in some places still, I think, though.

I used to use px (12 or 13) but was a bit small on NS4.7 but printed fine, now am doing XHTML strict sample pages and are using 80% it's a little bit big in NS4.7

I'll post one of the pages here soon to see if everyone gets the same font size

Ok I made up a little sample page (don't bookmark, if you want it save as or copy it because its not staying there). As you'll see its only basic and wont win any awards but does show how the relationship between them work and how they differ per font styles.

check it out