"Pictures and Photographs" was written by Joseph Moxley, University of South Florida

Use pictures and photographs to catch the eye of your audience.

The expression "a picture is worth a thousand words" is more than a truism. Images can convey powerful emotion. Images can illustrate a process or capture a moment with precision (such as a tight end catching the football on the goal line).

People who shun principles of design, who argue words alone should be sufficient, are really not in touch with the expectations of today's readers. Perhaps because today's readers are bombarded with information, they tend to be especially receptive to pictures and photographs.

Select appropriate images

Images are not inherently good. In fact, images can be detracting. You don't want to pour images into a document that are unrelated to your subject. Because readers' focus will be drawn to the images, be sure they are appropriate to your audience and purpose. Consider below two excellent examples of images.

Environmental Web sites, such as The Nature Conservancy or The Sierra Club, use beautiful images from nature to help stimluate action. Consider, for example, the EPA's Draft Report on the Environment. Take a minute to click through this report, while noting how the top banner image changes to provide a visual representation of the topic under discussion (land, water, air, etc.)
It is interesting to note that the U.S. Census Bureau has set the main graphic to change every minute on its default page, Population Estimates, perhaps trying to "humanize" the population explosion.

The following summarizes common graphic formats, distinguishing bitmap images from vector images.

What are bitmap images?

GIFs (Graphics Interchange Format) and JPEGs (Joint Photographic Experts Group) are bitmaps; they use pixels to display colors. In other words, bitmaps use a grid ofbites squares, and each square, each pixel, can represent a color.

Different computer monitors have different numbers of bits they can display for each pixel. A bit is the smallest amount of information stored by a computer. For example, a 2-bit monitor can display two colors for each pixel--either black or white. An 8-bit monitor can dedicate 8 bits of memory to each pixel to represent a color, whereas 24-bit images use 24 bits of memory for each pixel to represent a color. While monitors differ, you can typically count on a monitor having between 72 to 100 pixels per inch. As technology evolves, the quality of monitors will expand, and so, too, will the quality of graphics.

When you plan to represent an image on a page that will be printed, you need it saved in at least 300 dpi (dots per inch).

Number of Bits/Pixels Colors Displayed
8-bit image 256 colors
16-bit image 65+ thousand
24-bit image 16+ million colors

When users make a bitmap image larger, the computer guesses where to put new pixels between the old pixels, resulting in a blurry image.

GIF (Graphics Interchange Format)

Developed by Compuserve Information Service in the 1980s, GIFs are the most common format of Web graphics on the Internet. GIFs can present 8 bits or 256 colors, using the Internet color palette. Because they do not display millions of colors, GIFs can download fairly quickly. Conventional GIFs download one pixel at a time, while interlaced GIFs display the overall image fairly early in the download, giving the reader a blurry image of the graphic, and then move from blurry to sharp as the image downloads.

JPEG (Joint Photographic Experts Group)

JPEGs provide a superior image to GIFs because they can display 24-bit, true-color images. While GIFs have 8 bits of memory dedicated to displaying a color for each pixel, JPEGs have 24 bits of memory dedicated to displaying a color for each pixel. Thus, photographs and drawings can be rendered more accurately by JPEGs.

JPEG files are larger than GIF files, yet you can typically choose different compression file sizes in graphic applications. For example, you can make JPEG file sizes 100 times smaller than the original file size. Each time you compress an image, you erase information, so you need to be careful that you do not so overly compress an image that it becomes worthless. JPEG compression tends to degrade computer-generated graphics.

PNG (Portable Network Graphic)

According to Web Graphics and Presentations, PNGs were designed for the Internet to have all of the benefits of GIFs, yet to

  • Provide superior compression and interlacing. GIFs can display the outlines of an image once it receives 50% of the information from the file. In contrast, a PNG image is recognizable once 25% of the image is available.
  • Create smaller files. PNG files are 5 to 25% smaller than equivalent GIF files.
  • Allow users more than one color for a transparent background.
  • Compensate for differences in gamma--that is, the level of contrast in an image. PNGs can be displayed equivalently on Macintosh and PC platforms.

At this point, however, PNG files cannot display animated images.

What are vector images?

Vector images use geometrically defined shapes such as lines, arcs, or polygons, which are used to represent images as opposed to pixels. When vector images are enlarged, they do not degrade. The computer doesn't need to guess about where to add additional pixels. Instead, the geometric shapes are simply scaled in larger or smaller formats, without blurriness.

Vector images are useful to display graphs, charts, and diagrams. They allow users to focus in on a part of the diagram, to magnify some part of the image. Vector images are generated by spreadsheet programs, 3D applications like AutoCAD.

What are image maps?

An image map is a map that has embedded links. In other words, as you move your mouse over an image, you can access links. The following is an image map.

Learn NC: An image map of North Carolina, this map is linked to a database on NC educational resources


Understand how and when to use charts and graphs.


