by Marcus Stenbeck 21.November 2007 11:16
One of the more tedious bits in the lovely task of designing a website is making sure that your design doesn't break (completely) when a user increases the text size in their browser. When people resort to such things websites usually tend to cringe, pop, bend, and expand in a way similar to what happens when Bruce Banner turns into The Incredible Hulk - Bruce is still there, but his shirt is, at best, in shreds.
There are three options for a designer to handle setting text sizes - setting pixel size, em size, or using percentages. So how should text sizes be set?
Using only pixel sizes might be tempting because of the precis control you can exert onto the poor glyphs, but remember you can't resize the text in the browser if you use pixel sizes.
Upon experimenting with a bunch of different combinations like mixing pixel sizes with ems, only using percentages, etc. At first the thought of setting the body font size with pixels, and then using em or percentages to vary it throughout the website seemed like a good idea... and it was a good idea, in all browsers except Internet Explorer. While the other browsers neatly increased the font size in small increments Internet Explorer jumped between normal, huge, and grotesquely gigantic font sizes. My perfectly fine design had turned into a jumbled billboard.
We found out that the combination of first normalizing the font size to 1 em, then setting the body font size to a percentage of that (80% is a nice size), and finally using em to set the font size for all other elements provides a flexible solution which gracefully increases the text size in FireFox, Internet Explorer, Safari, and Opera.
Cheers,
Marcus