| Design Basics, Web Design

Like this? Share it.

In my last post, I explained how all items that look like text are not necessarily true readable text, and showed how to figure out if the text on your web site really is text. Otherwise, text elements may actually be graphic images that are just typographic (rather than being a photo, etc.).

A recent screen grab of the Apple home page which is nearly all graphics, including the type.

A recent screen grab of the Apple home page which is nearly all graphics, including the type.

If we know that search engines cannot really read these graphic text elements, then why do designers use them?

  1. Some web designers don’t know any better. A designer who comes from a print background where adjusting the nuances of typography are very desirable, may resort to creating their text into graphics without giving it much thought. (Note: this is not a good reason).
  2. Sometimes a typographic look is a integral part of a brand identity. Not all type should be presented as HTML text. On the most critical level, we would never expect a company name to be set as HTML text, we’d expect it to be their logo type. There may be other elements of your brand identity that are very typography-driven which would be lost if it were set as HTML text.
  3. There is a desire to use a non-web safe font. There are only a handful of fonts that are considered universal across computer systems and deemed web safe. If a designer wants to use a font outside of that list, then the typography will need to be converted into a graphic.
  4. The design effect is more important than the ability to be searched via google or other search engines. This may seem like heresy to some SEO zealots, but sometimes design and branding is more important than SEO. In the most general terms, there are two steps that are necessary for a web site to be effective: getting people to the site; and then having the viewer do whatever the web site owner wants (buy something, contact the owner, read something, etc.) While SEO can be helpful in driving traffic, a well designed web site can help immensely with the second step of holding a viewers attention or pressing them into action.
  5. The text in question is not critical to SEO. This subtlety of this idea seems to be lost on some web developers who are too focused on SEO. As an example, if the elements in your main navigation include: About Us, Contact Us, Products, News, and Biographies you can be pretty assured no one is searching on those terms. You are not going to lose any search engine traffic by converting those text items to graphics. And you may keep a visitor interested or create a more professional image for yourself by using some well-designed typographic elements. (Of course, you should also consider adjusting your navigational elements to more descriptive elements such as replacing a term like Products with XYZ Widgets.)

When you hire a designer to design and develop your web site, make sure you have an understanding of what typographic elements will be created as graphics and which will be true HTML text. Make sure the web designer you work with is not just making things graphic elements because of reason #1 above. But do allow that sometimes reasons 2-5 are worth considering.

There are times when design and branding have to fight with SEO to find the right balance between finding web traffic and keeping viewers engaged.


  1. Mike Maddaloni - @thehotiron | September 10, 2010 at 2:21 pm

    From my experience, #1 is usually the case for most text in images. And when I mean text, I mean paragraphs of text, not just the stylized name of a company accompanying its logo!

    Also, there are many designers who are not up-to-date on the latest design methods and using CSS. Classic examples are sites you and I collaborated on, including OUIJA – For The Record and Spartan Charters where the words of the navigation are elegantly styled with CSS, not locked into an image.

    These cases are where designers and developers must work together to strike a balance for the creation of awesome Web designs.


  2. Emily Brackett | September 13, 2010 at 10:09 am

    Mike, I hope you meant those sites were classic examples of what can/should be done. Not classic examples of using text as graphics! I know that’s what you meant.

    Readers, here are those links: http://ouijafortherecord.com/ (You’ll see navigation is all text, but the book name is a graphic). http://spartancharters.com/ (The navigation is text, but the rollovers on the photos are graphics)

  3. west-texan | September 10, 2010 at 8:51 pm

    Text in a picture will look the same in all browers, but you can’t say that for all CSS text.

  4. Emily Brackett | September 13, 2010 at 10:11 am

    West-texan, thanks for stopping by!

    Yes, you are right and I should have spelled that out more directly in #2 or #3 above. If you MUST have something look exactly the same in all browsers, it will have to be a graphic.

  5. Andy Lewis | September 14, 2010 at 2:05 am

    Greetings, I just randomly stumbled across this and thought I’d comment.

    There is always a way to push text across to search engines whether you prefer to use images over type, or you are just simply required; just because text isn’t seen on the viewable page doesn’t mean it’s not there.

    Most notably, you can assign the image as a background to a container and within the container place your text and push it off the viewable page with CSS. Also, another method and one every designer/programmer should use, the image attribute “alt” allows you to assign text to be associated with the image. This is not only read by a majority of search engines but also allows further site usability specifically for those visually impaired.

    These are just two common ways that I use for most of my work, but there are other methods as well. And by no means am I suggesting you should use images in lieu of text. It’s always best to optimize your site, and images in some cases put unneeded strain on load times, etc. There are just many reason for using images as there are against. You can find some good rules out there to follow, but you shouldn’t be swayed from using images in place of text because of SEO.

  6. Emily Brackett | September 14, 2010 at 6:03 am

    Welcome Andy. Yes those are 2 very good methods that should be employed if a designer decides to use images. I did the background trick with the navigation on this site. This works well to keep those items searchable.


  1. designfloat.com
  2. joyoge.com
  3. BizSugar.com

Join the Conversation