Question

We’re running into issues with how we specify font sizes. If we specify the font sizes using pt, they don’t always look the same across browsers/platforms. If we specify font sizes using px, IE6 users can’t resize the text.

Answer 1

An article on A List Apart (November 2007) explored this in depth in various browsers and concluded:

Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.

They provided screen shots of how this technique looks in most popular browsers. Here is the code they used:

<style type='text/css'>` body {     font-size:100%;     line-height:1.125em; }  .bodytext p {     font-size:0.875em; }  .sidenote {     font-size:0.75em; } </style>  <!--[if !IE]>-->  <style type='text/css'> body {     font-size:16px; } </style>  <!--<[endif]-->