Chapter 12

Using Text in Design


CONTENTS

Effective Web pages combine textual and graphical elements in order to convey information. What you might forget is that text elements do more than just convey written information. Font, size, weight, color, and placement all contribute subtle (and sometimes not so subtle) nuances to your reading. So text is more than just the words. . .it's how those words are presented.

Take, for example, the word "picnic" in Figure 12.1. Both instances have the same characters, but one does a much better job of conveying the feeling of the word because of the choice of font, weight, color, and design.

Figure 12.1 : Your choice of font characteristics contributes to the effectiveness of the message.

In order to effectively use text on Web pages, you need to combine a knowledge of what Hypertext Markup Language (HTML) can and can't do with other graphics programs such as Photoshop and Illustrator (or Fractal Painter and FreeHand).

Mixing HTML Text and Your Graphics

Let's find out what we can do with HTML text so this can be supplemented later with graphic text. Many browser-specific extensions have been included in Release 3 of HTML, but you'll still have to experiment with browsers to find out which tags will work.

As of this writing, HTML and its extensions remain a poor choice for doing creative text manipulation; plus, each browser does its own thing in interpreting the HTML code. Still, here are some ideas you can try:

NOTE
A neat way to get more flexibility in your HTML type design is to create a number of transparent Graphical Interchange Format (GIF) files of specific widths to be used as spacers. This is how you do it.
In an image editor create a white canvas 12 pixels high and 1 pixel wide. Save this in bitmap mode and in GIF format. Make the white pixels trans-parent. Then, edit this file, adding canvas to make a number of files of incremental width-say 10, 20, 30, and so on. Or if you think in inches, make the files 18, 36, 54, and 72 pixels wide. This results in spacers 1/ 4, 1/ 2, 3/ 4, and 1 inch wide. To implement, determine the space you need and use the <IMG SRC="spacer.gif"> structure at the spot you want the space.

Creating a Mixed Page

The real power and flexibility of Web page design lies in the mixing of HTML text and text that you compose in a graphic editor and combine on the page. To combine HTML text and graphic text

  1. Decide which text will change and which will remain constant. Text that you need to change frequently needs to be set in HTML. A sketch like that shown in Figure 2.12 is a great way to plan your page.
  2. Decide which text needs to make an impression other than its delivery of information (see Figure 12.1). Text that needs to convey a mood, an attitude, or a statement should be created in a graphic editor.
  3. Open a graphic editor like Photoshop and set your graphic text. Use either TrueType or Adobe Type Manager (ATM)-supported PostScript fonts for the smoothest results. If you know the background color of your Web page, use the same color in Photoshop and anti-alias the text. This will produce the best results. If you don't know the background color yet, set the text without anti-alias turned on.
  4. Create the graphic text at the display size you want on the page and with the smallest palette and bit depth possible.
  5. Save the text either in GIF or JPEG format. GIF is usually fine with solid-color text.
  6. Choose a structure that best accomplishes the integration of text and graphic text. Choose between inline, tables, and image maps (read about image maps in Chapter 14, "Making Image Maps and HTML Frames").

Designing with HTML Fonts

Many Web pages are designed to mimic existing publications and require a techni-cian's eye rather than that of a creative designer. Existing publications are matched on the Web when readers have learned to expect information in certain locations or with familiar formatting. To create a brand new design would reduce the effectiveness-what might even be the product identity-that may have taken years to establish.

Several text processing and page layout programs have automated this process. PageMaker 6, for example, lets you design your pages in PageMaker and then translate the pages into HTML code. Be prepared to fiddle with the code to establish links to external URLs and to ensure that paths to images are correct.

Matching an existing style is often as challenging as making a page with few, if any, guidelines. Figure 12.9 shows a page from a technical journal and its re-creation in HTML.

Figure 12.9 : Using HTML to recreate an existing page design.

Playing with Character Graphics

