I was reading Sitepoint’s Principles of Beautiful Web Design by Jason Beaird. He recommends a best practices technique for fonts. Beaird prefers to work in pixels to maintain exacting control over a design, but in order to avoid screwing IE6/7 users he resets the fonts with a percentage…
body {font-size:62.5%}
…so that 1 em = 10 pixels. He then sets all of his font sizes in ems to provide graceful webpage functionality cross-browser while maintaining the control he likes.
This sounds like a fantastic idea, but it’s basically from 2006. Is it still current? Is there a better more recent technique?
I realize a lot of people are starting to bail on supporting IE6, but my bias is to continue to support it, and I believe IE7 is unavoidable. What are your thoughts?
That doesn’t necessarily make 1em equal to 10 pixels. It only does that where the screen resolution is set to that 1em is 16 pixels in the first place which pay or may not be correct.
The technique of setting a percentage on the body is correct for fixing an IE bug but the percentage that you use can be any value and normally somewhere between 70 and 100% will work best.
Right or wrong the only way to be (half) sure that the font size you define is what the user sees is by defining a pixel font size for the body as the starting point. From then on you can define percentages as required.
There is a method that I posted in the thread mentioned above that shows how to do this even for IE6 and still allow the user to scale the text with the browser controls.
I find this method combined with the correct percentages to be the most reliable cross browser. (Too many of the other methods use percentages that will give say 13px in one browser and then 14px in another because of rounding errors or guessed percentages. Remember that simply saying xx% of a font-size is not going to give an exact measurement and if the measurement works out 12.9px then you get 12px in some browsers and 13px in others.)
However, a lot of people would argue that changing the base font size is taboo from the start and therefore it’s a choice you have to make for yourself. I believe that setting a reasonable start size is a reasonable approach but many would argue otherwise.
Of course the user can set their browsers to ignore any fonts or sizes I define and indeed just use their own stylesheet so ultimately there is never any complete control over this and neither should there be.
I find myself these days to not set a font-size on the body at all. I define the font-size in ems further down the sheet. Like Paul said, there’s no right or wrong way i guess.
Not setting a font size on the body means that Internet Explorer will incorrectly calculate font sizes where you have nested elements. You need to add a font size declaration of 100% to your body to fix that bug (it will not affect anything else).
You mean the bug where IE has problems resizing text from medium (default) to large? As far as i know that bug occurs where you set an em size font on the body. In that case going to large in IE leads to a huge increase in font size rather than the gradual one expected. In that case you need to set a font-size of 100% on the html element. Or are you talking about another bug?
Besides that, i use em based IE expressions to work with min-width. The expression extracts user preference from the browser so no font-size on body/html must be set. Forgot to mention that in my first reply
The bug is one where you have nested elements both specifying relative sizes where IE then incorrectly calculates the font size for the content in the inner element. Nothing to do with resizing at all.
Heard that, Eric. But I’m going to try Paul’s 13px reset to see how it works. I gave up on trying to figure out that 62.5% yeehah a long time ago. My inner math geek isn’t very good at handling, well, anything, so it always confused the hell out of me.
