I would like to replicate the antialiasing made by my browser in photoshop. Look at this picture: It is 500% image of standard 13px Arial #464646 font. First line is screenshot from browser(chrome), other lines are some of the antialiasing options from PS.

Notice the color change on the first line. Does it have something to do with ClearType?

Can I somehow replicate the first line in PS?

enter image description here

  • one potential problem with a uniform sub-pixel setting is that sub-pixel rendering depends on hardware capabilities. What you think looks good during design may look pretty bad with different hardware. So, beware and test your settings. – horatio Jun 5 '13 at 14:15

Unfortunately, no, there isn't a way to, using the tools that Photoshop has by default, replicate the different browsers' rendering (note that all browsers render text in a distinct way). That's one of the reasons lots of designers create mockups straight in html/css, because of these discrepancies.

There are, however, Photoshop actions and plugins you can download to allow sub-pixel font rendering:

  • But why? I know ClearType is subpixel technology and PS cannot do subpixel rendering, but when you print screen it and put it into PS, it isnt subpixel any more, right? Like I did on the image... – user2330401 Jun 4 '13 at 3:13
  • Really have no experience with antialiasing technologies, so maybe what I have said might sound silly or weird:) – user2330401 Jun 4 '13 at 3:14
  • @user2330401 JohnB just mentioned sub-pixel plugins in chat, just edited the question! – Yisela Jun 4 '13 at 3:19
  • @user2330401 i am wondering about this too: does it make sense to enable subpixel antialiasing when rendering the font to an image? i think no, but i couldn't find definitive source. i would think the "subpixel" effect would morph into whole pixels and make the font worse (depending on size of font?) – oberhamsi Jun 26 '13 at 19:55

As Yisela mentions, the sub-pixel rendering is from the OS/Browser, while PhotoShop uses it's own anti-aliasing methods.

That said, if you really want to replicate it, type out your text in the browser, style with FireBug the way you want, then screen shot, paste into PhotoShop.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.