If you're old enough to remember programming graphics on computers by laboriously determining the placement of characters (+, *, ^, |, -), you're probably thinking about retirement. Not that I'd do very much of this-although there are utilities that exist to translate grayscale information into ASCII characters. Still, it's an interesting alternative to bitmapped graphics. Figure 12.10 shows a title page done in character graphics, including an HREF text menu bar.

Figure 12.10: Using character graphics to produce a graphic style.

WEB WORKSHOP
In previous workshops you have seen how to format text and graphics using the <TABLE> structure. In this example, a page of text utilizes many of the formatting structures just discussed.
By far, the greatest limitations in using HTML-only text formatting are in having no really large and bold text for big headings and in having access to only two font families (serif and typewriter).

Formatting Inline Graphics

You can't discuss formatting text without discussing formatting graphics because if they're on the same page, one affects the other. If you thought HTML was limited in its ability to control design through text, its graphic functionality is almost zip! As a starter, you have control over

Coding an Inline Graphic

A graphic on a Web page actually doesn't exist on the page itself. Instead, it is brought to the page using the <IMG SRC> tag. For the browser to locate and display the graphic, the following must occur:

If any of the above are not satisfied, your browser will display an icon representing the graphic. If you are considerate, you already have included a textual description so the user can see what they're missing.

Deciding Heading Options

To plan effective headings, just reach into your memory banks to somewhere around the seventh grade. Remember what Mrs. Frump told you: "Don't include a heading with only one subhead." Use headings to break the page into logical divisions. You can accept HTML's <H> tag organization or make your own. Personally, I think heads in HTML are just fine.

Headings without a sufficient amount of whitespace do little to break the page into readable sections. Use the <BR></BR> structure to insert line breaks into a page. It's like VSPACE for paragraphs! Figure 12.15 shows two examples. Which one would you rather read?

Figure 12.15: Combine effective heads with whitespace and you increase readability.

The last structure to help divide a page visually is to use horizontal rules (<HR>), which are horizontal grooves on the page of your graphic browser. Adding the parameter NOSHADE within the delimiters produces a black rule, no groove. The shaded horizontal rule is a default design based on a gray background. This still works with most hexadecimal backgrounds or backgrounds you create, more or less.

Rules are often overused. A page with too many horizontal rules is more difficult to read. Use them to set off major sections of your page or things like footnotes or e-mail addresses. The <HR> can be modified with a thickness parameter such as <HR SIZE=4>. Our page with heads, space, and rules is shown in Figure 12.16.

Figure 12.16: The completed page.

Avoiding the Boredom of Flat Text

Let's leave the discussion of HTML text and explore ways where more design flexibility can be introduced to the page. To do this, you need to become familiar with programs that produce well-defined text in a raster or bitmap format.

Before you get into the actual mechanics of making more interesting text, you should be aware of at least the basics of font technology because these issues directly affect the quality of text you can produce.

The text you see on the screen is, by default, bitmapped. There's no way around it. A raster display device displays raster text. However, your ability to create good-looking text at any size depends on the following:

Making 3D Text

Three-dimensional text adds lots of eye appeal to your page. It is so strong, however, that it should be used carefully, generally as logos, headers, or splash page graphics. The best way to produce 3D text is to use a 3D modeling program. Figure 12.17 shows a graphic with 3D text created in Autodesk's 3D Studio program.

Figure 12.17: Three-dimensional text from a modeling-rendering-animation program.

TIP
Text looks 3D because you can see the top, front, and sides of the letters. It looks even more 3D when these three planes are shaded consistently with the top being the lightest and the side the darkest.

If you don't want to follow the 3D modeling route, you can produce credible results by creating two-dimensional pictorial text (flat text that looks 3D) by completing the following steps:

  1. In a program such as FreeHand, Illustrator, or CorelDRAW!, create the text you want. Duplicate this text and connect the corners.
  2. Edit the text so that lines in the back are hidden.
  3. Export as a TIFF or an EPS and open in image editor. Colorize and save in the appropriate format (see Figure 12.18).

Figure 12.18: Developing 2D pictorial text that looks 3D.

