Word Advanced Document Design Course
Author: Dian D. Chapman
Note! In order to show image details in this lesson, some images are large. If you need to print this lesson, adjust your browser PageSetup settings. If you can't lower your default margins enough to print the page properly, use the landscape print mode to ensure text is not cut off the page. See this TechTrax article for more details about how to print documents from the web: Printing Articles from the Web.
Lesson One: Design Basics
How long does it take your computer to boot up? Why would I ask such a question at this point? Because if it takes your computer a long time to boot up, you may be guilty of having a ton of fonts on your computer. If they're all installed, they will all need to be accounted for before your system can start up. But who doesn't just love collecting up tons of cool fonts to use! They're such fun and look so cool. And it's so much fun to use all different kinds of cool fonts on a page, right?
When I first started using computers, I thought the same thing. Then I began to learn professional typography and realized I had way too many fonts on my system and began to get rid of many of them. When would I ever use them! Sure a blood-dripping font may be fun for a Halloween invitation, but since I was a professional designer, I needed to concentrate on a few basic fonts. My system thanked me for the clean up!
To Serif or not to Serif!
So what are Serif and San Serif fonts? Well, you've no doubt heard of Arial and Times. Arial is a San Serif font and Times is a serif font. Serifs are the little feet on fonts that help our eyes travel along a page and read them. I'll explain more.
Serifs are little lines at the ends of Serif family fonts that create an imaginary line along the reading line that assists our eyes in reading. Serif fonts are generally used for large amounts of text, such as a book. Notice the two blocks of text below. Read each of them an think about how you feel as you start reading each.
As you read the two samples above, most people get a feeling of calm and familiarity when they read the Times paragraph. It should feel comfortable to read. You should also be able to read it without much effort because your brain sees it as an old, comfortable friend and the eye can easily speed along the imaginary line to read faster. Notice in the image below that if you look just above the lines I've added, you can see how the serifs on the font seem to create an imaginary line under the words.
Conversely, the second example of text you read above may give you a feeling that you're going to have to work for this one! All those block chunks of characters are read by the brain as block after block. So rather than feeling a flow when you read, you may get more of a feeling that you're a soldier marching from word to word. Your eyes may not actually stop on each word, but reading this much text in a small chunk like the above example should make you feel a little tense, as if you're putting forth an extra effort to get through it.
OK, so if san serif fonts make you feel so rotten, then why am I using them in my lessons? Good question. And if truth be told, I probably should use a serif font to give your eyes a break. However, notice that my lessons are spaced farther apart than the text in the sample. One way to get around feeling tense by reading blocks of san serif text is to space them at double or 1.5 line spacing. This way the eye can feel a bit more at ease because it can flow with the white spacing as an aid to reading.
But another reason is because serif fonts are relaxing. And I don't want you to fall asleep here! Yup! San serif fonts are often used for intense, technical documents to leave the reader with a little bit of tension. Just enough to keep them awake and concentrating on the material.
If I were to write the whole lesson in this serif font, you would be able to read it a little more easily, but your brain may also start to feel so relaxed seeing its familiar friend, the serif font, that it will relax and not concentrate as closely on what is being said. If this were a novel and you were enjoying yourself as you read, that would be fine. But since this is a lot of technical material, much of which you may not be familiar with, so it's important for your brain to not get too relaxed. We want it to feel that this information is important so it will have a better chance of dealing with it.
That is why I use a more serious font! Plus, it's a cleaner font. The words are crisp and on a web page, that may be an issue. I have no idea what type of monitor you're using, so I have little control over how the final output will display. Therefore, I'm taking advantage of this crisp font.
San serif fonts are generally used for headings. They make a statement. Serif fonts are more comfortable and work better in blocks of text that are closely spaced. San serif fonts also work well with numbers, particularly tiny numbers. Look at the sample below and see which is easier to read:
Although this is a simple table of numbers, you should find that the second set of numbers is cleaner and your brain can recognize and accept them easier than the ones on top. All those serifs can cause numbers, particularly in a small font size, to be difficult to comprehend. The example above is also written with the same size font. Although you'll notice that the serif fonts appear smaller than the san serif fonts. This is always how they will appear. So you'll may need to adjust the size of the serif font to make it a little larger if you needed to match the text in the two fonts.
Another good place to change the style to a san serif font is in a footnote. Footnotes are generally fairly small print. If you were to type them in a serif font, they might be difficult to read. So it's a good idea to switch the style of the footnotes in a document to a san serif. If you're using a particular san serif font for headings, you should use the same font at a smaller pitch. Don't use a different type of san serif, as mixing two of the same is a no-no! In the image below, both footnotes are 10pt fonts. However, one is in a serif, the other is a san serif font. Which one has the clearer readability?
The general rule is that you should use serif fonts for text and san serif fonts for headings. Or you can use just one font throughout the document, be it serif or san serif. You can also get away with using one font type for all the main portions of the document, such as headings and text, but change one other item in the document to always be another font, like all the numbers in tables and/or all the footnotes. But, of course, rules were meant to be broken. Just make sure that if you do break them, you know why and are using that reason to your benefit. Such as I'm doing here to keep your attention, by using a well spaced san serif font for technical material.
An important rule that you should not break is to use more than one font from the same family style in the same document. In other words, do not use two different san serif fonts in the same document, or two serif fonts in the same document. Choose your fonts and stick with them. If you're going to use Times, don't also use Bookman for parts of the document. Use your san serif font if you must change the feel at some point in the document.
There would be one situation, however, where you can get away with using a third font, but it should not be from one of the same families as those you've used already. In a document like a book or newsletter, particularly magazine articles, it's common to use pull quotes to break up the document and add a tease by blocking a quote in large text within the page. If you wanted to use a pull quote, these can be quite effective and we'll play around with them in the next lesson. But you will want to use a font that is in one of those special families, such as Decorative, Impact or Script. Using a fancy font to add a large chunk of text as a pull quote to offset a document can replace the use of an image to break of a page. Therefore, the font becomes more of a design element than a text font.
After a quick web search, this is one site I found that will provide you with more details about fonts and their reasons for being: http://www.redsun.com/type/. If you want to learn even more, I'm sure a further web search will give you vast amounts of material to study.
Kerning is changing of a font characters distance from another character. And this is only done with some character sets. It's a somewhat confusing concept to grasp, unless you deal heavily with fonts in various design situations. So I probably could have gotten away without even bringing up the subject. But I'd hate to have you tell a design friend you took a design course and then were unable to tell them what Kerning meant, if asked! So I'll give you a brief explanation and then tell you not to worry about it, unless you plan a career in design.
Take a close look at the image below.
You can obviously notice that the spacing is different. And yes, I cheated in this example. I'm making the difference vastly different by using a proportional font and a non-proportional font to exaggerate what Kerning is all about. However, notice in the sample above the F and L fonts. Also, notice the R and I and T and I fonts. See how in the top example the F and L are nearly joined together? This is kerning. The L is thin and takes up little space. Yet, the F is larger and takes up more space. Also, notice the O. See how much space the O takes up? In order to balance out words and pull letters together better, some thin characters are given less space. Whereas, fatter characters are given more space.
Non-proportional fonts, such as Courier, are given a block for each character. Think of it as if each character was given one square [ ]. And O would fill up that square. However, an i would take less space, so there would be more white space before and after that character. Proportional fonts adjust to the different needs of different characters. So an i will take up less space than an o. This helps make the words themselves look better because they're bound together more as individual items versus being spread out and making the text hard to read. Notice if I type and o and an i in brackets, with no spaces between, you can see how much wider the o brackets are apart than are the i brackets
Here are the letters in the alphabet with brackets. Notice how they differ.
Proportional fonts can handle most of the adjustments on computers good enough for the average user. For those who must be concerned with heavier design elements, kerning will make the more advanced adjustments. So as I said, it's not something you really need to know how to use, but you can't take a typography class and walk away without at least being able to say "Sure, kerning is the advance typographical adjustment of certain character combination spacing!" Geez, you sound so smart!
Rivers of White
Note! If you need to fill in a page with text, you can use Word's auto feature and then type =rand(4,5) and you'll get four paragraphs of sample text with five sentences per paragraph. Great for testing. As long as you don't care that it's been typed typographically incorrect, since it has two spaces between each sentence! We can use this feature later when we'll need to fill up sample documents with test to practice formatting techniques. The default for this feature is on, but you can check by clicking Tools/AutoCorrect/AutoCorrect and make sure the Replace text as you type option is checked.
Why shouldn't you use two spaces? Because a typewriter was a non-proportional type device. Each letter had its own square and all characters were spaced the same. They had to be, because a typewriter had no way of knowing what combination of characters you might type, so it couldn't move that i closer to the previous letter, because that previous letter might have been an o and not an r. But computers are smarter! They have the ability to know what you type and make the needed adjustments. Thus, we learned to deal with proportionally spaced fonts. As you saw in my example above, the bracket for the i is thinner than the one for e.
With a typewriter, each letter had the same allotment on the page. But with computers, they're given different allotments. A computer knows a period is a period and it gives it just the right spacing after it. So there's no need to hit the spacebar twice to add extra spacing to break up sentences. In fact, if you do, you'll end up with rivers of white! What's that? I'll show you. Look at the samples below and see if you can see what I mean. Both samples are exactly the same, except that the first paragraph has one space after each period and the second sample has two.
My example above isn't the best to demonstrate the effect, but you can probably notice that the second paragraph seems to have holes in it. Whereas, the paragraph above it looks more together. If the example was more dramatic you would see large gaps in the text. Depending on how some text is aligned, it could cause huge rivers of white gaps to zigzag through a document.
These rivers of white can cause the eye to wander to them and can take the attention off what the words are trying to say, because the reader is distracted by these chunks of space. Especially if the reader knows what the problem is! Then their brain will be so concerned with the bad text layout that whatever the words have to say will take a back seat. Therefore, unless you're in marketing or advertising and you have a specific reason for distracting the reader, you should do your best to cause as little distraction as possible.
The study of Eye Flow in general, is the study of how the eye and brain work in conjunction to see things. I'm sure at one point in your life there was a time when you notice some advertisement and thought to yourself, "Wow, that's a good ad!" Did it catch your eye and make you think? Did it catch your eye and make you see what the advertiser wanted you to see? The bottom line: Did it catch your eye?
There is actually a specific flow that the eye uses to scan a page. And for the majority of us, it's a backwards Z. Take a look at the image below. I swiped a portion of this from the web site I referenced above. You can see it's a well designed page and, specifically, that the designer knows about eye flow, because they put elements to catch or lead your eye, in the locations where your eye will naturally flow. Look below and tell me the 1st, 2nd, 3rd and 4th things you notice on the page.
If you're like most people, before you even notice a word on the page, you noticed the page navigation on the top right, then your eye noticed the title, then the drop cap, the B at the beginning of the first paragraph, and finally your eye zipped down to notice the bottom navigation buttons.
The eye flow to a page is demonstrated in the above image. Don't ask me why. I haven't studied this stuff in detail. But I was given many demonstrations of this in several design courses I've taken over the years. I've had this proven to my own eyes over and over by having pages displayed to me and then questioned about what I saw first and how easily I could view specific items on a page.
Now look at this image below and think about what you see and how you feel when you first look at the page.
Chances are your eyes were having a little battle with your brain! Because of the large image on the page, your eye wanted to jump to check it out, but your brain saw the words in the title, Using Artwork in Design, and your brain wanted to read those words! The drop cap for the story was probably just an afterthought to your brain, because there's so much going on at the top of the page.
Just by knowing a little about eye flow, I can assume that your eyes scanned the page in the directions I've displayed below.
No, I'm not a mind reader. It's just a fact. And a powerful one that advertisers study and take advantage of all the time! Advertisers are constantly showing material to groups of people to get their reactions to the ads. They want to learn what stands out. What the person remembers when the image goes away. So why do you care what advertisers do? Well, if you're planning to do any document design, you'll become somewhat of an advertiser yourself. You'll have the power to draw the reader's eye to the important elements on the page. So learning this will help you control the flow of a page. Likewise, not understanding this can cause your reader's eye to come to a screeching halt! Take a look at the next image.
If the page had looked like this, would you really care about what the text said? You'd probably have a pretty hard time trying to concentrate on the page itself, because your brain would be so distracted by this big, black block on the page! OK, sure this is a dumb example. Who would put a big black box on a page? But I have seen things that are almost as ridiculous. Documents or web pages so concerned about adding lots of decorative eye candy that the words on the page are lost!
It may be hard to grasp the concept I explained above, but the point is that you'll want to pay attention to where you put images on a page, because you can add to or take away from the document, just by where you place things on a page.
And speaking of placing things on a page...I was once shown an example of how important it is to pay attention to the total page layout. The example cracked up everyone in the class. I don't have that exact example, but I'll show you a quick demo of the idea below.
Magazine designers just love to use Drop Caps. That's when you make the first letter in the story, larger and more noticeable. As with the image samples above, the T is a drop cap. It, too, is a design element. But it's important to pay close attention to the text of your drop caps. Or, as with the sample belowa sample which I once saw done, accidentally, in an actual magazineyou could be saying something you didn't mean to say!<lol>
In case you missed the point, take those drop caps and see if you can make a word out of them!<hee, hee>
However, this could be a wonderful way to pass along a subliminal message. Say your article was on animal rights. Imagine the impact if the letters were to spell out MURDER! The text might be written as a sensible article that doesn't threaten anyone's sensibilities, merely conveying a point of view. Yet you'd also be bluntly screaming out an impassioned point with the drop caps! Pretty ingenious design, eh?
So, let me first just say that you should also consider white space as a design element. Sounds silly, I know. Using nothing as a design element. But it's true. You can make a big statement with nothing! Say you had a page that was empty except for a few words somewhere in the middle or corner of the page. You can imagine how that type of contrast would make a point. Below is a simple example of how white space can be used to make a point.
The use of contrast is also a wonderful way to add a design element to your document. One of my favorite books from my days as a professional designer is a book called The Gray Book. Back when I was employed as a technical designer, a color printer was a rarity. So we needed to learn to create intriguing documents with shades of gray. It was a challenge, but one I enjoyed. The simple use of a little shading and/or reverse text can change the whole mood of a document. Here are a couple quick examples below. Take a look and see what you feel when you look at them.
Here is a title with no special effects:
Here is the same title with reverse text:
And here it is again, but this time the font has been softened, as has the shading:
Three titles; three moods. The first is simple and plain. Chances are you wouldn't think about it too much. It's there, you read it, you get on with your life. The second is powerful. If the reader wanted to convey a feeling of power, this might work. Maybe even making the text bolder? The third is more elegant, but this too could work. It flows and could be thought of in the same vein as motion. So it could work, too. It would depend on the rest of the document. You can't just toss out a design element that works with, say one article, without thinking of how it will relate to other articles and elements.
However, I have seen a magazine that does use a completely different design style for each article. Rather than giving the whole magazine one consistent look, the fact that each article has its own individual look, gives the magazine as a whole its own consistent style!
This includes web pages! If you plan to create web pages and don't understand CSS (Cascading Style Sheets), learn to use them!
Creating styles in Word is easy and there are many shortcuts that make the job even easier. A style groups text formatting characteristics into a single named style. Then you apply the style to a block of text and that text takes on the characteristics of the formatting that's been created within that style.
But to make the style effective, you have to make sure to use the proper style on the same type of items within your document. If all the headings are styled with HeadOne, then you can't deviate from that fact. If you decide to make a header a sub header and thereby change the font to a smaller or non-bold font, don't just remove those characteristics from that heading. Build a new style with those characteristics (or without them, as in this case) and apply that new style to the heading. Use them consistently throughout the document for like text items, such as headings of various levels, bullets, footnotes, and general document content.
Then should you decide you don't like the way the document is coming alongor your boss makes that decision for youyou can easily change all like elements by changing the characteristics of the style. Any changes to the applied style will then be spread throughout the document, saving you tons of time, as well as keeping your document looking professional! Say you initially created a san serif, bold heading style of 24 points. But your boss later decides s/he wants it changed to 27 points. You can easily go into that style, adjust the font size and the job is done.
I've already written a document explaining how to use styles in Microsoft Word. So rather than repeating myself here, I'll point you to that article and have you read it from my web site. While you're reading the article, it's a good idea to follow along with the tutorial on a sample document in Word and practice building your own styles. The extra effort will help reinforce the idea and help you learn how styles work. After you've finished, come back here and we'll discuss some formatting tricks before we end this lesson.
Here's the article link: Getting Started with Styles.
In the next lessons, we'll use what you've learned
here to work on newsletters and books.
Copyright (c) 2002, Dian D. Chapman, MouseTrax Computing Solutions (www.mousetrax.com), Chicago, IL