Five Simple Rules of Design Every Writer Should Know

I was invoicing a client recently and realized I didn't have his address. I'd worked for him only briefly, by email — we'd never even spoken by phone — but I knew his group had a website. Quickly, I Googled him to find the "contact us" page and, fortunately, it contained his street address. Better yet, the site was beautiful — it featured gorgeous photography and was easy to navigate.

But there was one big problem. The website's typeface was almost unreadable. It was way too small — I'm guessing eight or nine point — and, worse yet, it was in "reverse."

For those of you unfamiliar with typography, let me explain that type is "reversed" when the letters are lighter than the background on which they sit. This typically means the letters are white (often on a black or navy background). Look at the "look it up" button at the top of this page for an example.

There's no denying that reverse is pretty and it can be very effective used in limited, small areas on a printed page or a website. But on my client's website it was used on a veritable clearcut of small type. Pages and pages of it went on and on. Even though I'm a writer and an editor — and interested in this client's work — I couldn't bring myself to read it. It was just too hard.

So what's a writer to do? Well, in this case, the design wasn't ruining my words — I'd done a different piece of writing — but I still thought it was a waste of the client's money and opportunity. Bottom line? All writers need to learn some of the basic rules of graphics and help guide their clients through the job.

Here are five common design issues to watch for:

1) Save "fancy" type — reverse, bold, italics — for emphasis only. It's best for a word here or there. Notice how in this column I've used italics intermittently, for no longer than a word here and there.

2) Be aware that the strongest color in the world is almost always black. I frequently argue with clients who want to put headlines in red, yellow or orange to "emphasize" them. Unless the type is massively thick, this is almost always a bad idea. Take a page in a magazine with different colors on it and squint at the page. What do you notice most? For most people, it's the black. (I'll forgive VT its blue headlines. They're just dark enough to be readable.)

3) Insist that the graphic designer give you enough space to write decent headlines. By my rules, you need a minimum of 32 characters/spaces to write a meaningful one-line head. (Some graphic designers won't want to give you more than about 15!) I always write headlines after the layout so I can make best possible use of space. Remember good headlines should tell you what the story is about and should have a verb.

4) Indent frequently, remembering that unless you're writing a book, paragraphing is not a literary tool — it's a visual one. Give your readers lots of friendly white spaces on which to rest their eyes. This may mean paragraphing as often as every two sentences — you read that correctly. (Check a good quality daily newspaper and see how frequently they indent.) Also look for more opportunities to break up the text. Subheads and pull quotes are other great devices for pulling in readers.

5) Use good quality photos. In 2009, there's no defensible reason for using blurry, out-of-focus pix. If your client can't afford a professional photographer and you aren't good with a camera yourself, there are lots of excellent sites for buying photos online, inexpensively. One of my faves is iStockphoto. Remember that the requirements for websites and print publications are very different. Low resolution is fine for the web but anything printed needs to be a minimum of 300 dots per inch (DPI).

Granted, the rules of engagement between writers, designers and clients can be tricky. But the story I told at the beginning of this column had a happy ending: I told the client he was missing a big opportunity with his website and he agreed. And, although this wasn't my intent, I may even get some more work out of him.

Join the conversation

Comments from our users:

Good article. I've often stumbled across typos, poor graphics, unreadable copy, etc on websites to which I had hoped to pitch. It's a tricky task to inform the website owner of his/her cyber-errors. Sometimes I speak up, other times I let it slide.

#1 is fine. #2 is true technically, but it's not the "blackness" of the headline that makes it stand out, it's the contrast. You're assuming a white background. On another background, there might be a color that provides better contrast. And, as you point out, contrast can be achieved in other ways, such as with a heavier weight.

On #3, sorry, but no. The most readable type is yellow type on a black background. You prefer black on white because that's what you're used to, but if you'd grown up reading yellow on black, you'd probably find black on white unreadable.

In fact, on many monitors a pure white background is hard on the eyes. Not only does a black background use less energy (saving your battery on a laptop), but it's much easier on the eyes. It's just that we're not accustomed to reading this way, and we also tend to view white on black as somehow negative.

#4 is important, but it can be taken too far. Paragraphs have a reason for existing, and it's not just to break text up into chunks, I don't care what you're writing. The worst is the marketing-speak of one sentence per paragraph that has become so common in junk mail. I can't stand it at all. It makes it sound like every sentence is being emphasized -- it's almost like shouting it. Please! Presume that your readers are at least moderately literate and interested enough to handle paragraphs of 2-4 sentences each.

