Chapter 29: Document Design

Objectives

Upon completion of this chapter, readers will be able to do the following:

1. Apply the four foundational principles of document design—contrast, repetition, alignment, and proximity (CRAP)—to improve clarity and visual appeal in technical and professional documents.
2. Differentiate between typeface categories (serif, sans serif, display) and explain their appropriate uses in professional document design.
3. Use headings, lists, and spacing conventions effectively to structure content and guide readers through complex information.
4. Evaluate and revise the use of color and visual elements in a document to ensure accessibility, professionalism, and consistency.
5. Design effective presentation slides that support spoken content using principles of visual hierarchy and minimalist slide design.

Introduction to Document Design

Document design means different things to different people, but here it will mean the use of typography and formatting such as you see in professionally designed documents. Our focus in this book is technical documentation, which implies modest, functional design.

The CRAP Principles of Design

The following general principles of document design were popularized by Robin Williams in The Non-Designers Design Book, which was first published in 1993 when word processors became more sophisticate and non-designers were more easily able to adjust formatting, layout, and other design choices on printed documents. Williams’s principles of design use an easily remembered acronym: CRAP. These principles are contrast, repetition, alignment, and proximity.

Design trends and choices change over time. Consider the common structure of websites in the past with their sidebars, as compared to the dynamic and vertically arranged blocks common to many websites today. However, these four general principles (CRAP) remain useful guidelines for designing easily readable and attractive documents for both screen and print.

Subsequent sections feature a discussion of Williams’s basic principles, with a few illustrations to demonstrate her points. The following figures display the transformation of a collection of recipes for frosting from a difficult-to-read document into a document that is readable, usable, and attractive. Though the example given is not a traditional professional document, the same principles apply to designing the appearance of professional and technical documents using headings, typefaces, spacing, appropriate color, images, etc.

Figure 1: Example of a Difficult-to-Read Document (alternative PDF version)

Contrast

According to the principle of contrast, different elements on a page should be formatted in distinct ways. That is, if things are different, they should be noticeably and obviously different. If elements are formatted differently, but not differently enough, these elements will cause visual conflict rather than contrast. As an example, picture a suit with a jacket and pants that are different shades of black—the jacket and pants will not look as if they belong together. However, black pants and a lighter gray jacket pair more effectively.

When it comes to a document, contrast can come from contrasting fonts/typefaces, sizes, colors, weight (bolded or unbolded text—the thickness of the lines), position, and alignment. Observe how small additions of contrasting size, font, and weight improve the readability of these recipes in Figure 2.

Figure 2: Contrast Example (alternative PDF version)

Contrasting Typefaces

As mentioned above, contrasting alignment and color, among other visual factors, are just as important as contrasting fonts, but often design choices need to start with what your letters look like. For text to be contrasting in size, there should be a minimum of 4 points difference. Contrasting size 10 and size 12 font usually offers more conflict than contrast. A key place you might see this type of contrast is in a résumé where the applicant’s name appears in size 16 font, but the remainder of the document is in size 12.

The best way to contrast font or typeface choices is to use contrasting types of fonts. The difference between typeface and fonts is that a typeface includes all of the related versions of a font—Arial, Arial Bold, and Arial Italics are all different fonts of the typeface “Arial.” There are three major kinds of typefaces: serif, sans serif, and display. Generally speaking, a single document shouldn’t use more than one of each type. Including a display font/typeface is usually optional.

Serif typefaces have little feet/tails. These extra strokes are called “serifs.” Figure 3 shows a few strong examples of Serif typefaces.

Figure 3: Examples of Serif Typefaces

Serif typefaces (often called “fonts” in word processing software) are best used for body text and printed documents, especially when text stretches across a page.

Sans serif typefaces do NOT have (are without or sans) feet/tails. Figure 4 shows some strong examples of Sans Serif fonts.

Figure 4: Examples of Sans Serif Typefaces

These typefaces are best used for headings, short lines of text, text displayed on a projector (e.g. PowerPoint, Google Slides, etc.), some advertisements, and text on webpages. Sans serif fonts tend to look cleaner and clearer.

Display typefaces are fancy typefaces meant for titles, advertisements, or name brands. Figure 5 shows a few particular examples of display typefaces.

Figure 5: Examples of Display Typefaces

These typefaces are best used for titles or headings, if they are used at all. They are often more difficult to read, and they are more effectively used to establish branding than to communicate significant content.

Other Contrast Opportunities

