WEB112 » Graphic Type on the Web

Controlling the attributes of text is much easier and precise by using a graphic program like Adobe® PhotoShop or Illustrator. But, there are things to consider and many drawbacks.

The first rule of graphic web type is… never use graphic web type for your body copy.

Using Graphic Type on the Web

There are up sides and down sides to using graphic web type. Therefore, you must consider all of the options before you choose which method, graphic or text, you will use for your web page design.

Pros of Graphic Web Type:

  • Style and Brand: are easily carried out by using graphic menus and some headlines, as you can use the same font of the logo to achieve a nice overall look: http://www.mezzoblue.com/zengarden/alldesigns/
  • Mood: can be achieved by using graphical text as you can use a decorative font
  • Choices: creating type in a graphics program will give you more typefaces to choose from

Cons of Graphic Web Type:

  • File size: graphic type will require more bandwidth
  • Flexibility: gets reduced when page widths need to contract and expand
  • Editability: is slower because you need to modify graphics in a graphics program, re-optimize and replace
  • Readability: serifs that are easier to read in the print world will be harder to read on a monitor

Rasterizing Graphic Web Type

Any element displayed on a monitor is made up of thousands of little squares called pixels. So, when an object has a vertical or horizontal edge, the image appears crisp.

However, when you have a curve or a diagonal edge, the curve or diagonal must be approximated with pixels of different shades—the eye will blend the colors of the pixels to create the illusion of the shape:

Anti-Aliasing Example, by Mike Sinkula

Anti-Aliasing Example, by Mike Sinkula

Choosing an appropriate typeface and rendering it at an appropriate size is imperative when it comes to graphic web type.

Thinly designed typefaces with curved lines have very few pixels to work with and thus render poorly at smaller sizes. Blocky and upright designed fonts usually have a better chance at survival.

Choosing a File Format

It is said that the GIF format will render type the best as it works with solid color areas. JPEG files will remove information from the file when compressing which is noticeable with text but not images.

As long as you specify enough colors when saving your file to account for the edges to blend well you should have a good quality file – I usually use a 256 GIF file:

Premium Design Works Logo Transfer

Premium Design Works Logo Transfer

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.

1 Comment:

  1. Great site with working type on a web grid…



Leave a Comment:

Don't forget to get your Globally Recognized Avatar.