Font rendering issues!

[elephant]

I have a weird problem with getting Arial to render properly on some sites I've made, and I don't know if this is an OS X-related issue or not?

I have a MacBook Pro 13" that I use as a laptop, and then a MacBook Pro 15" i7 that is hooked up to a 24" external display.

On the 24", the sites look normal, meaning Arial in 'font-weight: normal' looks as it should. But on the 13", all fonts have a 'bold' applied to them.

This doesn't happen everywhere though, Google renders in normal Arial without the 'bold' applied. So far I've only experienced it on my own sites, but I haven't done an extensive search.

I'm guessing it has something to do with how OS X renders fonts when the resolutions get smaller (to increase readability), but how do Google and other sites bypass this behaviour?

Comparison (24" first, then 13"):

Anyone had this problem before? Tried googling the issue, but didn't really know what to look for.

 

[unid]

I am 12pt Helvetica and what is this?

 

[elephant]

I am 12pt Helvetica and what is this?

It shows up as Helvetica on my 24", but as Comic Sans on my 13". Reason is i uninstalled Comic Sans from the i7.

Oh and also: when I unplug the i7 from the external monitor and use it a s a laptop, it displays fonts like the 13", with a bold applied to it.

 

[elephant]

After some more testing:

So the problem here seems to be that OS X is trying to increase readability when things are displayed on a smaller resolution laptop screen, by adding bold on top of all text, even if the text is already bold.

Some sites bypass it just fine though, like Google or MySpace.

I tried reducing my external monitor to "laptop resolutions" (1280x800), but my external monitor still rendered the fonts correctly.

Something happens when I unplug my external monitor, that makes both my MBP's add bold on top of text on certain websites.

My head is spinning.