Browse DevX
Sign up for e-mail newsletters from DevX


Optimizing Design: Text Vs. Graphics : Page 3

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




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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 GIF This 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.

Comment and Contribute






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



Thanks for your registration, follow us on our social networks to keep up-to-date