In addition to typeface, the clarity and attractiveness of documents can be improved by paying attention to contrast in spacing, in color choices, and in any other areas where opportunities present themselves. For instance, having a contrasting amount of space after paragraphs and after headings helps the headings to stand out from the body text. Contrast in vertical alignments (a different kind of spacing) can help lists to stand out in clearer ways as well. Contrast in color is important when putting text on a colored background—while black on white reads easily, it is also sometimes too much contrast for people reading on screens. However, black on a dark blue background also would be difficult to read. As red/green color-blindness is relatively common, designers should avoid contrasting shades of red and green. Changing the letters of headings to a dark color distinguishable from black is one way to add contrast between headings and body text and give documents a little extra attractiveness, while keeping the document formal.

Repetition

Just as different elements need different formats, similar elements need similar formats. Repetition is the concept for providing visual consistency across a document. For example, if a Level 2 heading is formatted in a specific way—size, weight, font/typeface—then every Level 2 heading needs to be formatted in that same way. Likewise, every time there is a bulleted list, the bullets should be in the same style.

Repetition is primarily about consistency. In addition to similar elements repeating the same formatting, if there are added design elements such as rules (the proper term for lines), images, or other visual components, they should repeat elements of design from elsewhere on the page. For instance, a color choice in a heading for text might repeat a color found in a photograph. If illustrations are provided, they should all be in the same style.

In the following example, Figure 6, measurements have been revised to use consistent terminology and abbreviations, directions have been repeatedly italicized to further provide contrast between instructions and ingredients, and some colors and added design elements have provided other instances of repetition. 

Figure 6: Repetition Example (alternative PDF version)

Alignment

Alignment consists of both the visible and invisible lines that connect different objects on a page. If the text is all left aligned (as above in Figure 7.6), then the eye makes an invisible vertical line down the front of the text near the margin. Both text and other elements on a page need to be aligned with at least one other element.

Alignment provides structure for a page and influences how a reader approaches the information presented; it also influences the order in which information is examined. Alignment also communicates the hierarchy of ideas presented on a page. Typically, the most general or most important information is presented either centered (as in a title) or furthest to the left margin (in left-to-right-oriented writing systems). As text is aligned further to the right (that is, indented or tabbed), it indicates that it is a more specific part of the general system introduced or is less essential information. To visualize an example of this concept, think of a standard outline. Major topics for a section or paragraph are aligned further to the left, while sub-topics and evidence are placed underneath the main points and indented further to the right.

Contrast can also be applied to a document’s alignment to make a document more “skimmable.” Keeping consistent alignment and applying alignment to other elements help to keep a page visually unified. Examine how these principles applied to the recipes in Figure 7 contribute positively to the appearance and readability of the document by clarifying the recipe titles and aligning the cupcakes more clearly and attractively with other textual elements.

Figure 7: Alignment Example (alternative PDF version)

Proximity

The final principle of document design—proximity—means making sure elements that are more closely related to each other conceptually are more closely positioned to each other on the page.

This principle doesn’t mean that you need to reorganize everything on the page so that, for instance, all of the ingredients in the recipes document are together, as the contents follow other organizational principles (in this case, division/partition and then chronological order). What good proximity does mean, however, is that similar pieces of information should be close to each other and set off from different types of information by white space. Headings should be closer to the text/paragraphs they describe than to previous text. In the case of the following recipes, adding space between different recipes and different types of steps/information within the recipes, allows the reader to more easily follow the steps provided (Figure 8).

Figure 8: Proximity Example (alternative PDF version)

The Four Principles in Technical and Professional Documents

These figures above have given examples in formatting and design as applied to a somewhat more informal document. However, the four principles of contrast, repetition, alignment, and proximity apply just as much in more formal reports, correspondence, and application materials. Things as simple as font choice and size, space between paragraphs, etc. are design choices — even if you just go with the default settings of your word processor. Professional documents often use premade designs set by organizations’ conventions and branding. However, when writing application materials, working for a small business, designing webpages, or writing types of documents not often used at an organization or company, it is important to make conscious design choices in order to convey professional ethos.

Specific/Applied Best Practices

In addition to contrast, repetition, alignment, and proximity, a few additional expectations regarding business writing should be considered. As discussed above, you may be used to writing academic documents where your fonts, margins, and colors are defined for you. Using contrasting fonts, less or greater than one inch margins and tasteful use of colors will increase the professionalism of your documents. Paying attention to the following guidelines also will help you ensure that your document is readable and that it meets your readers’ expectations and conveys your professional ethos.

Specific Guidelines on Headings

The following sections present some standard guidelines on headings.

Use headings liberally. Headings create visual focus for readers, so use them to draw your reader’s attention to a specific topic, counter-argument, or set of information. Frequent heading usage, with perhaps one heading for every two to three paragraphs, is common in technical and professional communication. Of course, try to avoid overusing headings: lots of headings with only one or two sentences per heading does not work.

