sign in sign up
<<
Home , Bell (typeface), Kerning, Line length, Myriad (typeface)

visual design Writing in Type: The Art of Choosing that Work By Mi c h a e l Op s t e e g h , Senior Member

12 Oliver Moest/Photolibrary visual design

hy should technical communica- You should devote some time to fi- Key concepts that are specific to Wtors care about when nessing the type in your manuals, inter- typography include x-height, , our jobs revolve around transforming active help, web pages, annual reports, and . technical data into readable and usable proposals, white papers, and whatever information for a specific audience? Be- else you may be writing. All your docu- X-height cause typography actually has dramatic ments and projects should be pleasant The x-height of a is the effects on readability. You can create per- to look at and innovative enough to at- measurement from the to the fect copy and supporting charts, graphs, tract and hold your readers’ attention. median (the height of a lowercase x). and illustrations, and yet the reader will After all, type is all around us on bill- You may have noticed that the x-height not be able to use your carefully crafted boards, signs, web pages, cell phones, varies from to font. If you haven’t information if the type is inappropriate, and television, and your documents are noticed, don’t worry, we’ll examine inaccessible, or uninviting. competing against all of these media for some examples later. with larger The concept of making information your readers’ eyes. x-heights require more line spacing. inviting has been around for ages. One of Aristotle’s five canons of rhetoric ascender height was delivery. Aristotle’s concept of de- livery referred to the speaker’s facial expressions, gestures, and vocal into- x-height nations. To technical communicators, delivery, as a rhetorical device, refers to baseline document design, including the format descender line of tables and figures, indentation, and typography. Technical communicators must, there- � The basic anatomy of type. Understanding a fore, possess a basic knowledge of type few fundamentals is essential to understanding design to help master the delivery of how type works. Pay close attention to the their documents. For example, you may x-height, the height of ascenders, and the depth of already subscribe to the principle that . The typeface used is Adobe sans serif typefaces are easier to read on Pro. screen while serif typefaces are easier to read on paper. This basic tenet is a great Type Basics Leading starting but should not be the ex- Typography, like many art forms, is Leading is the space between lines of tent of your knowledge of typography. relatively subjective. Understanding the type. Technically, leading is measured basic principles, however, will help you from baseline to baseline. The default Importance of Type train your eyes to appreciate the subtle leading is approximately 120 percent of Except for certain situations within qualities of good typography: the point size of the type. For example, graphic design, type’s main purpose is • Contrast. Headings and body text 12-point type would be set with a lead- balancing the readability and should provide sufficient contrast. ing of 14.4 points (written as 12/14.4). of your message. Your type should always • Repetition. Typographic elements The default isn’t always appropriate be- be appealing and inviting to the reader. should provide sufficient repetition cause, in addition to type size, you must Text consisting of decorative fonts or to aid the reader’s ability to quickly also consider x-height and . clashing typefaces turns your reader navigate your text. I can’t offer a formula for determining off. Your use of typography can directly • Alignment. Your text should be the amount of line spacing required for affect whether a potential reader even aligned with other elements of the comfortable reading; it’s a matter of aes- bothers to look at your document. . thetics. As you consider the proper line Looks aside, bad typography can ob- • Proximity. Elements of type that be- spacing, take the following factors into scure the meaning or tone of your mes- long together should be in relatively account: sage. When the message of your résumé, close proximity when compared to • Font Size. Normal text of 10 to 12 for example, is “hire me,” you want your elements that don’t belong together. points is generally set with one to two message to be as clear as possible. By the points of line spacing. Smaller fonts same token, stunning typography won’t For a thorough rundown on contrast, require more line spacing to be legi- land you a job if the content of your repetition, alignment, and proximity, re- ble. Likewise, large heading or display résumé doesn’t adequately match your fer to Robin Williams’s The Non-Designer’s type will likely require less leading in skills to the employer’s desired qualifi- Design Book, which should occupy a proportion to the text size. cations or if your résumé is poorly laid prominent place in every technical • X-height. X-height is the distance out. communicator’s library. between the baseline and median of

