P: Text rendering using browser rendering engine

Anti aliasing methods for the fonts in photoshop.

Hello, I have been wondering this for while. When I open a font, I have few anti aliasing methods for it, like "none" "sharp" "crisp" etc. So what I would need as an additional at there is "web".
Because if you take a screenshot from webpage, zoom to it, you see that every browser has an unique anti aliasing method for the fonts. In photoshop the fonts are in only one color, but in web browser there is few colors that makes the font looking like more crisp than in the photoshop. I would like to use this method for the web design I do at work. It's a small thing, but it would make the design look for more realistic. Thanks 🙂

I think most users need something that is close to the Cleartype for Windows designs and something that is close to OS X/iOS rendering.
The argument that Microsoft and Apple change their text rendering too often is IMHO invalid. Text rendering is the same in Vista/7 and 8. And Apple has changed anything since years. There may be subtile changes but nothing that changes the appearance too much.

I have been using the CS6 beta for a week now, and the font rendering of computer screen fonts is still not great. This is basically the difference between Photoshop and the browser rendering: http://www.quora.com/Tyson-Rosage/Pos...

If I understand this article correctly, it seems to suggest that sub pixel hinting can improve rendering, but this can depend on the screen you are viewing text with, and might not be possible in Photoshop: http://thomasmaier.me/blog/2010/03/17...

Still, if you take a screenshot of text rendered in a browser, it seems to look better on any screen than an saved image from Photoshop, so I think the rendering could be improved.

In a nutshell: no, that could not be done.

For one thing, the browsers and OSes change their type rendering too often.
And they render in a way that makes sense for final form (you're never going to edit the pixels from a browser, and it knows exactly what display it's on), but doesn't work for an editable document (like Photoshop).

Try using the type in Photoshop CS6 - it's closer to the browsers and OS, even though we can't be bug compatible with every browser version on every OS version.

In a nutshell, this: http://dribbble.com/shots/301619-I-ha...
There has been a topic on providing web browser text rendering options as well: http://feedback.photoshop.com/photosh...

I do UI design for OS X and iOS, and the rendering of fonts at 11, 12, and 13 px size can really affect the feel of the interface. People always tell me that the text looks "off" in a mockup I've made, even though I'm using 13 px Lucida Grande, the default OS X font. This is because the crisp and sharp antialiasing options in Photoshop just look too rough around the edges.

It would be great if the text anti-aliasing drop down in Photoshop had options for different operating systems (and browsers too), so you could create UI and website mockups that look authentic.

Sometimes I think Adobe needs to split off a version of Photoshop for UI/Web Design, like the way they created Lightroom for photographers. On the other hand, I'm afraid of what might be lost in the new product if they ever did that. There is a lot that Fireworks has going for it, and yet it falls so short. Photoshop is simply the best.

On behalf of the web design community, please add options to render text as it would in browsers. Its lack of accuracy is a key argument for devs to switch to prototyping in code.

When I compare the text rendering in photoshop with firefox I see differences. The font in photoshop is more bold. No matter what rendering type I choose, I cannot get it like in Firefox. This is bad for web designing. Because I don't see what I will get...

On the image you see photoshop at the top and Firefox at the bottom.



Firefox v10.0.2
Photoshop v12.1 x64

Great idea for the HTML5 layers!