The two most recent websites I’ve been working on are for two companies that exclusively use Macs, and I’ve noticed that the anti-aliasing differences between Windows (my machine) and Mac (theirs) have been causing me a hell of a lot of grief and explaining.
So, two part question;
1. Does anyone know what factors determine if text will be rendered anti-aliased?
I observed Safari has the worst (thickest, most nasty letters), but there’s also a difference between Firefox viewed on my client’s iMac vs. being viewed on her laptop.
Does this mean it’s related to the screensize as well?
What other factors are there?
2. Is there anyway to force browsers to NOT anti-alias my website’s text?
I’ve been googling with no hope. Using images instead of text is not an option.
Are there any new CSS3 controls or CSS hacks you know of?
Linux (Font smoothing off by default - all browsers) - result, everything looks thin.
Mac (Font smoothing on by default - all browsers) - result, everything looks thicker.
Windows: IE, Firefox, Chrome, Opera (OS controlled - on in Vista/7 - thick but thin if not calibrated, off in XP - thin), Safari (browser controlled - on - thicker)
Solution: Crawl in a corner and cry as you’re damned if you do and damned if you don’t
Mac users (such as myself) are used to seeing fonts rendered this way, so I’d not try and change anything. For long-time Mac users it’s Windows rendering that looks strange, has too thin text, so I’d tell your client that it’s perfectly normal that various operating systems render text differently and that users of a given platform are used to seeing it in that way (Mac users being used to seeing fonts slightly bolder and Windows users seeing fonts slightly thinner).