Skip Navigation.

NWE Help: Graphics: Intro: Type

NWE Home :: Help :: Graphics :: Intro

One of the most important components of web design is typography. The type you select makes a big difference in the overall look and feel of a web page. For example:

Class time and Class time

convey two separate meanings even though the words are identical.

Two kinds of type can appear on a web page:

  • The most common is plain text, which you are reading in this paragraph. Plain text can be cut, copied, pasted, and appended in an HTML file. It also can be copied from a web browser and edited in another application, such as a word processor or e-mail program.
  • The other is text in an image file (Example: text.gif). Text contained in an image file cannot be edited in the same way that plain text can. A web browser does not distinguish between the letter "A" in an image file and a drawing of an antelope.

To get a feel for the difference between the two forms of type, use your mouse to highlight some of the text in this paragraph. Notice how you can select individual words or even letters. Now try to highlight an individual word in one of the "Class time" examples above. The browser won't let you select any words because it doesn't recognize them as words, but as parts of an image.

Plain text and image text perform different functions in web design, and each has its advantages and limitations.

Plain text

Plain text can be easily edited and it requires much less bandwidth than image text. With few exceptions, large blocks of type found on web pages are in plain text, and so are many headings.

Don't let the name fool you: Just because it's called "plain" text doesn't mean that you don't have plenty of options in determining its appearance on your web page. Several HTML tags allow you to control the size, color, style, and even the font of your text. The NWE help page on styling text provides a good overview of these tags and what they do.

When working with type in HTML, however, you need to understand that designating a particular size and font for your type in an HTML tag will not guarantee that the type will show up on every web browser the way you envision it. The appearance of plain text on a given browser depends on a number of things, including the resolution of the computer monitor, the user preferences on the browser, and the fonts available on the computer. To learn more, read the NWE's help page on page look differences. In the meantime, here are a few guidelines to help you avoid being disappointed by the results of your hard work.

  • Be conservative in the fonts you choose. Only three groups of fonts are recognized consistently on most web browsers:
    • Default text, which usually is rendered in a popular serif font such as Times or Times New Roman.
    • Sans-serif text, which usually is rendered in Arial or Helvetica.
    • Fixed-width text, which usually is rendered in Courier or Lucida.
    If you stick with one of these basic groups, you are much less likely to encounter unpleasant surprises.
  • Make sure that any font you choose will still look presentable if a browser renders it as default text.
  • Look at your web page on as many different browsers and computers as possible to make sure that your text will look reasonably good to a a large number of people visiting your site.

Image text

Image text can be created in the NWE labs using ImageMagick or Xpaint, or outside the NWE using just about any draw or paint program. Be sure to save any type you create in an image format suitable for the Web (most people use the GIF format for type). Because you are working with image files, your type will show up on a rectangular background. To avoid the appearance of a "box" around your text, do one of the following:

  • Make the background of your image the same color as its host Web page; or
  • Render the background of the image transparent.

The kinds of type available in a paint or draw program depend on the fonts installed on your computer. While most home computers nowadays come with a wide assortment of fonts, font choices in the NWE are limited. Do not try to download fonts to your NWE account! You cannot install fonts on the system, and if the file you try to download is very large you may cause your terminal to freeze. If you want more choices, consider making your image text at home or in one of the CIRCA computer labs, then sending it to your NWE account with an FTP program. You also can create image text using web-based programs like the one at GIFWORKS.com.