7 – Design

Four Principles of Document Design

Kalani Pattison and Nicole Hagstrom-Schmidt

Page 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 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 sophisticated and non-designers were more easily able to adjust formatting, layout, and other design choices on printed documents.[1] 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 (Figures 7.1–7.2 and 7.6–7.8) 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 starting with 7.1[2] 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.

This image shows an example of a page of poorly designed text. The font is an old-fashioned, dot-matrix type, the text is all run together, and there are no design elements such as white space, graphics or headings. Click the link at the end of the caption for an accessible PDF of this information.
Figure 7.1. Example of a Difficult-to-Read Document. (Alternative PDF Version: Figure 7.1. )

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 7.2.[3]

This image shows a slightly improved version of the document from the previous figure. This time, clearer, more readable fonts appear, the information is more carefully organized, and clear headings highlight the document's organization. For example, a sighted reader of this document will be able to follow its organization becase the headings appear in boldface type set in a larger font. For us, this formatting is akin to tagging headings in document code as such so that our screen readers identify the headings for us, thus facilitating our comsumption and understanding of the information. Please click the link at the end of the caption for an accessible PDF of this document.
7.2. Contrast Example. (Alternative PDF Version: Figure 7.2.)

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.[4] 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 7.3[5] shows a few strong examples of Serif typefaces.

This image shows examples of fonts including Times New Roman, Garamond, Georgia, and Spectral - in their named typefaces. For sighted readers, using different fonts can help provide visual markers that help readers follow a document's contents. The choice of font, or typeface, can affect both the tone and readability of a document. For example, we do not customarily set business letters in festive or decorative fonts. For us, the choice of font correlates to our choice of whether to use uncontracted or contracted Braille, or which voice to use in a screen reader. For example, we typically do not elect to listen to formal documents in a cartoon character's voice.
Figure 7.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 7.4[6] shows some strong examples of Sans Serif fonts.

Arial, Helvetica Neue, Century Gothic, Calibri, and Verdana - names of typefaces in their particular typeface
Figure 7.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 more clean and clear.

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

This image shows examples of more informal typefaces, such as Rye, Pacifico, and Permanent Marker. Using such fonts in a technical document compares to us listening to them in a child reader's voice, something we typically do not do. in their various typefaces
Figure 7.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 7.6[8], 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. [9]

This image shows yet another example of the document shown in the first two figures in this chapter. This time, however, the title appears in a more decorative font. This design choice would be appropriate because the document is a recipe for cupcake frosting, not a scientific lab report. This version of the document also features a decorative image of a frosted cupcake in the upper right hand corner. Such an element can work well for audience attention and appeal. Please click the link at the end of the caption for an accessible PDF of this information.
7.6. Repetition Example. (Alternative PDF Version: Figure 7.6.)

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.7[10] 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.

This image shows yet another version of the cupcake frosting recipe that we have seen as an example throughout this chapter. This version uses even more document design elements, including indentation, underlining, and multiple decorative cupcake images, to further entice an audience to read. Please click the link at the end of the caption for an accessible PDF of this information.
7.7. Alignment Example. (Alternative PDF Version: Figure 7.7.)

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 7.8[11]).

This image shows yet another version of the cupcake frosting recipe that we have seen as an example throughout this chapter. This version uses even more document design elements, including indentation, underlining, and multiple decorative cupcake images, to further entice an audience to read. Please click the link at the end of the caption for an accessible PDF of this information.
7.8. Proximity Example. (Alternative PDF Version: Figure 7.8.)

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.

McKinney, Matt, Kalani Pattison, Sarah LeMire, Kathy Anders, and Nicole Hagstrom-Schmidt, eds. Howdy or Hello?: Technical and Professional Communication. 2nd ed. College Station: Texas A&M University, 2022. Licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

  1. Robin Williams, The Non-Designer’s Design Book, 4th Ed. (Berkeley, California: Peachpit Press, 2014).
  2. Kalani Pattison, “Example of Difficult-to-Read Document,” 2020. This image is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
  3. Kalani Pattison, “Contrast Example,” 2020. This image is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
  4. These three types are deliberately simplified to help you understand how to choose appropriate fonts and typefaces for strong document design. For more information on ways of classifying fonts, typefaces, differences in use, history of typefaces, etc. see “Fontology,” Fonts: Learning, accessed August 14, 2020, https://www.fonts.com/content/learning/fontology.
  5. Kalani Pattison, “Examples of Serif Typefaces,” 2022. This image is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
  6. Kalani Pattison, “Examples of Sans Serif Typefaces,” 2022. This image is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
  7. Kalani Pattison, “Examples of Display Typefaces,” 2022. This image is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
  8. Kalani Pattison, “Repetition Example,” 2020. This image is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. This image incorporates the following: Arousaland, “Hand Drawn Cupcake.” Wikimedia Commons, October 15, 2018, https://commons.wikimedia.org/wiki/File:Cupcake-icon.svg. This item is made available under a CC0 1.0 Universal Public Domain Dedication.
  9. Arousaland, "Hand Drawn Cupcake." Wikimedia Commons, October 15, 2018, https://commons.wikimedia.org/wiki/File:Cupcake-icon.svg. This item is made available under a CC0 1.0 Universal Public Domain Dedication.
  10. Kalani Pattison, “Alignment Example,” 2020. This image is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. This image incorporates the following: Arousaland, “Hand Drawn Cupcake.” Wikimedia Commons, October 15, 2018, https://commons.wikimedia.org/wiki/File:Cupcake-icon.svg. This item is made available under a CC0 1.0 Universal Public Domain Dedication.
  11. Kalani Pattison, “Proximity Example,” 2020. This image is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. This image incorporates the following: Arousaland, “Hand Drawn Cupcake.” Wikimedia Commons, October 15, 2018, https://commons.wikimedia.org/wiki/File:Cupcake-icon.svg. This item is made available under a CC0 1.0 Universal Public Domain Dedication.
definition

License

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Howdy or Hello? Technical and Professional Communication Copyright © 2022 by Kalani Pattison and Nicole Hagstrom-Schmidt is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.