Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Optimizing Design: Text Vs. Graphics

You now have options for creating text: CSS or a graphic file. Select the best match for your text elements.


advertisement

TML Text or Graphical Text?
You now have options for creating text: CSS or a graphic file. Select the best match for your text elements.

Until recently the only way to use real typography on the Web was to create the type elements in an image editing program, save them as graphics files, and place them on the Web page, like any other graphic element. This is commonly done for type in titles, headings, buttons, and things other than text.

But now that newer browsers handle Cascading Style Sheets (CSS) and previous generation browsers accept the font tag, you have some options for type that don't involve bandwidth-filling graphic files. The trick is knowing when to use a code solution and when to use a graphic file.



In this example we wanted a reddish-hued text at 16 points in Helvetica or similar face:

Font Tag:
Text can be roughly formatted using <font> tag information:
<font size="5" face="helvetica, arial, sans-serif" color="#CC0000">This is text</font>
This is text
CSS:
Text can more accurately displayed using CSS, either inline as shown here, or as a style declaration. CSS is recommended over the font tag: <p style="font-size:18pt; font=family: 'helvetica', 'arial', sans-serif; color:#CC0000;">This is text</p>

With either the font tag or CSS, the text will appear correctly only when the viewer's system has one of the specified faces and the browser supports font tags or CSS.

If these examples don't look right on your browser, your browser is probably older and non-CSS compliant or you don't have the standard faces of either Helvetica or Arial on your system.

This is text

This is a GIF file which has the same specification as the text above, but will appear this way regardless of the viewer's system. It is on a white background so you can see the size and shape of the graphic file that contains it.

As you can see, using HTML to specify the font works quite well in this example. Your viewer gets the effect of the font display with no download overhead, the text is easy to edit—you can make either display or content changes right in the HTML file, without turning to an external graphics program and recreating a graphics file.

In this example, the graphics file is a small 1K—which might not seem like much savings, but consider the savings if the page has 15 text buttons, or if each of the twenty subheads can be presented as text rather than a graphic. And don't underestimate the time savings in maintaining one code file rather than 15 or 20 different graphics files.

In this example, we want to use a more unusual font:

Font Tag:

<font size="6" face="Airstream ITC, sans-serif" color="#6600CC">This is text</font>

CSS:
<p style="font-size: 22pt; font-family: 'Airstream ITC', sans-serif; color:#6600CC;">This is text</p>

Most viewers do not have the Airstream ITC font, so they will see the default sans-serif face, the last specified face or family option in the HTML code.
This is text

This is text

This is a GIF file which has the same specification as the text above, but will appear this way regardless of the viewer's system. If the sample above doesn't look like this graphic, you do not have Airstream ITC and are seeing your browser's default san-serif font. The graphic is set against a white background so you can see its size and shape.

If you are using an unusual face, you're better off creating the text as a graphic, to be sure that all readers will see what you've intended them to see.

Use CSS when the font is likely to be on the user's system and the user has a 4.X or later browser.

Create a graphic when the font face and style are unusual or unique and not likely to be installed on the user's system.





Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap