Optimizing Design: Text Vs. Graphics

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 tag information:
This is text
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:

This is text



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:

This is text

CSS:

This is text



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.

Text with CSS

CSS is the direction for Web pages; it works with both HTML and XML and provides display control through code.

Cascading Style Sheets are implemented in all current browsers. No browser is 100% compliant yet, but for basic text display all 4X and later browsers will respond the the basic CSS text display properties.

The Font tag will let you create some of the same display effects, but as of HTML 4.0, it is no longer considered a valid tag. It is a good idea to begin using CSS to ensure your documents will be compliant in the future as well as today.

For a full reference and tutorials on CSS, check out The CSS Zone. This chart provides a few highlights:

Inline structure:


Declaration structure, used between style tags in header of document or in external .css file:
tagname {css-property: value; css-property2: value;}
set text colorcolor: colorvalue;
set font familyfont-family: ‘font name’, ‘font name2’, generic;
set text sizefont-size: XXpt;
set boldfont-weight: bold;
set normal weightfont-weight: normal;
set italicfont-style: italic;
set normal stylefont-style: normal;
set alignmenttext-align: left/right/center/justify;
set underlinedtext-decoration: underline;
set underline offtext-decoration: none;

Use CSS rather than the font tag to set font display values.

Text as a Graphic

Some text treatments, especially those with unique fonts or special effects, should be treated as a graphic.

In Most Cases, Save Text Treatments as GIFS.
If your type design is primarily solid colors?and most are?it will work best in GIF format. If you have created a special effect with continuous tone coloration or photo-realistic fills, try a JPG format.  (Just keep in mind that you can’t make a JPG with a transparent background and you may not always be able to match the JPG background to the browser background color.)

This graphic works best as a GIFThis graphic works best as a JPEG

Anti-alias Larger Sizes of Type
When you convert your graphic to GIF format you may find that your color palette contains many more colors than you expect it to. A red word on a white background may result in an adaptive palette of 64 different colors. These extra colors are created by anti-aliasing the graphic.

For printed reproduction, high resolution output devices use very small pixels (high dpi, typically 600-2400 dpi) which create smooth edges on curves and smooth color changes. The computer monitor is limited to roughly 72 dp, making edges very jagged. To compensate for this, different values are assigned to the pixels surrounding the edges, which helps give a visual illusion of smoothness and makes the type more pleasant to view and easier to read.

This table shows the effects of anti-aliasing type:

Aliased graphics have jagged edges. This is a 1K file. Anti-aliased graphics have smooth edges, but the smoothness comes at a file size price. This file is a 2K file.

Don’t Anti-alias when File Size Is Critical.
Many designers think that anti-aliased graphics always look better. While aesthetically this may be true, when you take the file size into consideration, you may decide your readers will benefit more from quick loading that smooth curves. Look at your text both aliased and anti-aliased and judge where the visual appearance/file size balance lies for your page.

Don’t Anti-alias Small Type
Small type often becomes fuzzy and illegible if it is anti-aliased, especially for a mono-spaced font like OCR. However, for some faces, two layers of anti-aliased type will generate more readable type:

Aliased type is easier to read at small sizes.Anti-aliased type becomes blurry at small sizes.Two layers of the same anti-aliased type can improve the legibility.

Use Special Effects Judiciously
Many image editing programs used to create type graphics also support numerous special effects and filter manipulations such as drop shadows and glows. These effects can enhance the appearance of the type, if used judiciously. However they also confuse the process of deciding which file format (GIF or JPEG) is best for the graphic, increase file size, and might even overwhelm the message.

If your text graphics are getting overly FXed, take a minute to really look at what you are creating. Does the text solution help the overall design, or does it distract from it? Does the text solution help the page communicate to the viewer, or is it confusing? Does the FX make sense or are you just madly in love with it? If any of this feels familiar, reevaluate your text and try simpler possibilities. Try the text as HTML formatted text, try it as a simpler text graphic, try it as your FX version, then compare and see which enhances the communication most.

Notes: Which image makes a clearer visual statement? If your images start looking like the one on the left, take a break and reevaluate what your are trying to say with the letters.

Anti-aliasing makes larger type appear smoother. Anti-alias large type if file size isn’t an issue.

Don’t anti-alias smaller (12 point and under) type; it will often look blurry.

Use special text effects wisely and only where they add value.

Checklist for Text Effects

Follow this simplecheck list as you think about text as a graphic element.
Make your text brief, eliminate any extra words.
Select a font, size, and color appropriate for your page, and don’t create graphics that include all 100 fonts you own.
Save your file in GIF format, unless you have added continuous tone effects to the text.
Try saving your type treatment graphic both aliased and anti-aliased; evaluate each for legibility and file size and select the one which works best. Don’t just assume anti-aliasing is always the best.
Crop the graphic image as small as possible and don’t include background area unless it is visually necessary.
If you are using special edge effects, including anti-aliasing, make the indexed transparency color match the background color of your Web page. If you match another color, the text will have an odd ripple around the edge when place in your page.
Save your file in the native format of the graphics program, as well as in GIF format. That way you’ll be able to return to it later if you need to edit the text or create additional text that matches in style.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

The Latest

homes in the real estate industry

Exploring the Latest Tech Trends Impacting the Real Estate Industry

The real estate industry is changing thanks to the newest technological advancements. These new developments — from blockchain and AI to virtual reality and 3D printing — are poised to change how we buy and sell homes. Real estate brokers, buyers, sellers, wholesale real estate professionals, fix and flippers, and beyond may

man on floor with data

DevX Quick Guide to Data Ingestion

One of the biggest trends of the 21st century is the massive surge in internet usage. With major innovations such as smart technology, social media, and online shopping sites, the internet has become an essential part of everyday life for a large portion of the population. Due to this internet

payment via phone

7 Ways Technology Has Changed Traditional Payments

In today’s digital world, technology has changed how we make payments. From contactless cards to mobile wallets, it’s now easier to pay for goods and services without carrying cash or using a checkbook. This article will look at seven of the most significant ways technology has transformed traditional payment methods.