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?
Emil Stenström ( 30 Jun 2006 )
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)
Jesper Rønn-Jensen ( 1 Jul 2006 )
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.
Emil Stenström ( 2 Jul 2006 )
@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 :)
Joel Birch ( 3 Jul 2006 )
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.
zcorpan ( 14 Jul 2006 )
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.
Dork ( 18 Jul 2006 )
How about Yahoo fonts.css
http://developer.yahoo.com/yui/fonts/
Marko ( 23 Jul 2006 )
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.