Gabriel Harper's Blog

If you’re using Photoshop and want to see what text will actually look like in a Web browser, it’s really pretty simple. Text in Photoshop is usually smoothed out, like this:

Photoshop uses AntiAliasing to smooth out fonts and make them much easier on the eye. For graphics and Web design antialiasing can drastically improve the appearance of text. But if you’re inserting text into your Web design layouts that will be real text in the final Website (”lorem ipsum”), you know it doesn’t quite look the same.

In a Web browser, it often looks like this:

This look is easy to duplicate with Photoshop. By default, the character toolbar is set to use Smooth antialiasing on your font. By setting antialiasing to “None” as displayed in the following picture, we get pretty close to the bare font rendered in most browsers:

We can never know exactly how every browser will look though. Some browsers use ClearType or another method of built-in antialiasing to smooth out fonts. For example, my Windows XP system with ClearType enabled looks just like this:

At least this little Photoshop trick will help us get a better idea of what our users are seeing.

This entry was posted on Thursday, March 5th, 2009 at 12:46 am and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.