Text Rendering in Windows Browsers

[tburger]

Hey everyone-

I've been working on a website for my dad and I've designed it on a Mac...

The layout looks proper when I open it in Firefox, Camino, and Safari on OSX, but the text rendering is MUCH different on windows browsers. Even in Firefox on windows, the link text appears much thinner (as if you were viewing it in a word processor at 75%)...

Here's what I mean:

On OSX browsers the navigation layout looks like this:

But, if you open it in a windows browser, the text is rendered thinner...

Is there some way to remedy this?

Here are my html and css files...

HTML File
CSS File

Any help would be appreciated.

Note: the site was designed in Fireworks at 72 ppi

Thanks,

Tom

[drhowarddrfine]

I believe what you are seeing is the difference between OSX and Windows methods of rendering fonts. Macs are more publishing-centric while Windows is not. So fonts on the Mac look more like they would on paper.

[GluteHam]

Although I'm a PC-guy, Mac does a real nice job at rendering fonts. They look more like graphic text while PCs are more aliased.

[nitinpatel1117]

Yeah, i think its a font thing across platforms problem.

What font unit are you using, try using pixels or ems instead of points usually works better.
1em = 16px;


http://tlt.its.psu.edu/suggestions/r...ze.shtml#pixel

[drhowarddrfine]

1em = 16px;


http://tlt.its.psu.edu/suggestions/r...ze.shtml#pixel

No, it's not. 'em' is equal to whatever the font size is set to. If it was set to 10px then 1em is equal to 10px. EM

[tburger]

how do i make it consistent then?

I've looked online to explore the difference in rendering between the two operating systems...I don't think it's this dramatic...

Here's the layout I've drawn in Fireworks (on a mac) using Arial, size 15 font:

But, after recreating this in CSS, I get this in the browser (any Mac browser):

That's entirely different rendering of the same font...unless I've made some styling error in the CSS...

It looks bold almost, but I haven't set that in the CSS..additionally, it's throwing off my alignment and causing me to become bald at much too early an age...
=)

Any ideas?

Tom

[drhowarddrfine]

You can't change it. It's the default for Mac due to anti-aliasing. I actually prefer it as the publishing community does, too.

[tburger]

You can't change it. It's the default for Mac due to anti-aliasing. I actually prefer it as the publishing community does, too.

I agree. I like it better as well...My problem is that my dad's primary audience is going to be using windows machines...

Should I look into making separate CSS files that switch based on the user's browser? I hear that there are ways to do this...But is this common practice? Or should I be trying other ways to make this look acceptable in multiple browsers?

*on a side note: in the screen shots I provided above, arial size 15px was rendered differently in two separate MAC programs...why would fireworks render it differently than firefox when they're both running on osx?

Thanks for your continued help drhowarddrfine...

Tom