commadot.com

Photoshop fonts don’t match browser fonts

There is a problem that I can’t seem to find a solution for.  Check out this screenshot below.  It is a screen grab of 12px arial from different browsers next to Photoshop trying to make the same font. (Zoom: 200%)

Notice how the same text looks the same in all of the different browsers on Windows.  Then, in Photoshop, I tried to make the font look exactly the same.  I tried every variation of font aliasing and other settings I could think of.  For the life of me, I could not get them to look the same.  Look at an extreme zoom of the browser text.

Where are those blues and reds coming from?  It almost looks like a 3D image from a movie, without the glasses on.  Clearly, windows is doing something to the fonts.  My question is: Why can’t I have Photoshop do exactly the same thing, so I can get a 1:1 match with my browser?  This seems like a really common use case.

I am sure that the Mac does something different with the fonts, but still the Windows aliasing choice should be an option.  How hard could it be?  (Famous last words)

Comments

3 responses to “Photoshop fonts don’t match browser fonts”

  1. max Avatar
    max

    Those colored pixels are result of MS cleartype technology. Its patented so Adobe would have to get permission to use it and pay for it (they can’t just rely on os rendering as Mac os aliasing is quite different and to be consistent they would need to implement it themselves)

    Reply
  2. Darkcoder Avatar
    Darkcoder

    The actual reason is because the red/blue colours come from subpixel rendering, which in the case of the 4 text examples at the top, are designed for LCD displays. But Photoshop has no knowledge of how the final work will be displayed, so it can’t use such a monitor quirk. If it generated text like that then if you printed something out, it would appear incorrect.

    Reply
  3. Antonio Tejada Avatar
    Antonio Tejada

    Photoshop CC will, FINALLY, allow you to use subpixel rendering.

    I’ve done it in the past by taking screenshots of the Mac and then using layer masks to turn the channels into “ink” to move subpixel rendered text into PS with transparency.

    Reply

Whatya think?