Using Image as Replacement for Text : An Introduction

It’s almost one of the first best practises tips that budding designers (who have competent mentors) are taught: In this age when content rules, and every information we put should be visible to search engine crawler bots, you should think twice about using images for typography. Simply putting images in place of text for typographical goodness without any thoughtful preparation might sacrifice your website’s semantic correctness and accessibility. A flawed implementation of achieving this effect (image in lieu of text) might render your content inaccessible to web crawlers and/or inaccessible to screen readers. But indeed, there are circumstances when, because of the lack of aesthetically outstanding fonts that will work 100% all the time (read:all your readers should have that font), image replacement for text can do wonders to your site’s design. The good news is that you can do this while still making your site both accessible and search-engine friendly. Now you can make good use of good fonts in your Photoshop, create beautiful images as place holder for your text (Headings and Drop caps for example).

There are many ways implementing image replacement, and each technique has its own advantages and disadvantages. By carefully studying the techniques that I will discuss, you will not only gain good knowledge about the particular technique, but also the design principles behind each. In the end You should choose what’s right for you (and your design principles).

In my next post I will start with probably one of the most popular image replacement techniques: theFahrner Image Replacement (FIR) technique. Stay tuned.

Go back