March 2010 13 visual design

type size lowercase letters. The larger 12 pts ible type when designing your the x-height, the more lead- documents. Your heading type ing is required because the should be highly readable. It reader needs more space to 15 pts must grab the reader’s attention recognize the word shapes. and make the structure of your leading • Line Length. Longer lines document immediately apparent of text require more line and familiar. The reader isn’t go- space to prevent the eye ing to spend much time reading Type size and leading. The point size of type is measured from reading the same line � heading text, so it’s acceptable to from roughly the bottom of the descenders to the top of the twice. Lines of 75 characters sacrifice some measure of legibil- ascenders. The leading is the amount of space between lines or more should be double- ity. Once the reader is hooked of type and is measured from baseline to baseline. The spaced. Keep your body text and knee-deep in your body text, example below is 12-point type set on 15-point leading between 35 and 70 charac- the type should be highly legible, (or 12/15). The typeface used is High Tower. ters for easy reading. easy to read, and provide no bar- rier to communication. Kerning Kerning is the space between two any manual adjustments on heading or Type Styles characters. Depending on the shapes of key text. There are, perhaps, hundreds of the characters, if they look like puzzle thousands of computerized typefaces to pieces that fit together, they may need Readability and Legibility choose from. All of these typefaces can to be “scooched” closer together to cre- Readability and legibility are very be a bit overwhelming, especially to the ate a more even text color. By text color, similar terms and are often confused untrained eye. Fortunately, you can cat- I mean the gray that body text creates because they seem to mean the same egorize most typefaces into one of seven on the page when glanced at from afar. thing. The two terms, however, are relat- groups; granted, some typefaces will nev- Glaring white spaces between characters ed only as much as a sprint is related to er easily fit into one category or another. can distract the reader. Kerning reduces a marathon: they both involve running. Like fashion, type styles have changed those white spaces. Proper kerning is a Readability and legibility both involve over time. Most type styles are derived tedious task, so you may want to focus the appropriateness and the effective- from the time or place in which they ness of type. were developed and gained popularity. unkerned type Readability refers to the type’s ability Having said that, many typefaces that to attract and hold the reader’s atten- fit within a certain style may have been tion. Readability is what makes us take created outside of the time or place notice of text and want to read more. of origin typically associated with that The more interesting the type, however, type style. You can categorize most type- the more you risk sacrificing legibility. faces in one of the following seven type Legibility refers to the ease with styles: which type can be read and the capac- ity for word shapes to be easily recog- kerned type nized. Legible type must not interrupt the reader or cause his or her eyes to stray. It’s important to understand the dif- ferences between readable type and leg-

Rockwell

� Kerning. Kerning is the adjustment of space between two letters. Kerning is intended to make the space between Swing letters even. In the example above, the � R eadability versus legibility. Readable type first instance in not kerned while the catches the reader’s eyes and invites them to read. second is. Notice the T and the Y fit Legible type enables the reader to read with ease. Jokerman more closely together in the kerned You must find a balance between readability and legibility or managers will not be enticed to read your � Type styles. Typefaces can be categorized into styles. type. The typeface used is Adobe documents or read enough of them. The typefaces Learning the different styles can help you choose suitable . used here are Porcelain and . type for your résumé or other documents.

14 March 2010 visual design

