How can I make my Photoshop text appear like it does on the web?

Do I really have to design everything in Photoshop with anti-aliasing set to “none”? I’m sure there is a better way.

I’d like to have a setting so that when picking a basic web-safe (such as Tahoma) in Photoshop so I can see what it will actually look like when on the web.

For example: The difference between Tahoma with anti-aliasing set to “crisp” in Photoshop and how it renders in Firefox is major. It looks nice and smooth in Photoshop and looks like crap on the web.

Is there a anti-aliasing choice that is best to start with (that has the most similar outcome) when planning to have the content live on the web?

Answer

Most operating systems and browsers render with antialiasing or sub-pixel antialiasing. Sub-pixel antialiasing is common on desktop platforms, like Windows (with ClearType) and OS X. Standard monochrome antialiasing is common on mobile platforms, where the device’s sub-pixel order may change with device orientation, and where sub-pixel rendering isn’t as crucial, because they often have higher pixel density displays.

Aliased text rendering is common on Windows XP, where ClearType is disabled by default. Windows Vista and newer have ClearType turned on by default.


Rendering in Photoshop vs Windows vs OS X vs iOS vs Android vs WebKit vs Firefox (Gecko) are typically all different. So there’s absolutely no way you can build something in Photoshop and know that the text rendering will be the same, unless you take a screenshot and add it to your document as a bitmap layer.

Attribution
Source : Link , Question Author : jonn_g , Answer Author : Marc Edwards

Leave a Comment