Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

If you want to have a fixed header on a web page that also includes text, is it better to make that text part of the image, or to overlay the text in the header frame (such that the text is selectable, scalable, screen-reader accessible, etc)?

I'm currently in a debate over whether it would be better to embed the text in the header image on our forums. One problem is that if the background image is something we want to repeat horizontally as the page is widened, the text can't be rasterized to it because it would repeat as well - we'd need a transparent image of just the text to overlay on top of the background header image. Also, the background image selected might just fade into a solid colour for stretching, we haven't picked one out yet.

What's to be gained and lost in each scenario?

From looking at other sites on the internet, it seems like the most popular option is to rasterize the text into the header image - but a lot of times this is because the text is highly stylized as part of the logo. In our case, it's just a simple title and caption, like in a blog.

Wikipedia rasterizes:

enter image description here

Windows Live doesn't:

enter image description here

Google does for their main logo, but not for their caption:

enter image description here

share|improve this question
2  
Your examples are logotypes--which typically will have some form of custom typography--which typically means you can't just set them in any-old text. –  DA01 Jan 17 '12 at 5:56
    
"Google does for their main logo, but not for their caption" -- because the logo is in custom 'font' while the caption is not. Logos & Trademarks are not considered 'text' even if all they contain is 'text' in the general sense. –  Kris Jan 18 '12 at 9:40
add comment

5 Answers 5

up vote 5 down vote accepted

i personally do text whenever i can to save bandwidth and optimize a website. what you cannot do in text, that's when you do it in images.

here's some guidelines i follow:

Text

Pros:

Cons:

  • without CSS3 or at least modern approaches, it's awful!

  • fonts (unless you use web-fonts)

  • must be styled properly so they won't break

Images

Pros:

  • if it includes graphics

  • if text can't do it alone

  • if it includes your logo that can't be done by text alone

  • cacheable and save-able (obviously)

Cons:

  • recently, i browsed a person's portfolio which relied heavily on images (even the text was made into images), they were shrunk on mobile. the large ones cannot be seen instantly. try this site on a mobile, like opera mini: http://www.onin256a.com/projects/

  • an added bulk to your HTTP request. see why they use sprites instead of individual imageseven google sprites images in gmail to avoid further http requests

  • must be marked-up properly to be picked up by screen readers

  • not easily editable if you don't have the original copy.

some books i read:

Designing Web Interfaces

designing with progressive enhancement

Universal Design for Web Applications

share|improve this answer
    
Nice list; can you reference the data that caused you to form your opinion for each point? –  Rahul Jan 16 '12 at 19:39
    
actually, it's a set of guidelines i have followed eversince i started developing for the web. others are obvious reasons also. some come from web optimization. but i have read these books: filamentgroup.com/dwpe, designingwebinterfaces.com/explore, and shop.oreilly.com/product/9780596518745.do –  Joseph the Dreamer Jan 16 '12 at 19:45
    
Why don't you add those into your answer (and explain what parts of each book is relevant for the OP)? –  Rahul Jan 16 '12 at 19:46
add comment

Probably the only reason to rasterize the text is special visual effects that would be difficult to achieve by other means. Every other factor that I can think of would be in favor of live text. You mentioned some of the reasons yourself. Another very important reason is SEO - the crawlers can't see rasterized text, so if it's important to you that your site name lead to your website, you should use live text.

share|improve this answer
1  
With all the features/power of CSS3, there's actually very little reason to rasterize text anymore. See: CSS Shadow, CSS @font-face, CSS 3D, etc. Here's a link with a handful of cool effects. –  borego Jan 16 '12 at 18:33
add comment

Rasterized text in a logo:

The good:

  1. Makes your logo portable: it can be copied and pasted with no need for CSS
  2. Works in all browsers: CSS text effects and @fontface fonts may display differently on different browsers, images ensure the logo will always look the same
  3. Allows a great deal more customization than text: you can make each letter an image or generally do anything you can in an image.

The bad:

  1. Not ready by screen readers: you'll have to use an alt attribute for accessability.
  2. Bandwidth use and load times: no amount of CSS can waste as much space as an image.
  3. Harder to style: You'll have to edit the original image to make an image header fit a new style or website. Text is easy to style in CSS.

Text

The Good:

  1. Easy to style and suit any website: CSS3 makes this even easier and allows for graceful degredation and targeted styles.
  2. Easy to target mobile devices: Mobile is just a media query away.
  3. Accessible: It's text, screen readers will read it just as you lay it out.

The bad:

  1. CSS and photoshop are different skills.
  2. More limited.
  3. Only modern browsers will see the very shinyiest of CSS3 and HTML5 effects.

The main benefit of an image is that it's easier to make one time and you can do some more advanced stuff with it. Long term however text generally wins out, especially in the age of CSS3, where we can make beautiful type rather than beautiful pictures of type. With the web's dynamic nature, pretty pictures of text don't cut it anymore.

share|improve this answer
add comment

Not if you can help.

As things stand today, I would suggest using 'text' in images only when it is a work of art, thus excluding the question of font rasterization.

In all other cases, it is possible and it is recommended to use text in all its purity.

share|improve this answer
add comment

Desktops, laptops, tablets, phones. It is always recommended that you maintain your look on any kind of layout. Text is always responsive. Then you apply CSS3 and generate effects. Even those effects are going to be responsive.

PS: As you have mentioned 'Text' in your question, I am only talking about 'Text'. Be it the 'Text' of logo or menu bar or any other image.

share|improve this answer
    
Not sure how 'Text' of logo or menu bar or any other image are each different. Can you pl elaborate? –  Kris Jan 18 '12 at 9:28
    
I didn't understand what you're not sure about. I was talking about keeping layout responsive. As layout consists of many things, I clarified that I'm talking about only 'Text'. Btw, you made a good point in your answer - "I would suggest using 'text' in images only when it is a work of art" –  Krunal Rasik Patel Jan 25 '12 at 7:22
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.