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?

enter image description here

  • Photoshop anti-aliases text unless you tell it to stop.
    – Scott
    Sep 5, 2013 at 19:20
  • to extend what Scott said: the OS and the browser also anti-alias (or use sub-pixel rendering) unless disabled by the user, but they do it differently than Photoshop. Photoshop overrides/ignores the OS settings for rendering text in images.
    – horatio
    Sep 5, 2013 at 20:34


Browse other questions tagged or ask your own question.