Web design tips & tricks
Last updated: 2005/10/12
Return to the main page
The two most common ways of setting font sizes with CSS are using points (pt) or pixels (px), but you can use also relative font sizes, either using ems (being an em the height of the element's font) or the predefined size keywords (xx-small, x-small, small, medium, large, x-large and xx-large). This has the advantage of allowing Internet Explorer users enlarge or shrink the font size of the page through the IE font size menus (other browsers allow font resizing also for points and pixels).
Despite the fact of being of "relative size", the fonts should look identical in any standards compliant browser (IE6, Firefox, Opera, Safari...) and also in IE 5.x (taking advantage of the CSS parsing bug described in the box model hack). See the CSS code of this page for details.
Anyway, you could find some problems with the way the browsers round some font size's written in em's. It seems that IE rounds up some values that other browsers rounds down. In the following example you will see that the second paragraph look identical as the third one in IE, but it will look like the first one in Firefox, Opera 7/8 and Safari 1.x:
1) Sample <p> with the style: font-size: 1.2em
2) Sample <p> with the style: font-size: 1.25em
3) Sample <p> with the style: font-size: 1.3em
Note: Firefox font rendering may vary in other O.S. like Linux.
Of course the solution is changing the font size a bit a until all browsers round it in the same way: in the previous example we should use either 1.2em or 1.3em (depending on the font size you prefer), which look the same in all browsers.
Return to the main page
© 2004-2005
Web design tips & tricks