Making Your Documents Look Like C.R.A.P.

Posted by Craig Samson on Dec 26, 2008 in General Design | 0 comments

Author Robin Williams (not to be confused with the famous actor and comedian of the same name) wrote a book entitled The Non-Designer’s Design Book some years back. This book is a brilliantly conceived and written guide to making your documents look professional, but explained in a non-technical manner that simplifies the basics of design into a handful of easy rules. Prior to writing that book, Williams wrote another called The Mac is Not a Typewriter (there is a PC variant of this book, as well) in which she explores a series of distinctions between the typography rules used for typewriters and those used for computers (and professional typesetters). If design and typography interest you, I highly recommend these books. Not only are they informative, but they’re written with style and humor.

This article presents some of these rules in a capsulated format that you can swallow in one blog read. I’ve selected those rules that apply to those of us writing everyday things like emails, various Word documents, blogs, presentations, etc. First, though, I need to run through a handful of basic design odds and ends.

To begin with, what is the difference between typography rules on a typewriter and those on a computer? The main difference between the classic typewriter and a modern word processor like Microsoft Word is the choice of font. With those old typewriters you typically had only one font, what we call Courier today. Courier is a monospace font, meaning that every letter takes up the same width on the page. The thin “l” and the thick “m” are exactly the same width in Courier, with the l’s baseline being stretched really wide and the m’s strokes being all squished together. The result is that you can draw a grid on the page where each square contains one letter, because every letter lines up in vertical columns. This rigid structure demands certain accommodations be made for readability’s sake.

Meanwhile, most of us using Microsoft Word or any other modern application use proportional fonts such as Times New Roman, Garamond, or Helvetica. A proportional font uses different-width characters for a more natural appearance. No grid can be drawn over one of these pages, because the letters don’t line up in neat columns like monospace characters.

Different rules apply to both types of fonts. Appallingly, so many of us that learned to type on a computer and not a typewriter were still taught the rules of monospace fonts versus proportional fonts. So, if you’re not using a monospace font like Courier, forget those typing class rules and pay attention.

Most fonts are either serif or sans-serif. A serif is the finishing stroke at the tips of the lines that make up a letterform. Sans-serif means without serifs. Serif fonts include Times New Roman, Garamond, Bodoni, and Palatino among zillions of others. Sans-serif fonts include Arial, Helvetica, Avant Garde and a million more. There are many classification systems and many fonts that don’t fit into either of these categories. But, for our purposes we’ll ignore those.

Then there’s the difference between legibility and readability and the spin that the WWW puts on this. Legibility primarily refers to the ability to quickly recognize a snippet of text, such as a headline. Readability refers to the ease of reading a block of text, like this blog article. In print, a sans-serif font is considered most legible, while a serif font is considered most readable. So, choosing Garamond for the body text of your next document is more appropriate than Arial. On the web, most folks are reading right on the computer screen. Our monitors have a lower resolution (the density of the little dots that make up an image) than does a printer. As such, on-screen text may not be more readable with serifs, so you may want to use sans-serif fonts for body text.

When mixing fonts together, never use more than two on the same page. And when mixing, you can achieve one of three effects: concord, conflict, and contrast. Concord is created when you mix different sizes and weights (such as regular and bold) of the same font on the same page. Although rather boring, this look is conservative and may work well in some instances. Conflict occurs when you mix two similar fonts, such as two different sans-serif fonts (like Arial and Helvetica). Together, these fonts are too close for comfort, they look very similar yet different somehow; it’s all just a bit disturbing. Contrast is a good thing that occurs when you mix two very different fonts, particularly if they are of a different color. (Color in this case refers not to the rainbow, but to the thicknesses of the letterforms.) For instance, mixing a bold Helvetica with a regular Garamond creates a pleasing contrast.

Enough background information, I’m now onto  five useful rules that will make your documents look more professional:

Place only one space between sentences. That’s right, only one space after the period, question mark, exclamation point, whatever. I was taught to type two in typing class, but that rule is for monospace fonts. In the real world, we use proportional fonts and the rule for those is one space between sentences. Honestly!

