Presented by Michael Opsteegh 2011 Technical Communication Summit Sacramento, California
Ten Ways to Improve Your Typography Know the Anatomy Understanding a few fundamentals is essential to understanding how type works. You don’t have to memorize the nomenclature, but notice how many parts make up the letters in the Latin alphabet. Pay close attention to the x-height, the height of ascenders, and the depth of descenders.
Typefaces are measured in points, but different typefaces set at the same points may appear to be different sizes. This is because, while type is measured roughly from the top of the ascenders to the bottom of the descenders, x-height determines the optical size of the type.
You’ll need to consider x-height when choosing and combining typefaces.
Determine Your Ethos Before you can begin to select a typeface or combination of typefaces, you must determine the tenor of the communication, your identity, or the identity of your company. Typefaces are evocative, so you need to decide on the tone that the type conveys or the emotion that your type is going to engender in the reader. If want to appear neutral, try Helvetica. If you want to evoke quality, try Trajan. If you want to appear strong, try Rockwell. It is difficult to choose a typeface that evokes the right mood; because type is imbued with ineffable qualities that make one typeface evoke formality and another evoke whimsy.
There are, perhaps, hundreds of thousands of computerized typefaces to choose from. All of these typefaces can be a bit overwhelming, especially to the untrained eye. Fortunately, you can categorize most typefaces into one of nine groups. Granted, some typefaces will never easily fit into one category or another.
Like fashion, type styles have changed over time. Most type styles are derived from the time or place in which they were developed and gained popularity. Having said that, many typefaces that fit within a certain style may have been created outside of the time or place of origin typically associated with that type style. James Craig’s Designing with Putting Your Best Font Forward • 1
Type categorizes typefaces into the following five type styles:
• Old Style. Old Style type is very legible, has minimal contrast between thick and thin lines, rounded brackets where the stokes and serifs meet, and a diagonal stress. The line through the thinnest parts of the O in the figure on the next page shows the diagonal stress. (France 1600s.)
ascender
ascender height cap height
x-height
baseline
descender line serif
descender
The basic anatomy of type. Understanding a few fundamentals is essential to understanding how type works. Pay close attention to the x-height, the height of ascenders, and the depth of descenders. The typeface used is Adobe Minion Pro.
• Transitional. Transitional type bridged the Old Style and Modern typefaces and had more refined serifs, greater contrast between thick and thin strokes, and moderately diagonal stress. (England 1700s.) • Modern. Modern type has even more contrast between thick and thin strokes, squared brackets where strokes and serifs meet, and vertical stress. (Italy 1700s.)
ascender height
font size descender line
Type measurement. The font size is measured
• Slab Serif (Egyptian). Slab Serifs are characterized by very thick serifs, little or no bracketing, and little or no stress. (United States 1800s.)
from just above the top of the ascenders to just below the bottom of the descenders. The typeface used is Adobe Garamond Pro.
• Sans Serif. Sans Serif typefaces do not have serifs and typically do not have any stress. (Switzerland 1900s.)
Additional type categories include the following:
• Humanist. Humanist faces are influenced by 15th century Italian calligraphic writings and are typically marked by soft angles and subtle contrast between thicks and thins.
• Script. Script typefaces are designed to mimic handwriting and calligraphy. • Decorative. Decorative typefaces are designed to add splash to your documents, but should be used sparingly. Outside of bullet characters, decorative type probably has no place in your technical documents.
• Blackletter. Currently, blackletter typefaces are reserved for liturgical works, diplomas, or newspaper mastheads. While an American would find Blackletter type difficult to read, it was the first moveable type and was widely used in Germany for hundreds
2 • Putting Your Best Font Forward
x-height Helvetica
Times New Roman
Verdana
X-height varies from typeface to typeface. X-height has a lot to do with the optical perception of type size. Since x-height can vary dramatically from font to font, different typefaces set at the same number of points may appear to be set at different sizes.
Garamond
Baskerville
Bodoni
Rockwell
of years, but fell out of favor after the Nazi party used it in propaganda.
Typeface styles are 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 on their associated mood and tone and find the ones that suit the tone of your documents. Understanding the classifications of type styles can help you hone in on those ineffable qualities that make one typeface evoke strength and security and another evoke innovation and leadership.
Choose Your Body Type First Helvetica
Gill Sans
Swing
Jokerman Old English Text Understanding the categories of type can help you mix and match. Typefaces are like sign posts from the time in which they were created. The guides overlaid on a few of the typefaces above point out differences in vertical stress and bracketing between different categories..
Since the reader has the most interaction with the body type, this type should be the most legible. Don’t choose a body type with diminished legibility because it fits well with your heading type; instead, choose a heading type that goes well with your body type
Limit the Variety of Type Limit yourself to one to four fonts in a document, depending on the complexity of the information that you are trying to convey. Often, you will find that there is not enough variety within one or two typefaces to provide sufficient contrast between disparate pieces of information. For example, you may want to use one face for headings, one for body text, one for captions, and one for sample code. There probably isn’t, however, enough disparity in your résumé to necessitate using more than two typefaces.
There are many pitfalls to using too many typefaces. The more typefaces you use, the harder it is to choose complementary typefaces that provide enough contrast to make the structure of the information apparent, but similar enough that they look like they belong together. Using too many typefaces can cause your document to resemble a flea market.
Let that Text Breathe The space around letters and words is as important, if not more important, than the shapes of the letters themselves. Just as the most legible type doesn’t call attention Putting Your Best Font Forward • 3
to itself, the best use of space is inconspicuous. Space is of the utmost importance because readers don’t read words letter-byletter, but rather recognize word shapes. If your letters, words, or lines are set too closely together, the reader will have difficulty scanning your text and may give up if it’s too troublesome.
Poor spacing can also inadvertently cause your reader to misunderstand your text. Graphic designer, Nigel French, relates an amusing anecdote about type with inappropriate spacing in his book, InDesign Type. When he was a boy, he saw the sign for a new video store called FLICKERS. The sign was set in all caps, and the letters were spaced so closely together that, from far off, the L and the I looked like a U. While the video store owner may have done this intentionally, you don’t want the type in your documents to inadvertently mislead your reader in this way.
Leading Leading is the space between lines of type. Technically, leading is measured from baseline to baseline. The default leading is approximately 120 percent of the point size of the type. For example, 12-point type would be set with a leading of 14.4 points (written as 12/14.4). The default isn’t always appropriate because in addition to type size, you must also consider x-height and line length. I can’t offer a formula for determining the amount of line spacing required for comfortable reading; it’s a matter of aesthetics. As you consider the proper line spacing, Alex White suggests that you take the following factors into account in his book, Thinking in Type: • Font Size. Normal text of 10 to 12 points is generally set with one to two points of line spacing. Smaller fonts require more line spacing to be legible. Likewise, large heading or display type will likely require less leading in proportion to the text size. • X-Height. X-height is the distance between the baseline and median of lowercase letters. The larger the x-height, the more leading is required because the reader needs more space to recognize the word shapes.
• Line Length. Longer lines of text require more line space to prevent the 4 • Putting Your Best Font Forward
Word shapes play an important role in how we read. Notice that text set in all caps is difficult to read because all the word shapes are the same. It is important that you give your text plenty of space for your readers’ eyes to recognize the word shapes. The typeface used is Baskerville Regular.
We the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general welfare, and secure the blessings of liberty to ourselves and our posterity, do ordain and establish this Constitution for the United States of America.
Chaparral Pro 8/11
We the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general Chaparral Pro 12/14.4
Leading and type size. Almost contrary to intuition, smaller type sizes need more leading in relation to their size. Pictured here, 8-point type is set with 11 points of leading, whereas type set at 12 points has only 14.4 points of leading.
We the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general welfare, and secure the blessings of liberty to Adobe Garamond Pro 10/12
We the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote Verdana 10/14
Leading and x-height. Typefaces with a larger x-height require more leading relative to the type size.
We the people of the United States
We the people of the United States
Franklin Gothic 30/32
Franklin Gothic 30/25
Leading and all caps. Type set at larger sizes needs less leading relative to its size. Additionally, type set in all caps does not need as much leading because there are no descenders that will collide with the tops of the letters on the line below..
unkerned type
eye from reading the same line twice. Lines of 75 characters or more should be double-spaced. Keep your body text between 35 and 70 characters for easy reading.
Depending on your software, leading may be presented differently. For example, InDesign and FrameMaker display leading in terms of total line height (e.g., 12 points or 13.5 points). Microsoft Word displays leading in multiples of the font size (e.g., single line spacing is 1.2 times the font size).
Kerning Kerning is the space between two characters. Depending on the shapes of the characters, if they look like puzzle pieces that fit together, they may need to be scooched closer together to create a more even text color. By text color, I mean the gray that body text creates on the page when glanced at from afar. Glaring white spaces between characters can distract the reader. Kerning evens out those white spaces. Imagine that you are pouring water of a word, and you want to pour the same amount between each character.
Most software programs can leverage the kerning metrics that are built into fonts; however, not all fonts contain sufficient kerning information and require manual adjustments. Proper kerning is a tedious task, so you may want to focus any manual adjustments on heading or key text.
Kerning isn’t enabled by default in Microsoft Word. To kern text in Word, open the Font dialog box and click the Kerning check box on the Character Spacing tab.
kerned type
Kerned type. Kerning is the adjustment of space between two letters. Kerning is intended to make the space between letters even. In the example below, the first instance in not kerned while the second is. Notice the T and the Y fit more closely together in the kerned type. The typeface used is Adobe Caslon.
Remember the Principles of Design The principles that apply to graphic design also apply to typography. Keep in mind that headings and body text should provide sufficient contrast, typographic elements should provide sufficient repetition to aid the reader’s ability to quickly navigate your text, your text should be aligned with other elements of the page, and elements of type that belong together should be in relatively close proximity when compared to elements that don’t belong together. For a thorough rundown Putting Your Best Font Forward • 5
on contrast, repetition, alignment, and proximity, refer to Robin Williams’ The Non-Designer’s Design Book, which should occupy a prominent place in every technical communicator’s library.
Use Color Color is a great way to add structure to your information and contrast to your type without the hassle of managing multiple typefaces. Use color to set apart headings of various levels, hyperlinks, or sample data entry. Most companies have a color palette that you can use as the basis for your color choices.
If you are left up to your own devices, and, like me, you haven’t studied color theory, you can use a tool like Adobe Kuler (kuler. adobe.com) to browse crowd-sourced color palettes or develop your own color palettes. Adobe Kuler is a free, online tool that allows you to develop color palettes based on a series of controls and algorithms, which doesn’t sound very sexy, but is extremely user friendly. You can also upload photos or art, and Kuler will automatically detect and create a palette based on the colors in the photo. This is especially helpful if you want to create a newsletter or magazine article that centers around a photograph.
Use Open Type Fonts If you can, use OpenType fonts. OpenType is the latest standard developed by Adobe and Microsoft. OpenType fonts are cross-platform (meaning a single font file will work on all major operating systems), contain vastly expanded character sets, and contain such advanced typographic features as old-style numbering, real fractions, real small caps, and more ligatures. If you can’t find an OpenType font that suits you, use a TrueType font instead. Many of the software packages that we install on our computers contain collections of fonts that are perfectly suitable for your documents. Such operating systems as Microsoft Windows and Apple Mac OS, as well as such software suites as Microsoft Office and Adobe Creative Suite, contain dozens of fonts. Check out the fonts you already have installed on your computer.
6 • Putting Your Best Font Forward
Visiting
Maui
L
orem ipsum dolor sit amet, consectetur adipiscing elit. Proin ipsum justo, tempus ut varius id, congue vel tortor. Nunc tellus eros, tincidunt quis ullamcorper sit amet, sodales sed neque. Morbi et sem lorem. Ut tempus blandit dui id aliquam. Donec a tellus tortor, ac pretium tellus. Aliquam sit amet tellus lacus, pharetra adipiscing felis. Etiam scelerisque aliquet egestas.
Curabitur Sed Neque in Augue
Curabitur cursus rutrum lectus. Nunc dui augue, euismod vel fermentum quis, sagittis eu libero. Mauris ut ante id sapien facilisis lobortis. Mauris vulputate ligula et erat ullamcorper gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sagittis posuere dui, non lobortis enim cursus vel. Phasellus sit amet sapien sit amet orci sodales vehicula at vitae orci. Ut eget lorem est, semper pharetra purus. Donec rhoncus vulputate eros, vel egestas nisi ornare ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in mauris vitae augue commodo vestibulum nec et metus. Fusce blandit mauris in enim ornare suscipit eget a turpis. Phasel-
lus tempor tortor at elit volutpat feugiat. Vestibulum sed tellus tellus. Suspendisse laoreet ligula eget mi sagittis quis egestas augue tristique.
Proin Quis Mi Nec Justo
Tempor dictum. Cras bibendum venenatis sem, vitae convallis quam feugiat at. Cras semper mattis eleifend. Etiam a sapien elit, sit amet tempus dolor. Etiam laoreet erat quis sem luctus gravida. Pellentesque dapibus rhoncus leo a sodales. Donec interdum sollicitudin arcu at consectetur. Aliquam faucibus ultrices vestibulum. Proin vehicula, mi quis consectetur sus-
turpis, congue nec vehicula a, porttitor ac nulla. Fusce tristique congue dapibus. Ut eleifend ultrices pharetra. Nulla posuere, metus vitae vulputate porttitor, mauris nibh commodo dolor, id vestibulum justo erat ut arcu. Vestibulum mollis varius tincidunt. Maecenas lacinia magna in mi pulvinar molestie. Nullam aliquam consequat lacinia. Donec a metus sapien, id tincidunt lacus. Pellentesque eu molestie risus. Vestibulum ut enim eleifend ante rhoncus interdum. Cras pharetra auctor ipsum, sed sollicitudin dolor porta nec. In sed nunc quam. Curabitur sed nunc auctor elit sagittis placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tempor, mauris ac porttitor sodales, orci nulla tristique erat, nec feugiat ligula orci nec velit. Pellentesque eu imperdiet risus. Pellentesque id sagittis libero. Mauris ac odio tortor. Phasellus ultrices pretium enim ut euismod. Morbi suscipit adipiscing lectus, at auctor justo tempor vel. Maecenas non risus nec lacus varius adipiscing ultricies at ante. Curabitur sed neque in augue vulputate tempor nec vel velit. Sed sed massa nisl. Aenean et
Color new life to your type. Tools cipit, augue nibhcan lacinia bring ante, in bibendum eros sapien imperdiet arcu. Morbi
like Adobe Kuler can create a color palette from a rhoncus porta tortor, et fermentum lorem venenatis id. Aliquam accumsan, tortor id photo, which you can then apply to your type. luctus venenatis, risus lacus mollis risus, non laoreet orci quam ut risus. Phasellus non turpis id justo posuere scelerisque id vitae felis. Nunc laoreet luctus nisl, nec sodales mauris ultrices at. Vestibulum et nisi nec turpis vestibulum volutpat eget eget massa. Praesent sollicitudin interdum congue. Phasellus sit amet est at massa pretium ullamcorper. Sed nunc
ABCXYZ
abcxyz
Real small caps
0123456789
0123456789
Tabular and old-style numbering
(800) 555-2121 (800) 555-2121 Glyph shifting
ff
ffi
ffl
1/2
2/3
3/4
2nd
3rd
Ligatures
fj
Th
Fractions
1st Ordinals
OpenType fonts. OpenType fonts contain expanded character sets that include old-style numbering, ligatures, real fractions and small caps, and much more.
9
:
;
<
=
R k ƒ
>
?
@ A
B
C
S
T
U
V W X
Y
Z
[
\
l
m
n
o
p
q
r
s
t
u
§
¤
'
“
«
‹
›
–
†
‡
D
E
F
G H
I
J
K
]
^
v
w
·
L
M N
O
_
‘
a
b
c
x
y
z
{
|
d
e
f
g
h
}
~
¡
¢
£
¶
•
‚
„
”
»
… ‰
¿
`
´
P i ⁄ ˆ
¯
˘
˙
¨
˚
¸
˝
˛
ˇ
— Æ
ª
Ł
Ø Œ
º
æ
ı
ł
ø
œ
ß
¬
µ
Ð
½
±
Þ
¼
÷
¦
°
þ
¾
−
ð
×
Á
Â
Ä
À
Å
Ã
Ç
É
Ê
È
Í
Î
Ï
Ì
Ñ
Ó Ô Ö Ò Õ
Š
Ú Û Ü Ù
Ý
Ÿ
Ž
á
â
ä
à
å
ç
é
ê
ë
è
í
î
ô
ö
ú
û
ü
ù
ý
ÿ
ž
‥
ï
ì
ñ
® ó
ò
© õ
š
OpenType character sets. OpenType fonts can contain many time more characters than other font formats. Open an OTF file on your computer to view the repertoire. ◆
■
❒
✓
☐
☑
≤
≥
≈
≠
∞
◊
∫
∂
∏
√
∑
∆
Ω
ℓ
Ă
Ā
Ą
Ǻ
Don’t steal fonts. A font file is the culmination of a lot of hard work by a type designer. Fonts are intellectual property, so don’t borrow or steal fonts; you don’t want any bad juju associated with your documents, anyway.
Be careful when downloading free fonts. Although there are many cool-looking fonts available through such web sites as dafont.com, many of these freebies contain only the basic character sets and may not contain all the measurements required for proper kerning.
Additionally, installing a corrupt font file can cause your software applications or operating system to crash. If you’re running Mac OS X, you can use the Font Book utility to verify that your font files are not corrupt. If you’re running Windows XP or Windows Vista, there are several commercial font-management utilities you can buy. To avoid substandard fonts, purchase your fonts from such reputable dealers as Adobe, FontShop, or Linotype.
Combine Typefaces Like a Pro Selecting the perfect typeface for the occasion can be a tedious and unbearable task. Selecting a combination of two or three typefaces that suit the occasion and work well together can be downright frustrating, causing ulcers, loss of sleep, painful headaches, and colorful language.
ě
Single Typeface, Variety of Weights
The Adventure of the Blue Carbuncle I had called upon my friend Sherlock Holmes upon the second morning after Christmas, with the intention of wishing him the compliments of the season. He was lounging upon the sofa in a purple dressing-gown, a pipe-rack within his reach upon the
Single typeface, variety of weights. The fonts used are Franklin Gothic Demi and Franklin Gothic Book.
There are several type families that are diverse enough that you could use one family and still have enough contrast to make your documents stand out. Two reliable standbys include Gill Sans and Myriad—I know I can always use them when I am in a pinch. The Helvetica type family, too, can be used with an ample degree of contrast by mixing Helvetica Light and Helvetica Black. The best part about sticking to one type family is that you’re guaranteed that the x-heights and the length of ascenders and descenders will match.
Putting Your Best Font Forward • 7
Complementary Widths and -heights X No only do typefaces have to provide enough contrast to enable the reader to discern headings from body text, but they also have to look like they belong together, like they belong on the same page. Finding typefaces, like Myriad and Minion, that have similar widths and x-heights will not only convey a sense of cohesion, but the readers’ eyes will have no trouble moving from one font to the next.
Extended Font Families
The Adventure of the Blue Carbuncle I had called upon my friend Sherlock Holmes upon the second morning after Christmas, with the intention of wishing him the compliments of the season. He was lounging upon the sofa in a purple dressing-gown, a pipe-rack within his reach upon the
Complementary widths and x-heights. The fonts used are Myriad Pro Semibold and Minion Pro.
The Adventure of the Blue Carbuncle I had called upon my friend Sherlock Holmes upon the second morning after Christmas, with the intention of wishing him the compliments of the season. He was lounging upon the sofa in a purple dressing-gown, a pipe-rack
Some type families, like Lucida and Droid are designed with serif and sans serif versions of the typeface. Combining typefaces from extended font families ensures that your fonts have complementary widths and x-heights.
Extended font families. The fonts used are
Typefaces from the Same Designer
The Adventure of the Blue Carbuncle
Typefaces like Gill Sans and Perpetua, which were both designed by Eric Gill, complement each other. In theory, two typefaces designed by the same hand with have similar geometry.
Learn to Trust Your Eyes Learn to trust your eyes. Typography, like all forms of art, is subjective. Typography has its set of rules and customs, but you can break those rules to achieve a particular effect or arrest your reader’s attention. Use the principles outlined in this paper and look at magazines and books to help train your eyes to be more sensitive to typography.
8 • Putting Your Best Font Forward
Lucida Grande Bold and Lucida Bright.
I had called upon my friend Sherlock Holmes upon the second morning after Christmas, with the intention of wishing him the compliments of the season. He was lounging upon the sofa in a purple dressing-gown, a pipe-rack within his reach upon the right, and a pile of crumpled
Typefaces from the same designer. The fonts used are Gill Sans and Perpetua.