2. In This Chapter, you’ll learn on:
The Hierarchy of Typography
The Difference between a Type and a Font
Compare the Various Font Formats such as
o Bitmap Fonts
o TrueType Fonts
Identify the decorative, serif and sans-serif fonts
Identify some commonly used typefaces
Compare the characteristics and the use of various
typefaces
Choosing and Using Appropriate Type
Tools for Emphasis, Contrast and Legibility
3. The Hierarchy of Typography
Words are communication. What do they say? The
meaning should come before the look of the type is
considered.
Remember: The primary task of graphic design is to
create a strong, consistent visual hierarchy, where
important elements are emphasized, and content is
organized logically and predictably.
Therefore, choose typographic styles and sizes that are
appropriate to the meaning and will serve the text's
relative importance in the hierarchy.
4. From the top down: Places in the hierarchy
Headlines: Headlines work best when they're both visually and
verbally interesting. The largest type on the page, heads
should always stand out from subheads and body copy.,
although they don't have to be located at the top.
Subheads: Engage the users into reading more, by expanding
and explaining the basic idea of the headline. Distinguish from
heads and copy.
Body text: Make sure it's both legible and inviting.
Captions: Connect readers to pictures and story. Often a bit
larger than body text. Be consistent.
Pull quotes and other breakouts: Add interest. Be creative.
5. The Difference between a Type and Font
To begin with, it’s important to understand the difference
between a typeface and a font. As mentioned in the
previous chapter, a typeface is the term for the design
of a set of characters. Typefaces can come in a number
of typestyles, such as bold, narrow or light. Font refers to
the character set in its physical form – metal type or
digital type files, for example. On your computer, a font
consists of a set of typeface in a particular typestyle
stored in a file.
Font Types
There are several font types: TrueType, Bitmap [PostScript
Type 1], Multiple Master and Open Type are a few
examples. For now, you just need to concentrate on the
TrueType and Bitmap fonts. The most widely used and
the safest for rasterizing is Bitmap font [Postscript Type 1].
6. Bitmap Fonts [Postscript Type 1]
Bitmap font is also known as the PostScript Type 1.
PostScript Type 1 font for Macintosh actually consists
of two fonts: a screen font and a printer font. The
screen font is used when the typeface is displayed
on the screen and the printer font when the
typeface is printed.
Screen fonts are not necessary when working in
Windows because the printer font is used for both
screen and printing.
7. The screen font is a set of characters saved as bit-
mapped fonts: small, pixel-based images used to
display the typeface on the screen
The screen font also contains information needed
to link it to the printer font for printing. In other
words, if you choose a bold font from the screen
font menu in a program, it will link to a bold printer
font when printing. This also means that if you do
not have the bold version of that printer font
installed, you will get an undesired result as a
printout – the thin version of the font you selected
will most likely be used instead.
8. Screen fonts are usually stored in a few smaller sizes (10,
12, 14, 16, 18 and 24 points, for example). If you enlarge
these pixel-based characters to a bigger size than any of
the stored screen fonts, the edges will appear jagged.
This can be avoided by using the ATM utility*. The printer
fonts are structured with bezier curves* and consist of
PostScript information. See Figure 1.
Postscript Type 1 fonts
consist of two parts, one
object-based printer font and
a second pixel-based screen
font. By using ATM, you can
use the printer font as a
screen font.
9. TrueType
TrueType fonts consist of one single font file completely
based on bezier curves. TrueType does not have
separate screen fonts like PostScript Type 1.
This type of font is supported by the Macintosh graphic
system. Therefore, ATM is not required to create
characters on the screen. Unfortunately, TrueType tends
to cause problems when rasterizing. As a result,
PostScript Type 1 fonts are primarily used in graphic
production. TrueType fonts are most commonly used in
Windows.
10. ATM utility
Adobe Type Manager, or ATM, is utility software from
Adobe, used primarily to improve the screen display of
large letters.
It also facilitates the printout of PostScript typefaces on
non-PostScript based printing units.
ATM is more or less a requirement for doing graphic
production work on Macintosh systems.
ATM enables a user to use PostScript Type 1 printer fonts
as screen fonts on a Macintosh, which means that
characters on the screen maintain their correct
appearance even when greatly enlarged.
11. ATM also makes it possible to convert characters to
character outlines which can be modified in
PostScript based programs like Adobe Illustrator and
Macromedia Freehand.
Even with ATM installed, however, you will need to
use screen fonts. For example, without screen fonts,
the computer cannot locate the corresponding
printer fonts.
In addition, bit-mapped characters generated by
screen font files look better on the screen in smaller
sizes than the corresponding characters generated
by ATM.
12. Bezier Curves
All characters in printer fonts are created using bezier
curves. As a result, printer fonts are not dependent upon
the resolution of the printer and can be enlarged without
taking on a jagged appearance. Printer fonts are not
stored in any fixed size (10 point, 12 point, etc.) and can
be scaled up or down as necessary [See Figure 2].
The Decorative, Serif, Sans-Serif Fonts, its commonly used
Typefaces and its uses and characteristics
Bezier Curves
This is how a Bezier curve is created. A
number of anchor points determine the shape
of the curve. Object graphics are mainly based
on bezier curves.
13. Serif Fonts
Serif fonts are marked by little 'feet' that extend from
the stem of the letter. All fonts were Roman (serif)
until the 20th century. Serifs say tradition, elegance,
and formal. Serifs enable reading of large blocks of
printed text; hence most books, magazines, etc. use
it for body text. Types of serif fonts:
Old Style
o With some of the earliest fonts, the serifs flow out in simple,
graceful curves.
o Examples: Caslon, Caxton, Garamond, Goudy, Oldstyle,
Palatino, Early Roman.
14. Transitional
o Smaller curves connect the serifs. Examples: Baskerville,
Century, Tiffany, Times.
Modern
o The stems are thick and the serifs thin, contrasting with
each other. Example: Bodoni.
Egyptian
o Slab Serifs. Thick. Think Circus, Westerns. Examples:
Clarenden, Lubalin, Memphis.
15. Sans-Serif Fonts
For sans-serif fonts, they are no 'feet'. Clean, simple
lines, less traditional looking. Hugely popular in the
mid-century Swiss design movement. Examples:
Helvetica, Univers, Futura, Avant Garde. Gill Sans.
Studies show that reading on-screen is easier with
sans-serif typefaces. So designers have been
charged with creating new, easy to read styles for
Web use: Verdana, Arial, and Trebuchet are a few.
16. Display/Decorative
Script Calligraphic (think Wedding invitations),
rounded hand (think cursive, with connected
letters), and brush (Think brush painting). Examples:
Brush, Zapf Chancery, Commercial Script.
Decorative. This category includes everything from
historical styles such as Art nouveau and Art Deco
to high tech to wacko and fun to creepy. Choose
with caution. Examples: Balloon, Klang, Lithos.
18. Choosing and Using Appropriate Type
Every font has a character, or tone, which
communicates on a visual level.
Once you are clear on the tone of the message, look for
fonts that communicate the same qualities: Is it light,
serious, wry, nostalgic, upbeat, spiritual, technical, and
fun?
There are so many fonts available, but few are good,
well-designed fonts.
Use fonts from established type houses such as Bitstream
and Adobe. Although they are expensive, these fonts
should read well in all sizes and uses, with good
letterspacing.
19. Avoid so-called free fonts you can get from the Internet. Most
are terribly gimmicky. Plus, you'll probably have to spend extra
time trying to make the spacing between the letters look right.
It’s the qualities type
suggest
20. Font Families
Most serif and san serif fonts come with variations of
weight (boldness), width (condensed or extended) and
italics.
Consistent, clean type is often achieved by staying
within a family, especially one with a lot of variants such
as Univers.
The Rule of Two. As a general rule of thumb: for unity and
clarity, use no more than two font families in a project.
Exploit the variations to establish the hierarchy.
22. What’s Appropriate?
You don't have to choose an obvious font, such as a flowery
script for a perfume ad or a blocky san serif for auto parts.
The important thing is to serve the values that the text stands
for.
Tools for Emphasis, Contrast and Legibility
Which looks
best to you?
23. Text Formatting Choices
These variables are the key to differentiating the
levels of typographic hierarchy. They work pretty
much the same for print or web design. Just
remember to use consistent formatting at each
level, e.g., all subheads should look the same, all
body copy the same, etc.
Size: The larger the type the more it jumps out (but if
body text is too large it looks like it's intended for the
blind).
Weight: Use light against bold for emphasis.
24. Alignment: (Flush left, rag right): Remember that in
the West, we read from left to right, so our eyes
prefer a hard edge along the left side. Most body
copy these days is set flush left.
Alignment: Centered: Don't center body copy or
much text at all. Great for big, bold headlines.
Alignment: (Flush right, ragged left): Use only in rare
circumstances. Reader's eyes have a hard time
finding the next line.
25. Alignment: Justified, or force justified: Pushes type to
both edges of margin. Makes nice, straight
columns, but there's a tradeoff: uneven letter
spacing that can create rivers of white space,
especially if the column width is narrow.
Case: ALL CAPS IS HARD TO READ IN LARGE DOSES
but grabs attention with its authority. Lower case
connotes friendly, low stress, easy text.
Leading: The space between lines. Open it up to
invite busy readers into your text. With too much
leading, our eyes have to leap from line to line.
26. Space: Use air around words for emphasis, to set them
of, especially if they're bold. Keep spacing consistent,
such as the amount of added "air" between chunks of
text.
Text width: Legibility studies show that the ideal column
width is about 36 characters, or 1-1/2 times the
alphabet. Small amounts of text can be placed in
narrower columns.
Indents: Use indents to set off a subhead/category by
leaving extra space to the left and/or right margin of the
text below.
Tracking is the process of loosening or tightening the
spacing between the characters in a selected text or
entire block of text.
