3

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

Improve this question
2
  • 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
    Commented Jan 17, 2012 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
    Commented Jan 18, 2012 at 9:40

5 Answers 5

Reset to default
7

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 are 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

Improve this answer
3
  • Nice list; can you reference the data that caused you to form your opinion for each point?
    – Rahul
    Commented Jan 16, 2012 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
    Commented Jan 16, 2012 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
    Commented Jan 16, 2012 at 19:46
6

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.

Improve this answer
1
  • 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.
    – Brad Orego
    Commented Jan 16, 2012 at 18:33
4

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.

Improve this answer
2

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.

Improve this answer
2
  • Not sure how 'Text' of logo or menu bar or any other image are each different. Can you pl elaborate?
    – Kris
    Commented Jan 18, 2012 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
    Commented Jan 25, 2012 at 7:22
2

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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