Home » Convert Graphic Text to Styled Text – graphic text to css text conversion

Convert Graphic Text to Styled Text – graphic text to css text conversion


Converting graphic text to CSS text speeds up your site, makes it more accessible, and search engine friendly.

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
graphic text example

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

CSS Text

Figure 2: CSS Text Example

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


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.

5 thoughts on “Convert Graphic Text to Styled Text – graphic text to css text conversion”

  1. I agree wholeheartedly with the recommendation to convert graphic text to CSS. There’s just one problem on the page: Figure 2 doesn’t look anything like Figure 1 because the style definition #example is not included among the styles for the page.

  2. O.k. I have one question for you…
    You services is to Optimize websites but however this site is failing validation with 28 errors. How can you tell me that with Your services my website will be built with a search engine friendly code structure?
    e-mail me just a concern

  3. looking to speed up my site, not very experienced on codes, site building, had a company build a site for me and I am learning the hard way.


Leave a Comment