CSS Font Size Dilemma

[btoth]

I took a couple screenshots of my problem. I'm sizing my fonts with pixel values to avoid the problems with DPI and browser font-sizing quirks. However, in Windows (any browser) the fonts are still bigger than on the Mac, and the text ends up wrapping in places that I don't want it to.

Here's a picture on the Mac:

Here's the same Contact section in Windows:

The width on the Contact block is the same on both systems, so it's just how each OS handles font sizes. Since I'm using pixel values for the font-size property, it shouldn't be affected by the monitor's DPI should it? Any insight into this problem would be great... if it comes down to it, I'll just make the fonts look right for Windows and there will just be more white-space on the Mac, which is acceptable.

 

[chevy]

You can pre-select 2 types (or even more) that you like to use. One for Windows, one for MacOS.

  body, h1, h2, h3, a, p {
  	margin: 0; padding: 0; 
  	text-align: left; 
  	font: 12px 'Lucida Grande', Geneva, Arial, Verdana, sans-serif;}

 

[btoth]

I was specifying 11px Verdana for both platforms. Turns out if I use Arial the fonts are much closer in size for some reason. The same goes for Georgia... on Windows, the fonts are spread out more but if I use Times New Roman, they are a closer match.

 

[btoth]

I was analyzing the two images at 1600% in PS and noticed that Windows and the Mac do display letters at the same height pixel-wise, however there's seems to be no spacing between the letters on the Mac and on Windows there is a definite one pixel gap between letters.

Also, by looking at the header, the letters in Windows sit one pixel higher and have more gap underneath. Odd.

I tried it with OS X's font-smoothing turned off, but it didn't seem to make any difference in the spacing.