Tables and graphs enable you to reach visual learners. When you select information for graphical representation, you are highlighting its significance. In some disciplines, particularly the sciences, readers expect authors to condense complicated information into charts and graphs. Many readers will scan a document's charts, tables, and graphs before reading any text.

Today's modern word processors offer powerful tools for developing attractive charts and graphs.

Use Charts and Graphs to Emphasize Important Information


Graphs and tables can be used to emphasize important information. For example, in a report on population growth, you could explain that according to the United Nations, the rate of population growth has decreased since the 1970s. Worried that you are luring your readers into a false sense of security, you could nonetheless report that by 2030 the world population may expand from 6 to 8 billion. In contrast, though, imagine a visual that represents this trend--i.e., declining birth rates in contrast to the percentage increase of the world population:

mp3Organizational Charts

Use charts to clarify complicated points, to emphasize significant results, and to offer a shorthand version of the gist of the information you are reporting. For example, Michael Bain uses the following visual to clarify his purpose and give his readers a visual way to read his text, How MP3 Players Work

Comparison Charts

Charts can be used to illustrate key points. For example, in Fatality Facts: Teenagers as of 2001, the Insurance Institute for Highway Safety provides a graph that summarizes the gist of its report:

"Teenagers drive less than all but the oldest people, but their numbers of crashes and crash deaths are disproportionately high."

Beneath the above graph, the Insurance Institute for Highway Safety provides a link to the plot points so that viewers can see exactly what numbers are illustrated in the graph. They also provide a detailed narrative discussion of the results and enable users to select tables that pop open the results presented in table formats.teenagemotor


"Charts and Graphs" was written by Joseph Moxley, University of South Florida

Understand design principles that are important for both paper and Web documents.

Font selection matters. Even the font you display your documents in can have powerful consequences. Some fonts can distract readers from your message while others draw in the reader's eye, bringing the reader's focus to your text.

  1. What are the Font Families?
  2. What is the Difference between Serif and Sans Serif Fonts?
  3. How Should You Mix Different Font Families?
  4. Strategies

What are the Font Families?

"Fontophiles" tend to have different names for font families. Below are some of the more commonly defined "font families" (see left column) and a discussion of their uses.


What is the Difference Between Serif and Sans Serif Fonts?

Serif Fonts

Serif fonts have little tails (serifs) at the ends of each letter. Serif fonts include Times New Roman, Courier New, New York, New Century Schoolbook, and Palatino.

Serif fonts provide a more traditional, conservative appearance. Readers prefer Serif fonts when large text blocks are displayed. Times New Roman is one of the most popular Serif fonts because it is very legible on the computer screen and prints very well.

Sans Serif

In French, "sans" means without. Sans Serif fonts lack little tails at the ends of each letter. Sans Serif fonts include Arial, Geneva, Helvetica, and Comic Sans MS.text

Readers find Sans Serif fonts to be less readable than Serif fonts, so writers seldom use them to set long blocks of texts. Used in contrast to Serif fonts, Sans Serif fonts can catch a reader's eye. Knowing this, advertisers use Sans Serif fonts to set headlines and call out text.

How Should You Mix Different Font Families?

Mixing font families can be tricky. If you include too many disparate fonts, the page will appear to lack focus (see example below). Readers may tell you your document reads like a puzzle. It's giving mixed messages:

How Should You Mix Different Font Families?

Mixing font families can be tricky. If you include too many disparate fonts, the page will appear to lack focus (see example below). Readers may tell you your document reads like a puzzle. It's giving mixed messages:


Designers typically advise that you should use no more than one Serif and not more than one Sans Serif font for each page. Even when you limit yourself to two fonts, you can create considerable variation by bold face, underlining, italicizing, or adjusting the size of a font.

"Typography" was written by Joseph Moxley, University of South Florida

Design pages to facilitate scanning by using headings, subheadings, columns; learn special page design considerations for the Web.

You can enhance readability by giving some thought to the design of your documents. By using headers, lists, bullets, and other design elements, you can reveal your organization to the reader and emphasize key points. Below are page design guidelines you should consider when writing print or online documents. Your design can underscore your message. Be sure to consider these guidelines in the context of design principles.

Design Pages to Facilitate Scanning

According to usability research conducted by Sun Microsystems, "Seventy-nine percent of Web users scan pages; they do not read word-by-word." [more]. This finding suggests that you should design documents so they can be scanned by your readers.
You can create more scannable documents by:

  1. Following a deductive organization (i.e., putting purpose, significance, and results in your introduction).
  2. Using page-design principles to emphasize the message and organization (e.g., using bullets, lists, and illustrations to highlight key points).

Use Design Elements to Highlight Your Message

In the example below, notice how your eye is drawn to the blue header and the boxed elements. In these spaces, you can highlight the important part of your message.


For some genres of documents, headings would be considered too impersonal or too technical. For example, you certainly don't want to see headings and bullets used in a suspense novel. Increasingly, however, headings are used to help readers scan documents.

