In an earlier piece here at SitePoint on a history of CSS image replacement, Baljeet Rathi goes over a number of image replacement techniques, each one more ingenious than the next. These techniques were all focused on solving one problem — how to convey textual content in a beautifully artistic form on the web while keeping it accessible, both to people and search engines. Achieving such a goal in a world of web design without the readily available custom fonts and powerful CSS tools of today was quite a feat.
Taking my cue from Rathi's article, I set out to tackle the following questions:
Image replacement techniques used to be quite popular. Today, these methods of replacing text with background images often get a bad rap among web developers. I'll be examining some of the reasons why later in this article, but given this is the case, which tools and best practices can we use instead?
Are image replacement techniques just ghosts from web design past, or can image replacement techniques still be meaningfully used today without fear of making the web uglier?
Let's begin by looking at the best tool for the job.
Best Tool for the Job: Web Fonts and CSS
If your content is text, use text, don't use images of text.
With the tools at your disposal today, you will hardly need any images in order to relay textual content in a beautiful form.
Easy access to a staggering number of custom web fonts, great browser support for the CSS @font-face property and font streaming services like Typekit and Google Fonts all give you enormous power to communicate a brand, convey emotion, and make an impact with stunning typography on the web.
The capabilities of modern CSS make it a breeze to control transparency levels, add text shadows, blend modes, and even animation to your text – no Photoshop or JavaScript sleight of hand required.
Below is just an example of what you can do with web fonts and CSS:
[caption id="attachment_138990" align="aligncenter" width="600"]
Smart Designs website displays great typography without any images, only web fonts and CSS.[/caption]
Continue reading %It’s Time to Be Honest about Image Replacement Techniques%