or

Subscribe to RSS feed!

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?

Friendly Bit is a blog by Emil Stenström, a Swedish web developer that occasionally gets ideas of how to improve the internet.