Even vague headings like Introduction, Results, and Discussion can be useful: They give readers a sense of what is covered within the section. Better yet, descriptive titles cue your readers about your stance on the content of sections. For example, rather than Introduction, Results, and Discussion, you could write "Why Are Headings Important."

As previously discussed, highly skilled readers tend to scan through documents on first reading, noting the content of your headings. This gives them a sense of your overall message. An additional advantage of headings is that they create additional white space.

Word processing programs enable you to highlight text and then define text as a level 1 heading, level 2 heading, and so on. Using style tags you can change the size or color of the heading. The advantage of using style tags is that you can change all level 1 headings with ease rather than going through and changing every level 1 heading. In other words, if you tagged text 15 times as an H1, and then you edited the look of that heading, your changes would ripple through the text, changing all 15 headers. Additionally, Microsoft Word and Corel Word Perfect can use the style tags as hyperlinks.

Results from readability research indicate that readers have difficulties with more than three levels of headings. When you use more than three levels of headings, readers become confused. Also ensure that all of your headings are equal grammatically. For example, headings can all be questions, verb phrases, or noun phrases, yet you cannot mix together questions, verb phrases, and noun phrases.

Level 1 Heading

Level 2 Heading

Level 3 Heading

  • Bullets

Many readers and writers love bullets. Some people even claim they think in bullets. Bullets create emphasis. They focus the reader's eye on the bulleted material and they break up textual space.

Using a word processor, you can easily adjust the look and feel of bullets, making them ornate or simple. Again, it's best to use the bullet style tag so that you transform the look and feel of your bullets with a single key stroke as opposed to needing to reformat each bullet separately.

Below is a humorous translation from Moby Dick to illustrate the "get to the point" technical style of the Web to literary discourse:

"Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off -- then, I account it high time to get to sea as soon as I can."

I go to sea when I:

  • Feel depressed or melancholy
  • Stop in front of coffin warehouses
  • Follow funerals
  • Have a powerful urge to knock people's hats off
Source: Moby Dick by Herman Melville Source: This example is adapted from Kathy Henning's Writing for Readers Who Scan


Lists share all of the positive attributes of bullets: They create the white space readers love, placing emphasis by drawing the reader's eye to what you want to highlight. Yet lists are appropriate when a series of steps is being presented. Unlike bullets, lists imply you complete item 1 before moving on to item 2.

Using lists and numbering sections of documents is very common in legal and technical genres where more than one person is writing the document or where litigation may follow.Once again, use the style tag for lists in order to have control over your document.

Special Page Design Considerations for the Web

Have you ever wondered why many books and magazines have narrow text columns? Alternatively, why are so many Web pages short, about screen length?

Readability research has found that impatient readers don't want to turn their heads back and forth to read. They want to scan the document, reading straight down the page without any head nodding! Impatient readers don't want to use scroll bars, either.
Of course, readers' interactions with texts are in a state of flux. Some readers may actually prefer long documents because they can be easily printed. However, as a general rule, researchers in the field of usability analysis and interface design suggest that you limit your content to properly fill the screen page of a monitor set to

  • Maximum width = 640 pixels
  • Maximum height = 480 pixels

Of course, modern monitors, powered by computers with video boards, may be set to display many more pixels on a page. The standard, in fact, is probably moving to

  • Maximum width = 1024 pixels
  • Maximum height = 768 pixels

Add video to enrich or supplant printed texts.

New communication technologies enable authors to incorporate streaming multimedia into their webs. 

Writers may provide video to:

  1. Underscore the content of the print text, illustrating key concepts.  For example, an agency hoping to secure funds for hungry people could show video of their living conditions.
  2. Illustrate the content of the printed text.  A researcher could provide video of people he or she interviewed.  A technical writer could provide a screen-movie to show users how to complete instructions.
  3. Inform or persuade people who respond more positively to an engaging speaker than printed texts.

Video Formats

Currently, three "players" are available for free that can play digital movies on your computer:

  1. Windows Media Player.  This player is a Microsoft tool so it prefers the Microsoft format (.avi), yet it will play movies in a variety of formats, including Quicktime.
  2. Real Player. When you got to Real.Com's site, you may need to hunt around for a while before finding the free Real Player.
  3. Quicktime Player. Although Quicktime was originally designed to play Macintosh-platform movies, it now plays Windows-oriented movies as well.

Examples Online Video

As computers begin to become more entertainment devices, users will increasingly look for good video from their computers. Eventually, video will become more integrated into writing spaces. Below are some videos used for pedagogical purposes.

  1. Taylor's Student Projects. Includes many student-produced documentaries.
  2. Writing Instruction Videos. Watch practices and listen to experts in the field of teaching writing.
  3. House Hippo Movie. Created by Concerned Children's Advertisers, this movie is designed to teach students to be critical of TV advertising and Web sources.
  4. Health Video. See videos on hundreds of health issues.
  5. Microsoft Screen Movies. Screen movies show users how to use software, as illustrated by the samples below.

"Video" was written by Joseph Moxley, University of South Florida