Reminder: Cross browser font sizes

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?

10 responses to “Reminder: Cross browser font sizes

  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)

  2. This is exactly what Eric Meyer does on his blog http://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.

  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 :)

  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.

  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.

  6. 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.

  7. unity health medical insurance ppo health unity choice insurance ppo

  8. 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.

  9. @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 are closed.