Design headings so that they clearly indicate their level. “Levels” of headings are like levels in an outline: first level would correspond to the roman numerals; second level, to the capital letters; and so on. Use type size, type style, color, bold, italics, and alignment in such a way that the level of the heading is obvious. The Level 1 headings should have the strongest contrast with the body text, Level 2 should have slightly less contrast, and so on. For this reason, it is a good idea to know approximately how many levels of headings you will be using before designing each.

Consider using “run-in” headings for your lowest-level heading. It can be difficult to rely solely on type style and size to indicate heading levels. A run-in heading “runs into” the beginning of a paragraph and ends with a period. You can use some combination of bold, italic, or color for these headings. The sections you’ve just read (including this one) use run-in headings.

Margins, Indentation, and Alignment

Unlike academic documents, business documents do not need to have a standard one-inch margin and left-aligned text. Apply general design best practice to make sure headings, paragraphs, lists, etc. are clearly laid out and look clean on the page.

You should avoid margins less than a .5 inch, as too-little white space makes a page look crowded or overly busy. You should also avoid overusing center alignment, as the edges look ragged rather than clean or “aligned” with another element on the page, and you need to keep in mind the hierarchy implied by indentation. See the section on Alignment above for more details.

Bulleted and Numbered Lists

Use bulleted, numbered, and two-column lists where appropriate. Lists help by emphasizing key points, making information easier to follow, and breaking up solid walls of text. Always introduce the list so that your audience understands the purpose and context of the list. Whenever practical, provide a follow-up comment, too. Here are some additional tips:

• Use lists to highlight or emphasize text or to enumerate sequential items.
• Use a lead-in sentence to introduce the list items and to indicate the meaning or purpose of the list (make sure it is a complete sentence and punctuate it with a colon).
• Use consistent spacing, indentation, punctuation, and caps style for all lists in a document.
• Make list items parallel in phrasing. (Notice how each item in this list you’re reading here begins with an implied “You”-subject and a verb.)
• Make sure that each item in the list reads grammatically with the lead-in.
• Avoid using headings as lead-ins for lists.
• Avoid overusing lists; using too many lists destroys their effectiveness.
• Use similar types of lists consistently in similar text in the same document.

Following up a list with text helps your reader understand context for the information distilled into list form. The tips above provide a practical guide to formatting lists.

Use of Color

People love color, and understandably your audience will appreciate the visual stimulation of a colorful presentation. If you have ever seen a car painted a custom color that just didn’t attract you, or seen colors put together in ways that made you wonder what people were thinking when they did that, you will recognize that color can also distract and turn off an audience.

Color is a powerful way to present information, and that power should be used wisely. You will need to give some thought and consider what impact you want to make, how color will contribute or possibly distract, and what colors will work well for you to produce an effective and impressive presentation. You will be selecting which color you want to use for headers, graphics, and background illustrative elements and determining how they relate to the colors in other visuals such as drawings or photographs. Together, the use of color in your images, keywords, headings, backgrounds, tables, and graphs can have a significant impact on your audience.

There are inherent relationships between colors, and while you may have covered some of this information in art or design classes you have taken, it is valuable to review here. According to the standard color wheel, colors are grouped into primary, secondary, and tertiary categories (see Figure 9 for an image of the color wheel). Primary colors are the colors from which other colors are made through various combinations. Secondary colors represent a combination of two primary colors, while tertiary colors are made from combinations of primary and secondary colors. The different categories of colors are listed below:

• Primary colors. Red, blue, and yellow
• Secondary colors. Green, violet, and orange
• Tertiary colors. Red-orange, red-violet, blue-violet, blue-green, yellow-orange, and yellow-green

Figure 9: RGB color wheel with 24 colors

Colors have relationships depending on their location on the wheel. Colors that are opposite each other are called complementary. Complementary colors, such as blue and orange, contrast, creating a dynamic effect. Analogous colors are located next to each other and promote harmony, continuity, and a sense of unity.

Here are some specific suggestions concerning color:

Use color minimally in text-driven documents. While color works well for image-driven documents such as slide presentations or advertisements, most writers avoid using an abundance of color for texts with long word counts. For example, if you have black text on a white background, you might select another color for headings. You might use that same color for figure and table titles as well as the tags for notices (the actual “Note,” “Warning,” “Caution,” and “Danger” labels on notices).

Avoid unusual combinations of background and text colors. For example, purple or red text on a black background is very difficult to read. For body text and documents, stick with black text on a white or gray background unless there is a strong functional reason for some other color combination, though headings can be more colorful. For websites, both light text on a dark background or dark text on a light background may be acceptable, depending on the anticipated website use.

