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


Question

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?

1
11
3/2/2015 10:25:00 PM

Accepted 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.

10
6/13/2012 4:28:00 AM

No. The new line of thought is to avoid Photoshop for layout and typography design and start in the browser as early as possible.

By passing the client an actual URL as opposed to a Photoshop comp, you avoid the client's expectations being dashed when the final product renders slightly different in their browser of choice vs the Photoshop comps.

Ultimately, it's our responsibility to educate the client and make them aware of the unavoidable typographical discrepancies that occur between browsers and OSs.


Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow


Website under construction!!!
^