Frankly, a "good daily paper" is the last place I'd look for best practices. The column width is too narrow, the typefaces are often poorly chosen, the content is written for adults with an 8th grade reading level, and the paper stock is of low quality making reading in low light difficult. Papers do what they do because it's cheap and people are used to it. Websites can do better.

Incidentally, while serif type is best on paper, on a monitor just the reverse is true. The low resolution of monitors can make sans-serif text blurry. For large blocks of text, sans-serif is better. And the type size is virtually *always* too small on websites. Luckily, that's easy to change on most browsers/sites.

And you missed overly long pages. The best practice is to break them up, but to offer readers an option to view the entire article on one page if they prefer.

I agree wholeheartedly on #5, and there are plenty of other stock sites, plus free content on Creative Commons and, IIRC, photo.net.

Anyone who works in the creative field and who recognises the value of imagery as a form of communication, either standalone or to illustrate text, knows that it is this type of aggregated, amateur, poorly executed, but inexpensively licenced photography that is undermining the livelihoods of professional photographers, and brings down the standard of printed and digital media.

Each time a client suggests that the imagery they need for their communications materials could be purchased from iStockPhoto (like they know what they are talking about) I feel a lecture coming on. Of course, it's fine if they want to convey a mediocre and generic image, but unfortunately even the best quality copy writing can't save the piece if this is the source a client insists upon. So, please, let's not promote such sources on a site that celebrates great writing. Great pictures are often equally as important as the text.

Some useful rules - though I would usually leave issues relating to font, colour usage and photography to a desiger. For me, para length generally depends on whether I'm writing for print or web - but your specific advice about headline length is really useful. One last point: I wish you'd used bold font or CAPS to pick out the headlines of your rules - I find that bold or CAPS are essential for emphasis in almost anything I write.

While it's contrast and not absolute colours that matters for readability, a large area of dark colour surrounding light objects make the light objects look smaller. If you use light text against a dark background, you almost always need to to increase the size of the type (unless it's already quite large) to keep it readable. If you are already starting with a typeface that it is too small, this will only make the problem worse.

I agree about the lack of readability of reversed type. It seems to be the norm for advertising in my industry. We consciously went for a look with lots of white space just to stand out.

Beware of stock photo sites. They will give you the rights to the photographer's work, but that doesn't mean you have the rights to use the image of the thing in the photo. We recently used a stock image of a building and received a letter from the owners of the building who had a copyright on the design. The stock photo company we purchased from told us we were on our own. Ask if they have obtained those rights before you buy.

Finally, one of the comments stated that reversed type saves energy because more of the laptop screen is dark. That may be true for a CRT but not for LCD laptop screens. The backlight for these is always on at whatever level was set. That's what's lighting up the Apple logo on the back of a Mac. The LCD creates an image by passing some of the light and blocking the rest.

Great article. One other thing to note: the human eye filters out greens and lighter blues, so these are generally poor colors to use for text. (This has to do with the evolutionary development of color perception in predatory diurnal land animals, who look for darker images against the blue background of the sky.)

I have two questions for Charles M, though. I have not previously seen readability info about yellow text on black background. Could you supply a reference for this? Also, with respect to Creative Commons licensing of pictures (and also GNU licensing), my company is leary of using these images because the licenses require that the originals and derivative works must carry the same open licensing. The attorneys at my company insist that "derivative works" refers not only to changes you might make in the image, but to the entire document in which you've inserted the image, and that this then negates your own copyright protection for the work you've created. If you know of a definitive alternative interpretation I would really love to hear it! You can email me at roma_levy@yahoo.com.

Re #3 of Charles M.'s comments on Ms Gray-Grants column: Though both he and Ms Gray-Grant are wrong about the most legible color combination, he misses by well over a mile. The most easily read combination of text and background colors is light blue on white.

Yellow is, to be sure, the color visible at a greater distance than any other, but reading, whether a computer screen or printed page is not a long-distance activity.

Incidentally, though I may be accused of nitpicking; as this is a website devoted to words, and accuracy in their use, I feel that I should point out that black is NOT a color, rather, it is the total ABSENCE of color.

Sometimes web designers are guilty of not cross-checking a web page to make sure it's readable on all formats. If one codes html on a Mac and don't check it out on a PC---and on Mozilla, and on Outlook, etc., one may miss finding a bug or a coding error that doesn't show up in one format, but makes the type look funky in another.

One of the reasons (maybe *the* reason) that dark on white is easier to read than light on dark is that the brightness of the background reflects more light to your eyes, making your pupils contract. This improves the focus and lets you read smaller print.

This is why the small patch with reverse print is fine, while the whole page of it needs a larger type size.