Typeface styles are evocative. They’re reminiscent of the time and place in which they were created because they embody the art and architecture of the time and place of origin. Choose typefaces based � M yriad Pro. Myriad � MT. Gill � Helvetica Neue. on their associated mood and tone and Pro Bold, Regular, and Sans MT Bold, Helvetica Neue find the ones that suit the tone of your Condensed are Regular, and Condensed Bold, document. included with Adobe Condensed are Regular, and Light are Creative Suite 4. included with Microsoft included with Apple About Fonts Office 2007 and Office Mac OS X 10.6. A font is the entire collection of charac- Mac 2008. ters, , numerals, and of a typeface. Traditionally, a font was the collection of characters of a single size of one typeface. With computers, fonts aren’t size-dependent, and the term is often used to refer to the file that holds the collection of characters. Many of the software packages that we � Franklin Gothic. � and � and install on our computers contain collec- Franklin Gothic Heavy, Bell MT. Bell Gothic Chaparral Pro. tions of fonts that are perfectly suitable Book, and Medium Std Black is included Rockwell Bold is for our documents. Operating systems like Condensed are with Adobe Creative included with Microsoft Microsoft Windows and Apple Mac OS, included with Microsoft Suite 4. Bell MT Office 2007. Chaparral and software suites like Microsoft Office Office 2007 and Office Regular is included Pro Regular is and , contain dozens Mac 2008. with Microsoft Office included with Adobe of fonts. Check out the fonts you already 2007. Creative Suite 4. have installed on your computer. Don’t steal fonts. A font file is the cul- mination of a lot of hard work by a type designer. Fonts are intellectual property, so don’t borrow or steal them. Be careful when downloading free fonts. Although there are many cool- � Gill Sans MT and � M yriad Pro and � B odini and Calibri. looking freebie fonts available online, Adobe Garamond Adobe Caslon Pro. Bodini MT Bold is many of them contain only the basic char- Pro. Gill Sans MT Myriad Pro Semibold included with Microsoft acter sets and may not contain all the mea- Regular is included and Adobe Caslon Pro Office 2007. Calibri surements required for proper kerning. with Microsoft Office are included with Regular is included Additionally, installing a corrupt font file 2007 and Office Mac Adobe Creative with Microsoft Office can cause your software applications or 2008. Adobe Suite 4. 2007 and Office Mac operating system to crash. If you’re run- Garamond Pro 2008. ning Mac OS X, you can use the Font Book Regular is included utility to verify that your font files are not with Adobe Creative corrupt. If you’re running Windows, there Suite 4. are several commercial font-management utilities you can buy. If you can, use OpenType fonts. Open- Type is the latest standard developed by Adobe and Microsoft. OpenType fonts are � Constantia and � Copperplate � F utura and Adobe cross-platform (meaning a single font file Verdana. Constantia Gothic and . Garamond Pro. will work on all major operating systems), Bold is included with Medium is contain vastly expanded character sets, and Microsoft Office 2007 Bold is included with included with Apple contain such advanced typographic fea- and Office Mac 2008. Microsoft Office 2007. Mac OS X 10.6. tures as old-style numbering, real fractions, Verdana Regular is Georgia Regular is Adobe Garamond Pro real , and additional ligatures. If included with Microsoft included with Microsoft Regular is included you can’t find an OpenType font that suits Windows 7 and Apple Windows 7 and Apple with Adobe Creative you, use a TrueType font instead. Mac OS X 10.6. Mac OS X 10.6. Suite 4.

March 2010 15 visual design

