Working with Type
In-house designers spend most of their time dealing with text. However, few beginning designers understand how to use text effectively. The documents produced by first-time designers use too many fonts, include odd gaps in text, and break headlines in awkward places.
We still communicate with words. Until icons once again replace letters – hieroglyphs’ revenge – the skilled use of typefaces is power. As you read this chapter, look at the words in advertisements. Ad designers know how to select and use type better than any other publishing experts.
Don’t Type, Typeset
Forget how you learned to type – typesetting uses different rules.
In-house designers do not type – they typeset. The difference can be seen in any book, magazine, or newspaper. In school, you might have learned how to type, but if you apply the same rules to publishing, the result is a visual disaster. It is very difficult for most beginners to lose habits, especially ones so deeply entrenched as how to type.
One Space or Two
If you watch a secretary type, you’ll notice how automatically he or she adds two spaces after a final punctuation mark. In fact, it took us several months to break this habit. We wrote macros for our word processors to change two spaces to one space throughout documents. The one space rule applies to all instances where you would use two when typing using a typewriter.
The only exceptions to this rule are when using a monoscpaced font, which are fonts that look like a typewriter font. These fonts use letters that are all the same width. Using two spaces makes the text easier to read.
Underlining word or phrases looks atrocious. If you want to emphasize a word, use a bold font. If you want to mention a book, movie, album, et cetera, use an italic font. Never use underlining unless ordered to do so by an insane boss. Even then, you might show your boss what italic or bold fonts look like in place of underlining.
Titles that you were taught appear in quotes, keep in quotes. It is only underlining that is replaced with italics.
Align with Tabs
Use tabs, not spaces, to align columns of text or numbers.
Typewriters tend to use monospace fonts – each letter is exactly the same width. Because monospaced fonts are predictable, people often align text and numbers vertically using spaces. Using spaces does not work in most computer programs. Get into the habit of using tab stops to align text and numbers.
Most computer programs feature right, left, and decimal tabs. A right tab aligns text to the same point on the right, leaving the left edge of columns ragged. Left tabs are traditional tabs. Decimal tabs are used to align a column of numbers along a decimal point.
Just a Dash
Use an en-dash or em-dash in place of two hyphens. An en-dash (“–”) is nice and short, while an em-dash (“—”) is twice as long. These dashes are thinner and longer than a hyphen (“-”) which should be used only as a hyphen. We tend to use en-dashes – em-dashes are much too long in some fonts.
Quote Us on This
When typewriters were introduced, they featured multi-purpose tick marks instead of true single and double quotes. Tick marks are vertically straight lines. The nice thing about tick marks is that they serve as quotes and primes. Primes are the marks traditionally used for measurements.
|Quotes:||“Hello.” ‘These are singles.’ Don’t use ticks!|
|Ticks:||"Hello." 'Tick marks.' Don't use ticks!|
|Primes:||He was 5′11″ and she was 6′1″ – and they were happy.|
Notice the differences in the various marks. Quotes resemble commas, with a definite dot. Ticks are uniform, with both ends of the mark equal in width. Primes are like doorstops, with a think top and thin point.
If your computer software does not feature true primes, then italicize the tick marks and try a bold variation. Most high-quality fonts feature all three marks.
The American National Standards Institute (ANSI), defined the basic computer character set many moons ago. ANSI only defined the first 127 characters, leaving companies free to expand the set. Unfortunately, Adobe, Apple, IBM, Microsoft, and other companies never agreed on the order of additional characters
Most fonts include the most common special characters. Examples include the trademark symbol, fractions, and non-English characters. Using special characters whenever possible adds a touch of professionalism to any document.
Consider the difference between ¼ and 1/4. There is no comparison – the true fraction is fancier and often easier to read, especially when next to a full number.
Ligatures and Experts
In the days of “real typesetting” – before desktop publishing, some letter combinations were replaced with single characters. These letter combination all feature the letter F. The lowercase F tends to be difficult to read in some situations, so typographers designed ligatures.
The basic ligatures are: ff, fi, fl, ffi, ffl.
Today, computer software is trying to catch up to this old trick.
In addition to ligatures, many fonts include true numerals and alternates. True numerals feature numbers with varying baselines. These numerals are sometimes referred to as classic numbers.
Alternates are minor redesigns of characters. By using alternates within a line of text, you can make the font look more like handwriting or old metal type. There are currently few fonts with alternates, but the increasing demand for clones of hand lettering will change this.
Body Copy Building
Medium length and long business documents rely heavily on body copy. Text frames cover more than half of each page in a typical newsletter. With so much real estate, body copy must be easy to read.
Designers pay a great deal of attention to the grayness of text blocks. Readers like airy pages. The less ink on a page, the more likely your audience is to read the text. One rule-of-thumb is to limit text to 30 percent “coverage” of a page. Another traditional test is the “dollar bill” test, in which a dollar bill is used to see if any blocks of body copy are larger than a dollar. Ideally, headlines and artwork break the monotony.
Selecting a base font might be the most important decision you make when designing a predominantly text document. By studying other publications, you can guess which fonts are considered the easiest to read.
“Times” fonts dominate publishing. Publications favor sizes from 10 to 12 point.
The overwhelming number of publications are typeset using a variation of “Times,” which was originally designed in 1923 for the London Times. Monotype designed Times with readers in mind. As a result, readers now expect to read text in this typeface or a variant of it.
The following guidelines – which are not set in stone – help select a font for body copy:
- Select fonts based on the media used; serif for most print, sans for most online documents.
- Select a font with an x-height approximately half as tall as capital letters.
- Use a medium weight in book, Roman, or normal style. Avoid fonts that are too thin or too thick.
- Do not use a monospace, condensed, or extended font for body copy.
- Use a point size from nine to 13. Eleven and 12 points are very readable sizes.
Select several fonts and print complete paragraphs using each font. Study the paragraphs carefully. Your initial reaction might not be correct. Designers often look more for artistic affect than readability.
Facing an Audience
Despite the popularity of the Times family, it is not a law that designers must use a Times font for text. There are plenty of serif and sans serif faces to choose from for your documents. Notice that we suggest avoiding fonts from other groupings. While it might seem cute or creative to set text in a script font, readers will tire quickly.
The height of lowercase letters affects the “grayness” of blocks of text.
The x-height of a font determines how gray a paragraph appears. The shorter lowercase letters are, the more airy a paragraph seems. The Wall Street Journal uses a tall x-height because the paper wants to appear gray – the Journal doesn’t even use photographs.
In addition to the x-height, notice that the weight of a font affects the gray level. Heavier fonts actually decrease the gray level because they offer contrast against blank space. Thin fonts blend into a page.
Sizing Up Text
Point size affects a font’s readability more than any other factor. Any typeface is legible if the font used is really big. We are not about to suggest using a 14 point font for text. Instead, we want you to realize that even a half-point difference matters. Text set in a 10.5 point font is popular in major publications.
After measuring the text of several major publications, we have noticed that text fonts fit into a narrow range. The sizes from 10 to 11 point seem popular, with approximately 10.5 being the most common. Most popular computer programs default to a 12-point font. While 12-point text is very nice for letters and reports, it is too large for most documents.
String a few word together and you have a sentence. A few sentences and you have the basic block of text – the paragraph. People read entire thoughts at a time. A paragraph represents a complete thought. In fact, if a short word is missing or printed twice, most readers never notice.
“A paragraph has at least three sentences….” Sure it does. Read any newspaper and count how many sentences make a paragraph. One sentence paragraphs cover newsprint.
In-house designers are not preparing English 101 term papers. Your responsibilities are selling and informing. Long paragraphs intimidate readers – who are generally not English composition instructors.
If a complete thought requires more than four sentences, consider making your introductory or summary thought a single paragraph. One sentence paragraphs seem choppy at first, but they work.
Reducing the number of sentences in paragraphs is not enough. You might need to shorten sentences. Try to replace commas, semicolons, or dashes with periods. Some rewriting might be required.
Thinking back to grade school, we can recall being taught to indent paragraphs a full inch. As we aged, we slowly decreased the indentation. This change seemed natural. Likewise, in-house designers learn to use as little indentation as possible in most documents. One em-space, usually a pica or less, is sufficient.
For artistic effect, you can increase the indentation of paragraphs, but remember that readers like to keep eye movement smooth. Comfort takes precedence in business communication.
Another effect, which can work very well in lists, is a hanging indent. A hanging indent actually moves all lines of a paragraph, except the first, in by an em-space or so. Hanging indents highlight the first word of a paragraph, since it hangs out toward the margin.You might notice that in this book we do not use indenting to indicate paragraphs. By using block format, a nice white gap exists between thoughts. We generally prefer a en-space gap, meaning one-half of the text font’s size.
Every document layout with text features columns. A letter might be a one-column layout, but there is still a column. Deciding how wide a column should be or how to align text in a column requires careful thought.
Each line of text in a column should contain five to 12 words. The best column widths average seven to ten words per line. Understand that these word counts are averages, based upon words four to six letters long. Columns with seven to ten words per line are easiest to read. Avoid averaging less than five words per line.
Designers use counts to help calculate column widths. A count is an en-space, the approximate width of most letters in a font. Remember that an en-space is slightly less than half of the point size. Line counts of 30 to 40 work well, with 35 nearly perfect.
A column width, in picas, should never exceed three times the size of the text font, as measured in points. In other words, a 12-point text font should never be used in a column wider than 36 picas. A 10-point text font should not be used for columns wider than 30 picas.
Newspapers and magazines tend to favor 12-pica columns. Using a typical 10 point font, with an en-space of 4 points, the 12-pica column allows for 36 counts.
12 pi × 12 p (per pica) = 144 points
144 points / 4 points = 36 counts
If you want to take the easy way out, multiply the text font size by 1.2 and round to the nearest whole number. The result remains 10 point text uses a 12 pica column.
Out, White Gaps
If you read a lot of magazines and newspapers, the odds are you have encountered wide tracking or huge white gaps in columns. White space, especially between letters of one word, is unsightly. White space can be an effective design tool, but it doesn’t belong within lines of text.
The primary cause of gaps is narrow columns. If a column is less than 20 counts wide, one large word can create gaps. Large words create problems because spaces between several small words are less noticeable.
If you must use narrow columns, hyphenate the body copy. Hyphenation eases white space a great deal more than you expect. One caution: do not hyphenate more than two lines consecutively. A string of hyphens along the right edge of a column looks odd.
The alignment of text in a column affects readability. People, at least those who read European languages, expect nice, straight edges along the left-hand side of a column. Experimenting with text alignment is likely to annoy readers.
There are four traditional alignments for columns of text. Designers refer to a smooth edge of text as flush. Text where the ends of each line varies is set ragged. The other option is to center lines, leaving both sides ragged.
Newspaper columns are traditionally full flush, meaning the left and right edges of text lines are consistent. Books are usually full flush, too. Word processing software refers to full flush columns as justified or fully justified. Magazines, letters, and non-fiction books tend to be set ragged right. Ragged right is also known as left justified.
For effect, some publications will place captions to the left of a graphical element and set the type ragged left, flush right. Designers often refer to this alignment as flush right. Computer software might refer to this as right justified.
It’s a Wrap
Altering the alignment or width of a column to fit around another element is known as wrapping text. Designers refer to the places where text columns are adjusted as wraps. While wraps are enticing, they are often abused.
Try wrapping on the right-hand side of columns when possible. Wrapping on the right leaves the left edge flush, as readers expect. If you must wrap on the left, try to keep the margin smooth. Use angular margins, not irregular shapes.
A wrap should never be set inside of a column. Lines of text split by elements are difficult to read and might produce white gaps.
Headlines and headings exist for one reason: to attract readers. Contrary to myth, you do not want informative headlines, since you want people to read the text. If a headline tells the whole story readers move to the next article.
The best headlines tease a reader. A browser must be tempted or lured – we won’t pass judgment – into reading. Think about newspapers. Headlines might tell you who won or that a war is taking place, but details are missing.
Any Face Will Do
Use one type family for headlines in a publication.
Selecting a headline typeface is much easier than selecting a text face. Use any face you think works. The only rule we suggest is consistency. Select one typeface for most headlines and headings. You might use one or two additional faces for special headlines, but one should dominate each document.
Headlines and headings must stand apart from the fonts used for text. Some newspapers use the same face, but in bold or italic styles. We prefer to use an entirely different typeface.
One sure way to have headlines stand apart is to select a face from another typeface group. We use sans serif faces for headings in most sales literature. Sans serif fonts contrast nicely with serif text.
Don’t try to change tradition – larger headlines are more important for readers.
Newspaper readers know that the larger a headline is, the more important the article it introduces. Do not confuse readers – they are well trained.
Headlines and headings used within an article or chapter decrease and increase in size according to the level of detail in following paragraphs. The smaller a heading, the deeper into a subject the text delves.
Sense of Belonging
Make it easy for readers to know which articles headlines and headings introduce. Place a headline closer to the article below than it is to any element above it on the page. Headlines placed too far from an article are said to float or drift on the page.
Because headlines stand apart from the rest of a layout, mistakes are more obvious. Misspellings and poor grammar are placed on display. Proofreading corrects the major mistakes before it is too late. It is the minor errors that trip up in-house designers.
Alphabet soup headlines use acronyms and jargon readers might not understand. Never assume readers know what initials represent, not even for a trade journal or company newsletter. Internal publications have a way of finding an outside audience. Also, not all employees speak the same shorthand.
EDD Reports Drop in CPI
can be replaced with a simpler, easier headline:
Consumer Prices Fall
In case you were wondering, the employment development departments often collect data on the consumer price index on a regional basis. Still, all a good headline has to state is that prices are falling.
Write headlines and headings in an active voice. Always begin headline with who or what did or does what is being discussed. If you need a preposition, you probably wrote a passive headline.
Readers Attracted by Headlines
Headlines Attract Readers
Phrases should not be split across the lines of a heading or headline. This includes prepositional, verb, noun, and almost any other phrase that can be confusing when split. Readers might read only the first line of a headline, missing the point or getting confused.
Tips for All Text
The following tips apply to all text elements. There will be times when a design violates these suggestions – but be careful. Following these tips at least prevents disasters.
Reunite Widows and Orphans
Adjust text so one word doesn’t appear alone in a column or at the top of apage.
A widow is a single line of text or a headline at the bottom of a column, apart from the following lines. An orphan is a single line at the top of a column. Widowed headlines are design nightmares.
A wise use of tracking can help correct some widows. At worst, you might have to add artwork or pull quotes to lengthen a text column. Orphans are corrected by removing a word, sentence, or a paragraph.
We harp on consistency throughout this book. Audiences like to be comfortable with documents. As an in-house designer, use this fact to your advantage.
Other text elements need to complement the body copy and headline fonts you select for a layout. Bylines, teasers, captions, and other elements are often set in agate versions of the headline typeface to ensure consistency.
Summary & Tips
- Typesetting requires forgetting how to type.
- Use typographical symbols and special characters.
- Set column widths with readers in mind.
- Be consistent with a handful of typefaces.