Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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 ?

share|improve this question
3  
I've asked this issue on official Photoshop Feedback site, feedback.photoshop.com/photoshop_family/topics/… pliz vote! –  user2849 Nov 9 '11 at 20:38

5 Answers 5

up vote 13 down vote accepted

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.

share|improve this answer

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/

share|improve this answer
    
"Photoshop is not a web designing program." Really???? –  Farray Jan 2 '12 at 1:36
    
@Farray: Really. It's a raster graphics editor. Just because you can also do web design with it doesn't mean it was originally designed for that. You can drive a tractor on the highway, too, but that doesn't make it a car. –  Ilmari Karonen Feb 3 '12 at 13:59
    
@IlmariKaronen Photoshop is a fine tool for designing a website, it's just not used to build the website. I haven't had any web designs that didn't involved editing raster graphics... –  Farray Feb 3 '12 at 16:09
2  
Thats's one of the most unfortunate opinions I've read lately. If Photohop is not intended to design websites (as well as many other things), then what do you use to design them? You should take a look at some serious web design blogs and sites, everyone uses photoshop to design their websites. –  José Tomás Tocino Feb 19 '12 at 15:00
    
@TheOm3ga - actually, that's really not true. Some prefer Fireworks for its better workflow (though FW's text rendering is horrible), others insist on HTML prototypes. But photoshop is by no means the universal choice. –  Jimmy Breck-McKye Apr 20 '12 at 16:20

Design in HTML and CSS. If you MUST get it back into a PhotoShop mock-up, screen shot it out of the browser, then bring it back into your PhotoShop document.

Setting type in PhotoShop is a pain, in general.

share|improve this answer

Unfortunately Photoshop doesn't support any kind of a subpixel rendering. Nor does any other Adobe software—with the exception of Dreamweaver. (Well it is not exactly Dreamweaver's technology, as it just renders the HTML and then passes the text for the operating system to be rendered.)

The suggested workflow may be that you create and slice your design in Photoshop and then open it in Dreamweaver. If the design needs further corrections you could have the file simultaneously opened in Photoshop, do the changes, save, and refresh the view in Dreamweaver. Add the final, real copy in Dreamweaver. You could also replace Photoshop with Fireworks; or even start wireframing in Fireworks → continue in Photoshop → publish through Dreamweaver. (It comes clear why the Creative Suite editions are usually bought in bundles, doesn't it?)

If the design looks different in Dreamweaver's preview than in browser(s), that is an another, unfortunate, matter (and I'm not talking about just the typography but the rendering as a whole). The sooner you can elevate from Photoshop to live demo—be it via Dreamweaver or not—the better. I do wish Photoshop would have subpixel rendering powers (but at the same time hope it won't be introduced in CS6, or at least hope I will be rich by then)!

Just a side note: ClearType is protected with 10 or so patents, so exactly the same rendering is not probable. Also it is worth noting that OS X uses different rendering (Quartz) by default and so do the graphical interfaces in linux distributions.

share|improve this answer

A possible work-around might be to use the "sharp" anti-aliasing method and set a 0-depth inner glow on the text layer:

enter image description here

For this sample I used white color, 85% opacity, "screen" blend mode, 0 choke, 0 size. Not as good as Ms clear-type, but it looks less boldy...

(first line = no anti-aliasing, last line = sharp anti-aliasing without the inner glow)

share|improve this answer
    
Pretty interesting approach! Also keeps the text editable. –  kontur Dec 3 '12 at 14:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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