Choosing Type Combinations the greatest contrast to the paper or are used (e.g., a sans serif heading with Selecting the perfect typeface for the background is the typeface that you a serif body type). When combining occasion can be a tedious task. Selecting use for key pieces of information. typefaces, choose two typefaces that are a combination of two or three typefaces The reader’s eye will drift to the part sufficiently different. The easiest way to that suit the occasion and work well to- of the page with the greatest contrast, do this is to choose two different styles gether can be downright frustrating. so use that typeface for the most vital of type. There are several type families that information. Conflict between typefaces occurs are diverse enough that you could use when two typefaces of the same style one family and still have enough con- These guidelines can be more readily are used—this needs to be avoided. For trast to make your documents stand summed up in three words: concordance, example, you would never use two Old out. Three reliable standbys include contrast, and conflict. Style typefaces together because they Gill Sans, Helvetica, and Myriad; I know are not sufficiently different to provide I can always use them when I am in a Concordance, Contrast, and Conflict contrast, nor are they similar enough pinch. The best part about sticking to You can achieve a concordant look for a concordant look. Your readers’ one type family is that the x-heights and by using one type family throughout eyes will stop dead in their tracks, and the length of ascenders and descenders your document. The concordant look they will scratch their heads as they try will match nicely. doesn’t generally provide a lot of con- to figure out if you accidentally selected Let’s say that you want to make your trast since it relies only on the different the wrong font. document “pop” with a wider variety weights (e.g., Roman, bold, and italic) Outside of that general advice, I can than one type family can offer. You’ll to differentiate between the headings suggest a few typeface combinations need to find an appropriate combina- and body type. Some type families, how- using fonts from such readily available tion of typefaces. There’s no science to ever, have wide varieties of weights from resources as Microsoft Office, Microsoft this, so you’ll need to learn to trust your thin to semibold, to black or ultrabold. Windows, Adobe Creative Suite, and Mac eyes. Here are a few helpful tips: Within these type families, you can pres- OS X. Refer to the figures on page 15 for • Choose typefaces that have similar ent your documents with sufficient con- suggested combinations. Have some fun x-heights and similar lengths of as- trast without risking glaring conflict in and learn to trust your eyes when you’re cenders and descenders. Typefaces your type. designing your documents. with higher x-heights look denser on Contrast is probably the most widely the page than typefaces with small used type combination in technical Conclusion x-heights. Similarly, typefaces with communication. Contrast is where type- Great typography and document de- shorter ascenders and descenders will faces from drastically different families sign will not make up for lousy content. look squatty next to a typeface with � Concordance. A concordant look is created Ensure that your document is structured taller ascenders and descenders. by using different weights within the same type and well written. • Choose typefaces that provide enough fa�mily Concordanc. The typefacese. A concordantused are Myr lookiad is Pro created Bold After your content is up to snuff, in- contrast to each other to provide the Semieby usingxtended different and weights Myriad within Pro Regular the same. type vest some time planning which typefac- family. The typefaces used are Myriad Pro Bold reader with visual cues with which to es will suit the tone of your documents Semie Concordancxtended ande. A Myr concordantiad Pro Regular look is. created navigate your document. This is not � (e.g., your résumé and cover letter are by using different weights within the same type a complete contradiction of the first family. The typefaces used are Myriad Pro Bold sales pieces first and foremost). Use tip. Your typefaces should be similar Semiextended and Myriad Pro Regular. the same typefaces and similar design enough that they look like they be- elements throughout your documents. long in the same document but pro- Choose typefaces that represent your vide enough contrast that the reader company’s identity and use typography can easily spot headings. If your two to build your brand. Using typefaces � Contrast. Contrast is created by using typefaces look too similar, their slight typefaces from different type styles. The across all communications you have differences may look like you chose typef� Contrast.aces used Contrast are Roc iskwell created Regular by using and with your readers will show that you the wrong font by mistake. Often, Chaparraltypefaces fromPro Regular different. type styles. The have a conscientious eye for detail and writers use a serif/sans serif combina- typefaces used are Rockwell Regular and a well-developed design acumen. Chaparral Pro Regular. tion to provide sufficient contrast. � Contrast. Contrast is created by using • Choose a typeface for the body text typefaces from different type styles. The Michael Opsteegh ([email protected]) typefaces used are Rockwell Regular and first. Since this is the text with which Chaparral Pro Regular. has been an STC member for seven years and the reader has the most interaction, served as the newsletter editor for Orange this type should be the most legible. County STC’s TechniScribe from 2007 Don’t choose a body type with dimin- to 2009. He has written policies and proce- � Conflict. Conflict occurs when similar ished legibility because it fits well with typefaces are used, reducing the contrast but not dures in the financial services industry and your heading type. pro� Cvidingonflic concordancet. Conflict occurs. The whentypefaces similar used are currently writes software documentation for • Ensure that the typeface that provides Didottypefaces Regular are used,and Bodoni reducing MT the Regular contrast. but not Eyefinity/OfficeMate in Irvine, California. providing concordance. The typefaces used are Regular and Bodoni MT Regular. � Conflict. Conflict occurs when similar 16 typefaces are used, reducing the contrast but not March 2010 providing concordance. The typefaces used are Didot Regular and Bodoni MT Regular.