| Design Basics, Web Design

Like this? Share it.

In the world of web site design, only text is readable by search engines. Images are not. You can add “alt” tags and other descriptive content to the code behind an image, but ultimately text is the most searchable content.

So, you’re thinking… “I see words on my web site, therefore it is text.” But this is not always true, and I’m surprised by how many business owners don’t know if the text on their site is really text or is actually a graphic.

Let’s use the Barnes & Noble web site as an example.

Barnes & Noble home page showing lots of text
The top of the Barnes & Noble Home Page

As you can see, there is lots of text on this page. But not all of it is truly readable text. Much of the page is actually graphic files that show typography.

The difference between real text and a graphic of text

Both look like words. Readable text is created within the HTML and may be styled with CSS. Text that is a graphic has been created outside of the HTML code (using something like photoshop) and is actually an image. Just like a photograph or clipart, typography that is a graphic image is not readable the same way HTML-generated text is.

Quick ways to determine if it’s really text

Now you may be wondering how to figure out if the text on your site is readable. Is it HTML-based text or is it actually a graphic? Here are a few ways you can tell.

  • Highlight the text. One way to figure out if the text is readable is to put your cursor on the text and see if you can highlight it. As you can see (below) I was able to highlight some of the text in the sub navigation bar. This means it’s actual readable text. One caveat: sometimes drop-down and fly-out menus can be difficult to actually highlight text (because your mouse action with trigger a roll-over effect) even when they are actually created with text.
Try to highlight text to figure out if it really is text, not a graphic.
Real text can be highlighted.
  • Try to grab the image or see the image source. The contrast to being able to highlight the text is to be able to view the image information. I was able to put my cursor on the “books” button in the navigational menu and view the image information. When I chose “View Image” I could see it was a .gif file. Therefore it is a graphic, not real text.
View image source for the "books" button

  • Increase the font size within your browser. On most browsers you have the capability to increase the font size or zoom in. If you do this, any text on the page will increase in size. Generally, images will stay at their original size.

Take a look at your site and have a better understanding of whether the words on your web site are really text, or just typographic-based graphic images.

Let’s Talk
  • Hidden
  • Hidden
  • Hidden