Convert Graphic Text to Styled Text

Converting graphic text to styled text is an effective way to speed optimize your website. Graphic text is simply text that has been pixed in stone in a graphic design program like Photoshop. While graphic text allows you to use any font face (see Figure 1), it has a number of disadvantages. .

These include:

• Poor Accessibility
• Lower SEO Rankings
• Slower downloads
• More HTTP requests
• Higher maintenance costs

Figure 1: Graphic Text Example

Styling Text with CSS

Unless your text is part of a logo or image, using text for text is the way to go. By carefully choosing your font face and size from the common fonts used on PCs and Macs you can approximate the look of graphic text with CSS text (see Figure 2).

To create this textual version of our graphic text example we used the same settings we used in Photoshop to create the text.

#example {font:bold 18px palatino,times,serif;color:#03c;}

The only difference is the font-family values, where we list three alternates for PCs (palatino is supported by the Mac).

Character Entity References and Numeric Escape Sequences

Another common problem in the quest for pixel-perfect designs is converting textual symbols into graphics. One example is the » symbol:

» (the escape code for the >> symbol)

Using styled escape sequences instead of the graphic equivalent gives you the same advantages as graphic text, namely:

• Better Accessibility - resizable
• Higher SEO Rankings
• Faster downloads
• Fewer HTTP requests
• Lower maintenance costs

Conclusion

Converting graphic text to styled text speeds up your site by minimizing HTTP requests and reducing page weight. Resizable text, better SEO rankings, and lower maintenance costs make CSS text a superior alternative to pixing your text in stone.

About the Author

Andy King is the founder of five developer-related sites, and the author of Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com) from New Riders Publishing. He publishes the monthly Bandwidth Report, the weekly Optimization Week, the weekly Speed Tweak of the Week, and the semiweekly WebReference Update.

Further Reading

Character Entity References in HTML 4.01

Named and numeric versions of character entities for HTML 4.01.

Minimize HTTP Requests

By combining external files and embedding CSS and JavaScript within your HTML you can minimize the number of HTTP requests required to render your page.

Optimizing Web Graphics

Chapter 12 summary of Speed Up Your Site shows how to optimize your web-bound graphics and convert graphic text to styled text.

By website optimization on 24 Aug 2004 PM

Comments

By: Michael Cook on March 20, 2006 5:12 AM

By: website optimization on March 20, 2006 8:04 AM

By: Manish on July 25, 2006 2:28 AM

By: Norman on July 6, 2007 7:18 PM

By: charles sebastian on September 14, 2007 11:53 AM

Post a comment