This question already has an answer here:
I'm designing the UI for a financial application. I'd usually do high-fidelity mockups using Photoshop and send them to the developers. What I have noticed is that the text in the actual product looks different from my mockups, but they are in fact the same font. The left image is the hi-fi mockup, using Arial. The right image is the actual product, also in Arial. I tried all the different anti-aliasing options, but none gets me close to the image on the right.
Most websites/web apps I see don't have this problem. I wonder how they do it?