Reminder: Cross browser font sizes

Jun 30, 2006 • Emil Stenström • CSS, Fonts

I'm sure most of you have already read the excellent experiment on font sizes but it's important enough to summarice here.

The problem is how to make as many browsers as possible display fonts in the same size, without using pixels or other absolute units. Why shouldn't you use fixed font sizes? Because they make Internet Explorer unable to zoom the text with text-zoom, something that's bad for accessibility.

When you start experimenting with this problem you quickly get into problems. I tested in Firefox 1.5, Internet Explorer 6 and Opera 9 and it was incredibly hard (Want a challange? Don't read on, try it by yourself) even with just those few browsers. Opera has problems with units it seems. If you use em:s you can't use more than two decimals, Opera will round it them differently than the others.

Anyway, Owen Briggs solved this for us in a very simple way:

/* Set the size in percent on the body */
body { font-size: 76%; }
/* All other sizes should be in em units with maximum of one decimal */
p { font-size: 1em; }
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }

From my simple tests it seems to work fine. Did you know?

Comments

Jun 30, 2006
By: Emil Stenström (#1)

Ok, I accidentally deleted this article, in effect deleting all comments. Sorry people :(

(I was able to restore it from another open tab but the comments are gone)
Jul 1, 2006
By: Jesper Rønn-Jensen (#2)

This is exactly what Eric Meyer does on his blog www.meyerweb.com, and the reason I've used it a lot for the last couple of years.

My rationale: If Eric Meyer uses it, there is probably a reason as to why it's put in that way.

Thanks for pointing me to Owen Brigg.
Jul 2, 2006
By: Emil Stenström (#3)

@Jesper: I would say that it's a good thing because Owen tested in in that many browsers and saw that it works rather than that Meyer uses it. But I agree with your point there :)
Jul 3, 2006
By: Joel Birch (#4)

I use the "bulletproof" method as recommended by Dan Cedarholm (base keyword then percentage) and have had great results. I have never experienced a problem with Opera either. The only drawback is having to give IE5.x one size smaller keyword.
I often wonder why this method is rarely mentioned in these discussions.
Jul 14, 2006
By: zcorpan (#5)

When I want consistent results, I mostly use %, pretend that the base font size is 16px, and use my calculator to get the right sizes. If I want to change the font size from 16px to 14px, I calculate 14/16 = 87.5%. If I then want to change the font size from 14px to 12px, that gets 12/14 ? 85.7143%. It seems to work quite well as far as I can tell.
Jul 18, 2006
By: Dork (#6)

How about Yahoo fonts.css

http://developer.yahoo.com/yui/fonts/
Jul 23, 2006
By: Marko (#7)

I use 62.5% in body which sets font to 10px and than I can use ems, like 1.2em is equal 12px.
I am not sure if this is best way but works fine for me.
Jan 7, 2009
By: ppo insurance unity empire health (#8)

unity health medical insurance ppo health unity choice insurance ppo
Mar 25, 2009
By: eric (#9)

I don't doubt that a lot of people have found these techniques useful. But I've yet to get any of them to work. I've even been able to demonstrate that, at least in Firefox 3 and Safari 3 on my Mac and with regard to typography only, 1px is equal to about 1.2px. (No, that's not a typo.)

So I continue to scour the net for a technique that will allow me to reliably take a designer's pixel- or point-based size and render it in -- well, anything. I'd settle for bloody pixels, if they worked. They don't. (They never have, actually. I proved it eight years ago by doing screenshots in IE, Netscape and Opera across different system font sizes and screen resolutions. Pixels were the least consistent of the three methods I tried (points, percentage and pixels). Pixels weren't pixels then, either, it just wasn't as crazy as it is now.)

I'm sure you all think I'm a crank by now, but the thing is, I've been driven a little insane by all of this.
Mar 27, 2009
By: Emil Stenström (#10)

@eric: Good to hear that you keep pushing the limits, striving for pixel-perfect designs. From what I hear, very few interface developers have the stamina to keep trying to get pixel-perfect designs to work. I have stopped long time ago, and instead try to determine whether or not the differences destroy the design or not. Works well for me.

Comments

By: Emil Stenström (#1)

By: Jesper Rønn-Jensen (#2)

By: Emil Stenström (#3)

By: Joel Birch (#4)

By: zcorpan (#5)

By: Dork (#6)

By: Marko (#7)

By: ppo insurance unity empire health (#8)

By: eric (#9)

By: Emil Stenström (#10)