Making Engraved Text

Text that looks engraved has a more realistic appearance than text that looks like it's simply been painted on a surface. Use this technique for icons (see Figure 12.19) and text on buttons. To make engraved text, follow these steps:

Figure 12.19: Engraved text darkens the text so it looks like it is below the surface.

  1. Set the text in the color of the panel. Place the text where you want it. While it's still selected, copy it to the clipboard.
  2. Paste and move the shadow up and to the left 3 pixels. This will become your engraved shadow.
  3. Decrease brightness 40 percent for the shadow.
  4. Paste and move highlight down and to the right 3 pixels. This will become your engraved highlight edge.
  5. Increase brightness 40 percent for the highlight.
  6. Paste text and move to the position in between the shadow and the highlight. This is the body of the text slightly below the surface (the engraved part). You should see only a small amount of the shadow and highlighted text. Decrease brightness 20 percent to make it look depressed.

TIP
Don't use engraved or embossed text for passages that require in-depth reading. Use these techniques for text that is part of a manufactured product.

Making Embossed Text

Embossed text is just like engraved text with the shadow and highlight reversed and with the body of the text lightened to make it look like it is raised from the surface (see Figure 12.20). To make embossed text, follow these steps:

Figure 12.20: Embossed text lightens the text so it looks like it is above the surface.

  1. Set the text in the color of the panel. Place the text where you want it, and while it's still selected, copy it to the clipboard.
  2. Paste and move the shadow down and to the right 3 pixels. This will become the shadow of the embossed text.
  3. Decrease the brightness 40 percent.
  4. Paste and move the shadow up and to the left 3 pixels. This will become the highlight of the embossed text.
  5. Increase brightness 40 percent for the highlight.
  6. Paste text and move to the position in between the shadow and highlight. This is the body of the text slightly above the surface (the embossed part). You should see only a small amount of the shadow and highlight text. Increase brightness 20 percent to make it look like it stands out from the background.

Making Metallic Text

Metallic text uses smooth changes in the value or color to make a surface look shiny. Metallic text is effective when it is contrasted with a darker background (see Figure 12.21). To create metallic text, follow these steps:

Figure 12.21: Metallic text uses color and value contrast to achieve a realistic material representation.

  1. Create a rectangular selection and fill it with a smooth gradient from dark to light.
  2. Select a diagonal area. Feather this selection to produce soft edges and lighten to create a highlight. Copy this metallic panel to the clipboard.
  3. Create your text in black on a background that will contrast with the metallic text.
  4. Select the black text.
  5. Paste the metallic texture into the selected text.

TIP
Metallic text works best when the letters have a slight thickness. Study the final metal text in Figure 12.21. Make sure highlight direction matches highlight edges and drop shadows. Pick a direction of sun and stick with it.

Making Soft Rounded Text

Rounded text provides an interesting contrast with the rest of the text on your pages. Much like the metallic text, soft rounded text is the most effective when good contrast is achieved between the text and the background. To create soft rounded text, follow these steps:

  1. Create your text in the desired color. The font should have thick letter strokes for this technique to work the best.
  2. Select off-white and off-black highlight and shade colors based on the text color (that is, lighter red and darker red). Save these colors in the current palette. Make the highlight color active.
  3. With the Lasso tool in the free mode, select highlight areas on the upper left of each letter and feather 5-10 pixels. The more the feather, the softer the rounded edges.
  4. Paint Bucket fill with opacity set at 50 percent to begin. Click on the colored part of the text. Undo to cancel and adjust opacity. You may want to occasionally hide the selection marquee to better see the results.
  5. Switch colors to the shadow. Repeat for the shaded portion of the text, selecting the lower-right portion of the text.
  6. If you want, add airbrush sparkles inside the feathered selection for shine (see Figure 12.22).

Figure 12.22: Soft rounded text provides an interesting alternative to flat text for titles and logos.

TIP
Anytime you need instant highlights and shadows, adjust the brightness +60 percent and -60 percent. You'll never have to mix colors again!