Be mindful of individuals who are color blind. Being color blind does not usually mean that an individual does not see color at all. Rather, color blindness refers to a condition where an individual does not visually distinguish between certain colors—they appear similar to them. The most common types are red-green color blindness and blue-yellow color blindness. Especially when you want to provide contrast, you can improve clarity for your readers by avoiding the use of these color combinations.

Slides and PowerPoint Presentations

Microsoft PowerPoint has been a staple of slide-based presentations in the classroom and in the workplace since its introduction in 1990. Of course, PowerPoint is not the only slideware program available; others include Google Slides, Keynote, Prezi, and Easel.ly, to name a few. These programs all allow the presenter to create visual slide decks that they may use to supplement a spoken presentation. At their strongest, slides are powerful visual aids that make presentations more comprehensible, interesting, and memorable to their audience. At worst, they are serious distractions that can damage a speaker’s ethos.

The Problem with PowerPoint

In your experience as a student or employee, you have likely seen presenters doing all sorts of things with slides. Some presenters may have posted what feels like their entire script on their slides; others have used ill-fitting sound effects or lengthy slide transitions; still others may have included images too small to be seen from the back of the room. These poor design and presentation choices have contributed to what presentation expert David J. P. Phillips has called “Death by PowerPoint.” While Phillips refers specifically to PowerPoint, the problems he notes are not limited to that program.

For many, “death by PowerPoint” is a problem of genre caused by a lack of both specific instruction and good examples. Think back to your elementary and secondary school education. You were likely taught specific ways to create certain written genres such as an essay. You also were likely provided with samples of good essays (perhaps even by experts in their craft) to show you what successful examples of the genre look like. With slide design, the story is often different. Teachers may provide this instruction—and do so extremely well—while others may not. You also may have seen several slide-assisted presentations, but how many used slides in creative, interesting, and clear ways?

Ultimately, slides are a supplemental, rather than primary, tool in a presentation. Therefore, slides follow different rules for effectiveness than word-heavy documents like reports or applications. Think of a slide presentation as a way of supporting or augmenting the content in your talk. Slides should neither replace your content, nor include your entire script.

Designing Effective Slides

All of this chapter’s design guidelines—CRAP in particular—will help you design consistent, helpful, and visually appealing slides. But all the design skill in the world won’t help you if your content is not tightly focused, smoothly delivered, and clearly visible. Slides overloaded with text and/or images will strain your audience’s capacity to identify important information. Complex, distracting transitions or confusing (or boring) graphics that aren’t consistent with your content are worse than no graphics at all. Here are some general tips:

• Simplicity is best. Use a small number of high-quality graphics and limit bullet points and text. Don’t think of a slide as a page that your audience should read.
• Break up your information. Think of a slide as a way of reminding you and the audience of the topic at hand.
• Slides should have a consistent visual theme. Some pros advise that you avoid using the stock PowerPoint templates, but the Repetition and Alignment aspects of CRAP are so important that if you don’t have considerable design skill, templates may be your best bet.
• Choose your fonts carefully. Make sure the text is readable from a distance in a darkened room. Practice good repetition (the “R” in CRAP) by keeping fonts consistent.

Try to design your slides so that they contain information that your viewers might want to write down. Effective presentation slides may contain specific data points that speakers may not have memorized, but still want to clearly reference as needed. They might also offer definitions of key concepts that viewers may not be familiar with. Visuals should focus solely on key points so that they are on permanent display, thus providing the audience with an anchor for the presentation and freeing the speaker to go into more detail. In all cases, the information on your slides should be purposeful and designed with the goal of improving clarity for your audience. If you can’t explain how the slides add value to your presentation, don’t use them.

References

Williams, R. (2014). The Non-Designer’s Design Book, 4th ed. Peachpit Press.

Phillips, D. J. P. (2014). How to avoid death by PowerPoint. TEDxStockholm Salon. https://youtu.be/Iwpi1Lm6dFo

Attribution

This chapter is revised from Howdy or Hello?: Technical and Professional Communication, Chapter 7: Design, sections “Four Principles of Document Design” by Kalani Pattison and Nicole Hagstrom-Schmidt and “Specific/Applied Best Practices” by David McMurrey, Jodi Naas, Annemarie Hamlin, Chris Rubio, Michele DeSilva, Anonymous, Nicole Hagstrom-Schmidt, and Claire Carly-Miles, which are both openly available under a Creative Commons Attribution NonCommercial-ShareAlike license.

AI Assistance Notice

Some parts of this chapter were brainstormed, drafted, and/or revised in conversation with ChatGPT 4o and Google Gemini 2.5 Flash. All AI-generated content was reviewed and revised as needed by a human author.

Open Technical Communication 2e is currently a beta/draft. Some chapters have not yet been written in "Part 4: Design in Technical Communication". See "About This Book" for details about planned chapters.