Welcome to Code Couch

How to get consistent font sizes across all browsers

Posted by at 1:58pm on April 18, 2007.

Update: This article was written back in the days of IE6. Some of the information may no longer be relevant.

Here is an un-sourced quote that I picked up from the internet:

Macs render text at a screen resolution of 72 pixels per inch (ppi) … Windows renders type at a notional screen resolution of 96 ppi… the difference between 96 ppi and 72 ppi (24 pixels) makes the fonts on a Web page look 33 percent larger when viewed on a Windows machine.

To compensate, there are some very simple CSS rules that you can use to essentially “reset” the text size to be consistent across both Mac and Windows.

<style type="text/css">
   html>body { font-size: 16px; }
   body { font-size: 100%; }
</style>
 
<!--[if IE 7]>
<style type="text/css">
   html>body { font-size: 100%; }
</style>
<![endif]-->

Initially the html>body definition is applied to all browsers that understand the child selector CSS. This will result in setting the font-size on Opera, Firefox, Netscape, IE7, Safari (and other “modern” browsers). It will not be applied to older versions of IE – they will ignore this definition.

Next, the body definition is set for all browsers that didn’t understand the initial definition. Because this definition has lower specificity than the initial definition, it is ignored by the likes of Opera, Firefox, Netscape, IE7 and Safari… but older versions of IE will get this font-size definition.

Finally a conditional comment (which is specific to Windows IE) delivers an override to the initial style by setting the font-size back from a fixed pixel value to a scaleable value for all “new” versions of IE… specifically IE7. It needs to be html>body to ensure it doesn’t have a lower specificity than the initial definition.

Now, whether you specify your element’s font size in pixels, points or ems, you can be confident that text will look the same across browsers on Mac and Windows.

Post to Twitter

Tags: ,

Comments

There are no responses to this post.

Leave a reply

Comments are closed for this post.