Font size madness across browsers [Archive]

View Full Version : Font size madness across browsers

fischermx

12-28-2004, 03:40 PM

Hi,

I think this may be an already talked topic, but here I go.
I'm trying to get my page to be seen the most similar in all browsers, at least in IE, Opera and Netscape.

I have setup an style like this :

.formfieldtext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:x-small;
font-weight: bold;
}

I apply this style to a font tag.

In both Opera (at 100%) and IE (at medium text size) it shows the fonts at the same size, a bit big to be "x-small". However netscape at 100% shows a smaller text (more similar to the size I want).

Could anyone explain why this ? I mean, is this normal ?
Can I really have a page that looks the same across all browser, at least the fontsize !?

sonicgroup

12-28-2004, 05:48 PM

Nope. Percentages, ems, and the identifiers (xx-small, x-small, normal, etc.) are all based on the default font size of the browser (or what the user has set it to).

If you want an exact font size, you should specify the size in points (pt) or pixels (px), but keep in mind point sizes differ between platforms as well (Mac vs. PC).

Pixel measurements are the only sure way to keep the font sizes the same across browsers. However, using a set size like that will break some browsers (IE).

I would suggest using ems. Set the font size for the body at 1em (which is whatever the default for the browser/user is) and then set all your other sizes from that (.75em for x-small for example).

fischermx

12-28-2004, 05:54 PM

Thanks for your comment, I'll try that.

Just an addition to my original post, I've discover that the only problem is with the x-small and xx-small size, if I set it to small/smaller or large, it display the same in all four IE, Netscape, Opera and FireFox.

It seems that both Netscape and FireFox respect the x-small size, while IE & Opera does not.

fischermx

12-28-2004, 06:24 PM

I'd like to add more :

It seems that all the scale with medium, small, xx-small, etc thing is totally dependant on the browser taste.

The only viable solution is the pixels or ems.
The problem with pixels, is that in IE they are not escalable and I find that very discouraging of use.
So, "ems" should be the only way to go to get both escalable and totally consistent size accross browsers.

Am I correct ?

sonicgroup

12-28-2004, 07:55 PM

It's the closest you will get to having a solution that is scalable, and somewhat consistent. Ems are also relative measurements, and the base that they are measured from is the default size in the browser; so if a person has their default font size set larger, 1em will be larger for them than the same browser with the default font size setting.

the_pm

12-29-2004, 11:55 AM

'em' is not the best measurement to use, especially as the base font size, not because it's a bad unit, but because of a horrible browser bug in IE. 'em' is a good unit, so long as you don't allow it to be inherited and modified by a contained element that also makes font size adjustments using that unit.

I've posted this a few times before, but this is as good a time as any to bring it out again.

<html>
<head>
<title>IE resize bug</title>
<style type="text/css">
div { font-size: .9em }
</style>
</head>
<body>
It's a nasty bug indeed!
<div>
It's a nasty bug indeed!
<div>
It's a nasty bug indeed!
<div>
It's a nasty bug indeed!
</div>
</div>
</div>
</body>
</html>
Take a look at this in Opera or Moz and adjust your font sizes. Then do the same in IE. You'll be stunned by how IE interprets this! I don't believe the doctype makes any difference here, hence why I left it out (this places IE in quirks mode, IIRC). Try an XHTML Strict/1.1 doctype, and I believe you'll see it makes no difference.

You might want to stick with percentages. There's really very little difference between the two measurements in practice anyway.

absolethe

12-30-2004, 05:57 PM

That's strange. I always use pixels and everything works very satisfactorily. I tend to use IE 90% of the time...