• Choose a category
• All
• Classic-Fiction

Using images for headlines

Generally, you should use standard fonts for the page’s main content, so having a limited array of fonts isn’t such a big problem. Sometimes, though, you want to use fonts in your headlines. You can use a graphical editor, like GIMP, to create text-based images and then incorporate them into your pages. Figure 2-5 shows an example of this technique.

Figure 2-5: The font shows up because it’s an image.

In this case, I want to use my special cow font. (I love my cow font.)

Here’s the process:

1. Plan your page.

When you use graphics, you lose a little flexibility. You need to know exactly what the headlines should be. You also need to know what headline will display at what level. Rather than relying on the browser to display your headlines, you’re creating graphics in your graphic tool (I’m using GIMP) and placing them directly in the page.

2. Create your images.

I used the wonderful Logos feature in GIMP (choose Xtns⇒Script-fu⇒logos) to create my cow text. I built an image for each headline with the Bovination tool. I’m just happy to have a Bovination tool. It’s something I’ve always wanted. If only it could be converted to a weapon.

3. Specify font sizes directly.

In the image, it makes sense to specify font sizes in pixels because here you’re really talking about a specific number of pixels. You’re creating “virtual text” in your graphic editor, so make the text whatever size you want it to be in the finished page.

4. Use any font you want.

You don’t have to worry about whether the user has the font because you’re not sending the font, just an image composed with the font.

5. Create a separate image for each headline.

This particular exercise has two images — a level 1 heading and a level 2. Because I’m creating images directly, it’s up to me to keep track of how the image will communicate its headline level.

6. Consider the headline level.

Be sure to make headline level 2 values look a little smaller or less emphasized than level 1. That is, if you have images that will be used in a heading 1 setting, they should use a larger font than images that will be used in a less emphasized heading level. Usually, this is done by adjusting the font size in your images.

7. Build the page the way you normally would.

After you create these specialty images, build a regular Web page. Put

and

tags in exactly the same places you usually do.

8. Put tags inside the headings.

Rather than ordinary text, place image tags inside the

and

tags. See the upcoming code imageTitles.html if you’re a little confused.

9. Put headline text in the alt attribute.

The alt attribute is especially important here because if the user has graphics turned off, the text still appears as an appropriately styled heading. People with slow connections see the text before the images load, and people using text readers can still read the image’s alt text.

Here’s the code used to generate the image-based headers:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

alt = ”Cows in History” />

This page describes famous cows in history

alt = ”Battle of Cowpens” />

Most people are unaware that cattle actually took

part in the battle. They didn’t of course. I just

made that up.

This technique is a nice compromise between custom graphics and ordinary XHTML as follows:

♦ You have great control of your images. If you’re skilled with your graphics tool, you can make any type of image you want act as a headline. There’s literally no limit except your skill and creativity.

♦ The page retains its structure. You still