Receive exclusive offers, coupons,
tips, and weekly updates.
by Bryan Hoff
Adobe Photoshop CS2/CS3/CS4/CS5
Macintosh, Microsoft Windows
While text on the web is best when formatted as HTML, you may need to include some copy in your images. Don’t let illegible text in your images spoil your otherwise fantastic site.
To get the best text for the web, we’ll:
Walk you through a series of techniques to ensure that your text looks perfect onscreen.
Go over the best method to use when resampling text.
Show you how tracking adjustments can significantly improve the legibility of your text.
Cover the different anti-aliasing methods and explain which one works the best for small text.
Show you how to slice your text images to create smaller, more efficient files.
Go over Weighted Optimization to control the quality of specific areas within a document.
Whenever possible, it’s best to use HTML text on a Web site. This is because text is typically more legible in HTML format, especially for those with images turned off in their browsers. However, there will be times when you need to make text part of a graphic, either because you’re using an uncommon font, creating a special effect, or trying to ensure that your text will appear exactly the same in every browser. When those times arise, you want your text to be as legible as possible. And, although this may seem like an easy thing to achieve, it can be difficult to make text created in Photoshop appear crisp and clear on the Web. Oftentimes, text will become burry when resized or when it isn’t optimized properly.
With that said, there are many steps you can take to avoid the pitfalls of creating text for the Web in Photoshop. From choosing anti-aliasing algorithms specifically designed for resizing text to creating a separate image slice to contain text, you’ll never have to worry about your text being unreadable again.
Resampling the text
For our examples, we’ve created a busy background to set our text on, just to make it more apparent how difficult it can be to read some fonts onscreen. The first issue we’ll address is how to resize text for optimal results. Typically, when designing images for a Web site, you’ll have to reduce or enlarge some portions of those images that contain text. Usually, Bicubic resampling is best for downsampling (reducing the size of) images. However, with tiny text, such as 6 points, we find that Bilinear resampling works best, as demonstrated in Figure A.
To test out this technique, open a new document to work on and type some text that’s approximately 12 points. Use any font you prefer. Then, choose Image > Image Size. In the resulting dialog box, enter a new size for the image in the Width and Height text boxes to shrink your text down to approximately 6 points. Then, select the Resample Image check box and choose Bilinear from the pop-up menu. Then, click OK. If you want to compare the two interpolation methods, create a new document that’s similar to the first one and resize the text using Bicubic resampling.
Adjust the tracking
Tracking (or kerning) controls the spacing between letters. Certain fonts look better with their tracking set to Auto. However, when creating text for the Web, sometimes the letters are just too cramped, which makes the words difficult to read. If your text starts to look squished and becomes hard to read, try increasing the Tracking setting to 25 or higher.
To do so, open the Character panel, shown in Figure B. Then, type a value between 25 and 50 in the Tracking text box. As you can see in Figure B, the text with more spacing between each letter is easier to read.
Make your fonts sharp
The smaller your text, the more difficult it becomes to read in a web browser. Photoshop supports multiple anti-aliasing options, including None, Sharp, Crisp, Strong, and Smooth. The two best choices when creating text for the Web are Crisp and Sharp (located on the tool options bar). However, as you decrease the size of your fonts, you’ll definitely want to go with Sharp anti-aliasing. As you can see in Figure C, a 6-point font with Sharp anti-aliasing is much more legible than the same font with Crisp anti-aliasing.
To select an anti-aliasing method, just highlight the text using the Horizontal Type tool. Then, on the tool options bar, choose Sharp from the Anti-Aliasing pop-up menu. You can also change the Anti-Aliasing method directly in the Character panel. The pop-up menu is located in the bottom-right corner of the panel.
Slice the type
Another great way to gain greater control over the appearance of text is by slicing your graphics. Slicing allows you to apply different quality settings to different sections of your image. So, if you have some key text that you want to make completely legible, create a separate slice for it. That way you can set the image quality of the slice containing the important text to maximum, while other portions of your image can receive more compression.
Break things down
For example, in Figure D, we have two regions of text. The top line of text isn’t important, so we can include it as part of the main image slice. The bottom text, however, is extremely important, so we placed it in a separate slice with high-quality output settings. If we had applied the same high-quality settings to the top slice, the output size of our files would have almost doubled!