INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Fonts

Make text appear the same size across Mac and Windows by BabyJeffy
Posted: 18 Apr 07


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.

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

Back to HTML, XHTML & CSS FAQ Index
Back to HTML, XHTML & CSS Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close