Advertisement


Font (anti)aliasing in Photoshop


Question

I'm using Photoshop for designing websites and whenever I compare a photoshop design with the live browser preview the fonts appear to be rendered differently.

arial

Basically any anti-aliasing method I choose in photoshop, the text always gives the impression of bold text. So I'm always forced to turn off antialiasing (for normal 12px/14px text).

Is there a method I can achieve the same kind of font rendering in Photoshop like the one that Windows uses with cleartype?

If not, are there any fonts out there that look better than Arial when anti-aliasing is off ?

2011/02/28
1
20
2/28/2011 11:55:00 PM

Accepted Answer

There are two reasons ClearType text is so crisp.

  1. it uses subpixel rendering. I don't think Photoshop supports that.
  2. it uses aggressive hinting to fit lines into the pixel grid

You can type your text in Notepad, screenshot it with some nice convenient tool, and paste it into Photoshop with blending mode Multiply (because it's black text on a white background). But that's not convenient. Edit: it may also be almost impossible to do with any foreground color other than black.

This guy has described a method to do manual subpixel rendering, and to my eyes, it does improve the font sharpness, making it nearer to ClearType. But it still uses Photoshop's hinting, so it's not as sharp as ClearType.

Do you really need ClearType-style rendering in Photoshop? If you export any graphics containing text for use in your web design, they shouldn't contain subpixel rendering because it's not appropriate for some displays (CRT, rotated phone). And if you're not exporting text but just looking at it, Photoshop's rendering seems OK.

2011/03/01
18
3/1/2011 12:15:00 PM

Photoshop is not a web designing program. To get text that looks the same in a browser as in a graphic (jpg, gif etc) you have to use the same font in both programs. Some fonts are not used by all browsers.

Depending on the size of your text, a good mid-sized font could be Tahoma, Helvetica, Trebuchet or Georgia. Check out this website for some good ideas: http://www.snaphow.com/10-most-popular-web-fonts-used-in-web-safe-design/

Larger fonts are where it starts to matter about anti-aliasing.

If you're trying to get text to merge with text on a page, I suggest using CSS positioning to achieve your goals. CSS allows you to put text from your webpage overtop of images, and uses relative and absolute positioning to render the page exactly as you want. Here's an example and tutorial: http://css-tricks.com/text-blocks-over-image/

2011/12/31