Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Make text appear the same size across Mac and Windows

Fonts

Make text appear the same size across Mac and Windows

by  BabyJeffy  Posted    (Edited  )

[quote some url on the web]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.[/quote]

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.
Code: 
<style type="text/css">
   html>body { font-size: 16px; }
   body { font-size: 100%; }
</style>

<!--[if gt IE 6.9999]>
<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.

This code can be re-written using more IE specific conditional comments - but it doesn't make the code any more transparent to do so.

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.

Enjoy [smile]
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top