One point that was not mentioned was the old fashioned convention of using only one typeface in a periodical or newspaper. This has been lost to time and the designer's whim. Using multiple fonts on a written work, even fonts that are regarded as easy to read, is a distraction and shows poor craftmanship on the part of the organization.

Wow! I had no idea this column would ignite such a firestorm of controversy!

Charles M., if you're still reading, I'd too be interested in knowing your source re: the readability of yellow type on a black background. Also, I'd be interested in knowing your age. I say that not to be impertinent but because of the issue of presbyopia which starts to strike most people when they are in their 40s. I lasted until my 50s but now am wearing reading glasses regularly, particularly in low light conditions. With reverse type, no matter what the colours involved, I find it almost appears to "buzz" before my eyes. It's wobbly and hard to read. If a website is rendered in reverse, I inevitably steer away.

Age is also a factor for certain conventions. Although I like the content of Wired Magazine I have great difficulty reading it because of what I see as their bizarre layout. (This may have changed recently -- haven't looked at it in a couple of years.)

Julia B., I agree with you about boldface but strongly disagree re: CAPS. Most people find CAPS harder to read than typical U/L case letters. I believe there is lots of evidence on this point (although have none I can cite now.)

Re: iStock photos, Sally O., I agree that they are often banal but they are a better choice than the photos taken by most small and medium businesses. If you want GREAT photography you should hire a professional photographer and give him/her the opportunity to shoot more than traditional grin & grab photos. But budgetary constraints often make that impossible.

Dan H., I agree that too many typefaces on a document (print OR web) are distracting and show poor craftsmanship.

The age factor is a big one--I used to manage and write for printed annual reports (a dying activity now) and still do online annuals and web sites. Designers under 40 just didn't get how hard it is for 50+ readers to read small, reversed or mixed type. Ironically, annual report readers tended to be much older than the designers.

I also used to write for Mondo magazine, which predated and influenced Wired and was at the forefront of post-modern desktop design. Unreadability was sometimes a proud objective of the art directors!

The conflicting rules about colors, serifs and dark-on-light may reflect different guidelines for readability on a computer monitor (depends on user settings and preferences and differs from CRTs to flat screens), in print (black on white generally wins over any other combo) or projected on a screen (which is where I heard the yellow-on-blue rule promulgated); many of the "rules" are whatever you learned from experience or were taught on the job.

My experience suggests the best thing to do is show the design with the proposed typography to a sample of your target audience and get their comments on usability.

Thomas P., you're joking, right? You can barely SEE light blue on white! I suppose the eye strain would really force one to focus, though!

Also, a word to the wise on writing for the internet. According to Human Factors guru Jakob Nielsen, reading patterns online are very different from print patterns. Readers are far more likely to skim online text and read in an "F" pattern, focusing most on the upper paragraph from left to right, skimming down the left side text and reading inward a bit toward mid-page, then only skimming the left side of the page until they reach the bottom. Eyes also move preferentially to images over text. (I have found this to be very true for my personal reading. If I really need to delve into content, I print out the article to read. So much for saving trees!)

As for the allcaps issue, yes, they are more difficult to read than all lower case or mixed case (as long as the mixed case follows standard grammar rules). Neurologically, the visual cortex recognizes text at least partially in patterns of high and low points. Ever see that urban legend about being able to read anagrammed text? One of the reasons this is doable is because we partially recognize words as patterns known as "boumas", named for the cognitive psychologist who proposed the theory. If the shape of a word is maintained in lower case, or upper and lower case, then the brain's language recognition functions help us "fix" transpositions and anagrams in context in many cases, and add to our reading fluency. While there are some that disagree with this interpretation, my daughter generated about 1000 pages of data and statistical analysis a couple of years ago that at least partially supported this effect while she was looking for neurological pathways involved in spelling and spelling dyslexia for her 8th grade science fair project (yes, Mama's very proud!). One of these days I may get around to helping her write up her results for publication. For right now, I just want her to study for the PSAT!

As a writer AND a person who's suffered from migraines since I was a child, I can only hope that most writers disagree with the idea that we should move to dark backgrounds with white (or other bright) text. While I agree that they might look attractive, I groan and leave any Web site created with those colors, as more than 30 seconds of reading and I have an instant headache for the rest of the day. If the content is imperative, I simply have to copy and paste it into a separate (dark on white) document like Word or Notepad. Such a pain in the neck. Please keep those with disabilities in mind when you create your content (and form your style opinions). Sometimes the content really should outweigh the visual. Sidenote: I often wonder what's lacking in content if the person creating it felt they had to work that hard to pretty up its surroundings. ;-)