Photoshop Tips: Make Text on the Web Look Sharper: Photoshop Tutorial

Blocks of text at small sizes often appear blurry, smudged, or just plain unreadable when viewed on a Web page. Photoshop has built-in features that can render small type crisp and sharp. Here are three handy tips for improving the appearance of text at small sizes on the Web.

INGREDIENTS

by Colin Smith

More Great Tutorials

PhotoshopCAFE home

1

There are a few little tricks you can do in Adobe Photoshop to make your text look a bit sharper on your Web pages, especially at smaller sizes.


Resizing


When resampling blocks of text, there is an option you may not have noticed that will help you achieve sharper results. This is particularly useful when you have scanned in blocks of text or line art (see figure 1).

Figure 1

2

When we go to resize the image (Image> Image Size), Bicubic resampling is the default option (see figure 2). This works best for most images. (In CS+ try Bicubic sharper)

Figure 2

3

Here is the result of Bicubic resampling on our text (see figure 3).

Figure 3

4

Try it again, but this time choose Bilinear resampling (see figure 4).

Figure 4

5

Notice how much sharper the text is? (see figure 5)

Figure 5

6

Tracking


The second trick you can use in Photoshop applies to small text and its tracking, or kerning, which is the spacing between letters. Here is a line of text with standard tracking (see figure 6).

Figure 6

7

In the tracking box (Window> Show Character), increase the amount to 20 (see figure 7).

Figure 7

8

See how much more legible the text is? (see figure 8) Look at a road sign and notice that the tracking is set very wide. That's why you can read them from a distance.

Figure 8

9

Anti-Aliasing


Many people use anti-aliasing on text on the Web, with mixed results. Here is a line of text with the crisp anti-aliasing applied (Layer>Type>Anti-Alias Crisp). It's kind of blurry (see figure 9).

Figure 9

10

Photoshop 7 ships with a new Sharp level of anti-aliasing. Here is a line with sharp anti-aliasing applied (see figure 10). Notice the difference?

Figure 10

These little tips help you to produce Web pages with sharper, easier-to-read text.