Never underline anything! And I mean it. Underlines are an editor’s mark for indicating that something needs to be italicized. On a typewriter, italics typically were not available, but you could underline. So, underlining became a popular way (and an ugly one) to emphasize. You may have been taught to underline book titles when creating citations; however, it is more proper to italicize book titles. Underlines often cross-out letter descenders like those in the word golfing (note how the underline passes through the bottoms of both g’s)—how ugly! On the web, it is still considered good practice to use underlines for hyperlinks because it is a commonly understood visual cue that identifies the link at a glance. I hate the way underlined links look, so, as a web designer, I struggle with this one every day.

Never put your text in ALL CAPITAL LETTERS. This is yet another typewriter emphasizing trick. Except for acronyms, avoid placing text in all capitals. I recommend using bold or italics, or both. But, whatever you do, be consistent with your method of emphasis throughout your document. All caps is significantly less readable than mixed case. This is because the shape of words is as important to their recognition as the letters themselves. Words in all caps are rectangles, whereas lowercase words have more unique shapes that make them easier to recognize. On the web, all caps means you’re SCREAMING. And, if you make people read documents written in all caps, they’re likely to end up with a headache.

Either indent the first line of every paragraph or provide extra space between paragraphs. Never indent with the spacebar. In fact, take care if indenting with the Tab key. If tabbing, set your first tab to a measurement that is about as wide as the capital letter M in the font that you’re typing in. That little indent is enough to do the job (a half inch is way too much). If putting space between paragraphs, never press the Enter key twice. Instead, set your paragraph spacing to a point size equal to half the font size you’re using. Therefore, a common 12 point font should have 6 points of spacing between paragraphs. And, you don’t need to use both indents and paragraph spacing together. They both serve the same purpose, which is to provide a visual cue that a new thought (paragraph) is starting. Incidentally, half inch indents were common in the monospace typewriter era, but look much too wide in this proportional world we now live in.

Align your text to the left and avoid full justification. Left aligned text (also known as ragged right) has a cleanly aligned left edge, while the right edge varies from line to line, determined by how many words can fit on any line. Full justification is what you see in newspapers, where both edges are aligned. The problem with full justification is that extra space needs to be added between words and sometimes individual letters to “spread” the line out to make the margins even. This can lead to awkwardly spaced lines that just look ugly. On the web this is especially true. No excuses here, never fully justify on-screen text (to be fair, there are rules for figuring out when you can fully justify, but they’re a bit complicated for this writeup). And, just for good measure, remember that a newspaper is never a good design resource (they do layout for efficiency, not beauty and design professionalism).

And now on to C.R.A.P., where the rules get a bit more designer-ish. Although never actually written as such in The Non-Designer’s Design Book, Robin Williams hints at this arrangement of letters that stand for her four basic design principles: Contrast, Repetition, Alignment, and Proximity. I’ll go through each and describe what these ideas mean to you.

Contrast draws the eye to the page. Avoid leaving various items on the page looking similar. If the items, such as font, colors, sizes, shapes, etc., are not the same, then make them very different. Our eyes like contrast, and we use contrast to help us sort through the importance of various items on the page.

Repetition involves reusing design elements throughout a document. When you repeat visual elements throughout a document (and even from one document to the next), you improve the organization of your document and strengthen its visual unity. You might call this “being consistent.”

Alignment refers to how the elements on a page are lined up with each other. You should never place anything on a page arbitrarily. Everything should be positioned in such a way that it forms visual connections with other items on the page. It’s a good rule of thumb not to mix alignments. A common mistake, for instance, is to center a title over a left-aligned block of text. Instead, you should left align your title, thus pulling together the headlines and paragraph text into a uniform, and intentional look.

Proximity refers to keeping related items together. When you place a headline close to the text that it headlines, it creates a single visual unit, rather than multiple individual units. Generally speaking, this helps organize the information on the page while reducing visual clutter.

To conclude, a rule about rules. Don’t break design rules unless you’re a designer and know what you’re doing. The first five rules I outlined above should never, ever, ever be broken. The last four rules, being more general principle than rule, are intended to give you a sense of how a designer approaches putting stuff on a page. If you can apply all of these practices in your documents, not only will they look more professional, but your message will be more effectively delivered.

I may someday do a follow-up to this article and include within it some of the other slightly less common design and typography rules that didn’t make the cut today. Until then, I hope these rules help you with your everyday documents.

Craig W. Samson