Document Design

 

Designing a document is not just about making a page look pretty: an effective design is crafted in both form and content to help an audience understand your purpose in writing. However, creating a visually striking and credible design is not always easy. When making design choices, the HATS acronym can be useful. HATS stands for “Headings”, “Access”, “Typography” and “Spacing”.

 

An effective design is crafted in both form and content to help an audience understand your purpose in writing.

 

Headings

Access

Typography

Spacing

 

Headings

Headings mark off different sections of your document (or page) and can be extremely useful as an organizational tool both for yourself as a writer and for your readers. Thoughtful headings can give structure to a document and even help in revision: if one section has very little body text under it’s heading, it’s a sign to rethink that section. Do you need to do more research or would that section work better as a subsection under another heading?

The structure of your headings should flow out of the content of your work. This page is a simple example of that: each heading corresponds to a different part of the HATS acronym. If, for example, you were writing a paper that described an ongoing process, your headings might refer to the stages of the process. When writing about literature, headings might divide your analytical work from sections giving background.

 

What’s the difference between headings and headers?

Headings are distinct from “headers”, the place where you’re often asked to put your last name and page number when writing an essay. Generally speaking, headers are a form of access which help your reader navigate a document with the help of page numbers or other markers. Headers are usually mandated by your professor, genre, or the publication you’re writing for, while headings are often left to the discretion of the writer.

 

Different Types of Headings

Below are the different levels of headings and text you may want to implement in your document:

 

[PUT INFORMATION BELOW IN A SEPARATE TABLE]

Title Text

Of the multiple heading-types you will use in your document, the title text should be the largest. This makes it easy for the title to stand-out in relation to the body text, and gives context for the entire document to follow. The font-sized for the “title” heading should not be used again in the document. A 36 pt. font is generally a good choice for title text.

Heading 1

For the main ideas of the document, a 24 pt. font is a good choice. The central headings should be smaller in size than the title text, but still large enough to stand out and divide the document into individual sections. In this page, the four parts of the HATS acronym are given their own headings under the same font size, for consistency.

Heading 2

Using a smaller font-size than the main, text headings, but still larger than the body text, is good for marking subdivisions in the main ideas of the text. In a paper or document, 18 pt. font is usually a good choice for a subheading, and you can also bold the heading’s text to make it stand out.

Accent Text

Writing words or phrases in italics is a good way to draw attention to important ideas within the document without separating the phrases from the body text. To make accent text distinct within a paragraph, it’s a good idea to put the word or phrase in 16 pt. font.

Body Text

The body text forms the main content of the document, broken into paragraphs beneath the headings. It’s important to choose a boring font from size 11 to 16 to make the body text as readable as possible. Generally, readability requires finding a medium weight font that has little stroke variation.

[PUT INFORMATION ABOVE IN A SEPARATE TABLE]

Access

Access refers to the visual cues that help a reader navigate and understand your writing. Adding access can be as simple as adding bullet points or numbered lists, or it can be as complex as adding flow charts and large illustrations. Consider your audience when choosing access: a good visual can go a long way toward helping an amateur understand a difficult concept.

For example, if you need to explain a term your audience might not know, consider using a sidebar, so you don’t break the flow of your text. Using sidebars also gives expert readers the opportunity to skip information they already know.

It’s also important to consider your audience, as well as your purpose for writing, when designing visuals for your document. Below are a few commonly-used examples of visuals for academic documents:

  • Line graphs show change over time. (Make a visual)
  • Pie graphs show pieces of a whole. (Make a visual)
  • Tables organize numerical or verbal data. (Make a visual)
  • Infographics combine multiple visualizations for a general audience. (Make a visual)

 

Typography

Choosing fonts for a document can be much harder than it seems, which is why you often see the advice to default to Times New Roman and not think about it any more. “Times” is a fine font, but it’s not always appropriate for the character of every document. With just a little bit of knowledge about typography, you can easily choose fonts that match the content of your work.

Below are some important terms in understanding typography.

 

[PUT THE INFORMATION BELOW IN A SEPARATE TABLE]

Stroke variation is the level of difference between the width at various parts of a letter. Fonts with high stroke variation such as [font here] tend to look good at large sizes but are hard to read when small.

Serifs are little projections that protrude from the strokes of certain letters in certain typefaces. Serifs tend to give a more serious feel to text and make it easier to read when printed out. “Sans-serif” fonts, like [font here] lack serifs at the end of their letters. These fonts are more casual and informal.

Weight refers to the overall thickness of a font. Many typefaces come in extra bold or even ultra-bold varieties, and many sans-serif fonts come in thin or light varieties that can lend a lean, contemporary effect to a document. Most fonts that come with a computer are a medium weight, so consider downloading some varieties from a place like Google Fonts.

[PUT THE INFORMATION ABOVE IN A SEPARATE TABLE]

 

Spacing

Be sure to leave space around the end of one section and the next section’s heading and give plenty of marginal space around illustrations or other points of access. If you’re using columns, leave adequate space between each column of text so that the eye doesn’t “jump” to the other column.

The rule about spacing also works the opposite way: put things that are similar close together. The body text that relates to a heading should be close beneath it. Captions should be directly beneath the illustration or photo they describe.

Above all, strive for consistency in your spacing.

 

How much space should I use between lines?

The standard you might have been taught for school papers is double-spaced, but different documents require different levels of spacing. In the absence of specific guidelines, shoot for readability. Somewhere between 1.15 and 1.5 is a good place to start.

 

[INSERT SPACING CHART WITH INFORMATION BELOW]

Some examples of good spacing:

a dark photo of a white sheet draped over a person, used as an example in spacing

Captions directly below the image.

 

photograph looking down at the outline of a ghost in a coffee cup; used as an example of image spacing

Images are a good, consistent distance from each other (about 1/2 of an inch here), giving plenty of white space.

 

Some examples of poor spacing:

Captions placed haphazardly.   a dark photo of a white sheet draped over a person, used as an example in spacing

photograph looking down at the outline of a ghost in a coffee cup; used as an example of image spacing

 

Images have no set relationship with any other page element.

[INSERT SPACING CHART WITH INFORMATION ABOVE]

 

 

Additional Resources

Here is a guide from Purdue owl on professional writing including the HATS acronym.

Headings

How to Create and Customize Headings in Microsoft Word – This video outlines how to use the heading manager in Microsoft Word, and discusses why the tool is important to use in designing documents.

Google Docs: Headers and Footers – This is a good resource for formatting your documents through Google Docs with easy and clear “headers”.

 

Access

Unsplash – A huge repository of high resolution photos that can be freely used in any project, no permission required.

GIMP – If you don’t want to buy Photoshop, check out GIMP. It’s a free program for manipulating graphics that can fulfill many of Photoshop’s functions.

Canva – A website that allows you to make large infographics easily. Infographics can be useful for summarizing the findings of reports and presenting all kinds of data visually.

Snappa – A visual design service that is run completely online. You can pay for a monthly service, but a free account offers over five thousand templates to use.

 

Typography

Google Fonts – Google’s own collection of fonts and typefaces. The website allows you to test various properties of fonts including “weight”, “thickness” and the like. All of the fonts available are free to download and use in your own writing.

Practical Typography – An entire book of helpful rules and guidelines on good typography. There’s an option to pay for the material, but you can access the text online for free.

 

Spacing

The Power of White Space – The Interaction Design Foundation’s guide on the various ways you can use white space effectively in an online document, including discussions of various types of white space, like “macro” and “micro”.

Negative Space in Graphic Design – An article and helpful infographic defining negative space and outlining it’s importance in web design. This site also provides some basic examples in logo design and art.