Web Safe Fonts – Part 5

Trevon Perez     – NYC, NY
123Triad: Web Design & SEO Company

Web Safe Fonts – Part 5

In this article I continue discussing ways of using non-web safe fonts- using images.

There are techniques one can use in his CSS and (X)HTML which will let him use images in place of regular text at the same time maintaining his site’s accessibility as well as search engine friendliness.

As for screen readers as well as other situations where images might not be quite accessible, there is a 1-pixel image with a text that is alt which reads “Image replacement techniques.” In this way, we are not harming accessibility and also screen readers will still do pick up the text as one intends it.

One of the disadvantages to using this particular technique is that it adds some elements which are extraneous to ones (X)HTML. They do not harm anything, but they add more bulk to ones work and the file size of ones document. Also, it makes it more difficult for one to follow when reading ones site’s code. Still, it is a fantastic way for one to add rich typography to his site.

An astute reader may have taken already a peek at this article section to get a look at the CSS that is used here. Please one should note that I did modify the technique a little bit for use on WPDFD as it already has pre-existing styles. If one wants to try out this image replacement technique on his site, I would provide him the better code with which to work.

I will even provide the images to work with if one wishes to have them.

spacer.gif — yes, I do acknowledge the general feelings concerning spacer.gif. Let us just keep it between us.

•    irt.gif. Here is the header image.

Second, one should add this code to his CSS file.

#header {
height: 30px;
width: 250px;
background-image: url(irt.gif);
}
#header span {
display: none;
}

Finally, one should implement the image replacement with this in his (X)HTML:

<h3 id=”header”>
<img src=”spacer.gif” alt=”Image replacement techniques” />
<span>Image replacement techniques</span>
</h3>

One should view it in a browser, and he should see the effect at work.

One should use sIFR

Scalable Inman Flash Replacement (sIFR) is perhaps one of the most popular ways to use rich, beautiful fonts on ones page. Indeed, one can see its example at the top of each WPDFD article. There are only very few steps to setting up sIFR, this including a process that is called “font tuning” (don’t worry, this is not tough), but generally it still takes even an experienced Web developer/designer roughly 10 minutes just to set it up across a site which did not previously use it.

It is usually easy to set up, however, and it has got many benefits. It provides accessible, scalable text in a font of ones choosing by dropping a Flash element with a background that is transparent in place of ones original text. If a visitor to ones site does not have Flash, javascript, or either installed, then ones text is still displayed on his page in a CSS-styled header which is normal.

Personally, I would recommend the sIFR method if one wants to really strengthen his site’s typography. It is very important to note, though, that sIFR is not supposed to be used for the main content of ones site. One should use it for quotes, headers, slogans, as well as other small, though significant, bits of text.

At the moment, sIFR 2 is the standard, and sIFR 3 is in beta testing. When sIFR 3 is out of the beta and I have had some time just to play with it, I do fully intend to cover this topic in more detail later.

123Triad webdesign offers affordable custom website design. Our full service website design company only hires certified website designers. Please contact us today on 1-800-720-0816 for your next web site design project.

Related posts:

1. Web Safe Fonts – Part 4
2. A Web Safe Fonts – Part 2
3. Web Safe Fonts – Part 3
4. Original Web Design
5. Fonts for web design