Making Projected Text

Text that looks like it is being projected in light onto a screen is a subtle, effective way to add terms or words to a graphic (see Figure 12.23). Use this technique when you want an almost subliminal message to accompany an image. To make text look like its being projected on an image, follow these steps:

Figure 12.23: Text projected on a photograph is used to convey a subtle message.

  1. Open the image or photograph you want to use as the basis of your graphic.
  2. Create a text layer with opacity set to 60 percent. Make this layer active.
  3. Make white or off-white your active color.
  4. Set the text. This should be large enough to read (between 18 and 72 points).
  5. The text will be translucent, which allows the photograph to be seen through the letters. Merge the layers.

Making Transparent Panel Text

Rather than using lighter text projected on an image, let's try regular black text on a transparent or smoke gray panel. This is best when you want the text for reading-when the text is 12 to 14 points in size (see Figure 12.24). To create a transparent panel text, follow these steps:

Figure 12.24: Text on transparent and smoked panels.

  1. Create a rectangular selection in the desired location. If the base graphic is dark, adjust brightness +60 percent. If the base graphic is light, adjust the brightness -60 percent.
  2. Set your text in black on top of the lighter panel and white on the darker panel.

Making That Popular Fuzzy Drop Shadow

This technique is easier than you might first think, and it is one that is popular right now (though it may look dated next week). The key is in using the brightness adjustment rather than mixing shadow colors. To create a soft drop shadow, follow these steps:

  1. Create the background you want the text to hover above.
  2. Set the text in black on a separate layer. Select the black text. Decrease the opacity of that layer to 1 percent.
  3. Switch to the background layer. The text selection should be active but empty.
  4. Feather this selection to the desired level of softness.
  5. Decrease brightness of the background -60 percent to produce the shadow.
  6. Make the text layer active. Return opacity to 100 percent. Offset the black text to produce the desired distance between text and background. Stylize the text however you want (metallic, rounded, or colorized).
  7. Merge the layers and save in the desired format.

Figure 12.25: That popular fuzzy drop shadow.

TIP
A shadow's edge becomes more fuzzy as an object gets farther away from the surface catching the shadow. This visual cue helps build depth in your graphics.

Next Steps

Now that you have been shown techniques to use text to maximum effectiveness on your Web pages, consider the following:

Q&A

Q:I created a great graphic for my home page but when it loads, I can only see the upper left corner. What happened?
A:You used a resolution higher than 72 dpi when you made the graphic. Your browser maps each pixel in your graphic to a pixel on the screen. You have two alternatives. First, scale the graphic with WIDTH and HEIGHT variables inside the <IMG SRC> structure. It will slow down the load, and you may get surprise dithering. Or, go back into your image editor and resample the image to 72 dpi. Save as a new file so you don't destroy all that hard work! You'll lose the detail you were so proud of, but it will display at the right scale.
Q:All my inline graphics keep the following text on the same line. I want the text to follow the graphic. What do I do?
A:Sounds like you're using the LEFT alignment option in the <IMG SRC> structure. Force the text onto another line with a line break, <BR></BR>.
Q: All of my text after a H1 heading is the same size as the heading. What went wrong?
A:You left off the closing </H1> tag. Your browser is looking for it. Add it at the end of the heading text.
Q:I have trouble combining the artistic text I've done in Photoshop with background textures. I turn the white pixels around the text transparent, but I still get a ring around each letter. How can I get rid of this?
A:You have the dreaded anti-alias halo! If your text is already anti-aliased, you have a little editing to do. See "Mistake Number 3" in Chapter 11, "How to Avoid the Ten Most Common Web Mistakes." Suggestion: Anti-alias after combining the text and background.
Q:When I make rounded text, I always end up messing with the pixels around the letters. How can I just work on the letters?
A:The best strategy for adding text to anything other than a white background is to work on the text in a separate file or on a separate layer. That way you won't be changing background pixels. Combine the text and background when you're ready by copying and pasting or merging layers.