Wednesday, February 25, 2009

Typographical Rules

Your Type Must Always Be Perfect. No Exceptions.Typography communicates. Yet typesetting is often poorly done. It is
absolutely essential that, as a designer, you start setting type in a
professional manner. Attention must be paid to all the typography you
produce. No matter where it is or what it’s for. Period.

About Typos

You should always double, triple and quadruple your work for any small typographic, grammatical, or spelling errors.

Why?
Think about it. As an engineer, if you're tasked to design a fix for a
faulty bridge, you need to instill confidence in your client and the
public that you're up to the task. Making a simple math-error on the
initial proposal does nothing to instill this confidence--and will
likely strike you from the list of finalists. How can I trust a bridge
design to an engineer who can't do simple math (or who can't double
check their figures)?

Or even more simply:

  • How can you trust a car mechanic who drives a stuttering car?
  • How can you trust an obese personal trainer?
  • How can you trust an environmentalist who drives a Hummer?

Apply this to design:

  • How can I trust the future of my brand to someone who can't spell or proof
    his or her work? Or know the difference between hyphens and en-dashes?

Typographic nuances are the “math” of our profession. Complete and flawless
communication is the “CAD-drawing” for the aforementioned bridge
design. While we all make mistakes, we're in the business (here at AAU)
of prepping you for the real world. It is easier to have always used
the proper techniques than it is to try and correct your bad habits at
a later date, so start right, and do it now.

You will be studying typography for as long as you are a student, and probably for
the rest of your career. The variations are enormous, the possibilities
endless. This can be overwhelming for the beginner.

Using Type

Unless otherwise indicated the following excerpts are from an excellent book that is not on your required list. It is called Type Rules: The Designer’s Guide to Professional Typography.
It is written by Ilene Strizver, a typographic consultant, designer and
writer specializing in all aspects of typographic communication, from
the aesthetic to the technical. The information from this easy-to-read
book will give you a good grounding in the way you look at and use
typography to communicate your messages.

Every typeface has a personality, and the ability to convey different
feelings and moods, some more than others. Display typefaces, also
known as headline typefaces, tend to be stronger in personality,
sometimes trading legibility at smaller sizes for more powerful
feelings. They can evoke strength, elegance, agitation, silliness,
friendliness, scariness, and other moods. Text designs, often used for
blocks of copy, are subtler in mood and emphasize legibility and
readability. Their personalities tend to be whispered, rather than
shouted.


Design Goals

The first step in selecting a typeface is identifying goals. To focus your
design goals and subsequently the appropriate typefaces to use, start
by identifying the age, attention span and demographics of your
audience. Different typefaces attract a different audience, both
subliminally and overtly. Children are drawn to easy-to-read, childlike
fonts; seniors to larger settings that have more clarity and
legibility; teens to more edgy, expressive designs.

After you consider your audience, ask yourself how much reading you are
asking them to do, and what information you are expecting them to
absorb. Once you identify your design goals, you will narrow down your
typeface choices considerably.

Legibility and Readability

One often hears type described as being legible or readable.
Although they both relate to the ease and clarity with which one reads
type, each actually refers to two different things: legibility refers
to the actual typeface, while readability refers to typography, or how
the typeface is set.

Legibility

The legibility of a typeface is related to the characteristics inherent in its design including:

  • The size of its counters
  • X-height
  • Character shapes
  • Stroke contrast
  • Serifs or lack thereof
  • Weight

All these factors relate to the ability to distinguish one letter from another.

Readability

Readability is related to how you arrange the type. Factors affecting type’s readability include:

  • Size
  • Leading
  • Line length
  • Alignment
  • Letter spacing
  • Word spacing

It follows that a legible typeface can be made unreadable by how it is
set, while a typeface with poor legibility can be made more readable
with these same considerations.

Text vs. Display Type

There are two main categories of type: text and display.

Text type is designed to be legible and readable at small sizes. This usually
implies fairly clean, consistent, uncomplicated design features; more
open spacing than a display face, and thin strokes that hold up at
smaller sizes. Display type, on the other hand, can forgo the extreme
legibility and readability needed for long blocks of text at small
sizes for a stronger personality, elaborate and more expressive shapes,
or a more stylish look.

Display type is usually above 14 points in size and is used for titles, subtitles,
headlines, and sub-headlines. It is ideal when strong contrast is
needed, or for posters, signs and other designs that need to be seen
from a distance.

The following description and examples are from Working with Style: Traditional and Modern Approaches to Layout and Typography by Suzanne West:

Display type automatically creates contrast and emphasis on the page through
changes in size, shape, capitalization, leading, and kerning . . .
Display type and layout are interdependent. We can begin a layout by
[positioning] display type and then fitting the other elements on the
page; or, we can arrange other elements and then fit the display type
into the remaining space. The procedure we choose will depend on what
the other elements are and whether or not the page is part of a
sequence of pages, as in a book or brochure. If this is the case, a
single strategy must be determined and used consistently.


Type Families

Type families are usually text or text/display families with
corresponding sans, serif, and sometimes informal or script versions.
They usually have the same structure but with different finishing
details, enabling them to work well together.

This is a safe yet effective way to mix typefaces while keeping your job looking clean
and not over-designed. Type families have even more mileage if they are
available with small caps, which give you another option to create
emphasis without jarring the reader and disturbing the flow.


Visual Hierarchy

The Visual Hierarchy of a design is the process of deciding which
elements are the most important and finding a way to suggest that
importance visually. To do this you will need to ask yourself: which
graphic elements support your concept? How you can use them to create a
visual structure from most to least important?

The visual hierarchy of a design is not about the personality or emotional
impact of your work, rather the visual hierarchy is a more technical
term that refers to the importance of information elements within your
design.

A visual hierarchy is an arrangement of elements in a graduated series, from the most prominent
to the least prominent, in an area of typographic space. When
establishing a visual hierarchy, a designer carefully considers the
relative importance of each element in the message, the nature of the
reader, (who the audience is), the environment where the communication
will be seen, and the need to develop a cohesive arrangement of forms
within the typographic space (a layout that puts everything into an
order than can be easily understood).


The study of visual hierarchy is the study of the relationships of each
part to the other parts and the whole. When elements have similar
characteristics, they have equality in the visual hierarchy, but when
they have contrasting characteristics, their differences enable them to
take dominant and subordinate positions in the composition.

You can also think about the visual hierarchy of your design by
imagining you are telling a story. Elements within a “visual narrative”
are arranged in an easily understood order of importance, or a story
for the viewer’s eye to follow. A center of attention attracts the
viewer’s attention, and each subsequent focal point adds to the story.
This logical ordering is known as a visual hierarchy.

It’s especially important to establish good visual hierarchy with type,
unless you communicate very clearly where to start, and where to go
next, the reader will not be able to make sense of the text.

Basic Techniques for Typographic Emphasis

Many typographic techniques have evolved over the years, and vary
from designer to designer and sometimes from country to country. Use
them sparingly at first until you become comfortable. If you place too
many emphasizing techniques in too many places, it will defeat the
purpose of making certain elements stand out from the rest and dilute
the overall effectiveness of your message--making for a visually busy
piece.

Italics (Obliques)

The use of italics is probably the most common form of typographic emphasis and is used in both text and display settings. True-drawn italics are an angled typeface, most commonly designed as a companion to a Roman (straight up and down) design. Obliques are slanted versions of their Roman companion with few or no design changes.

Italics are effectively used for soft emphasis of words or phrases within a
headline or text. They draw the reader’s attention without a
significant change in the color of the text. Italics are also used
instead of quotations for book and magazine titles. Be sure to use the
same weight italic as the Roman you are using and not the next weight
up.

Boldface (or Weight Contrast)

The use of boldface,or a bold version of a lighter weight, is a good way to achieve
emphasis by way of weight contrast. It is best used for subheads,
captions and stand-alone words and phrases. It should be used sparingly
within text and only in particular instances where a strong emphasis is
desired because it creates a somewhat harsh visual interruption in the
color or tone.

Jump at least two weights to create a strong contrast when using boldface from a family of several weights. A
too-small weight contrast at the same point size is at best ineffective
and at worst, amateurish typography.

Selecting the Right Version on Your Computer

Obliques and italics and bold should be accessed from your font menu only. This
means you have to have the appropriate version of the font (bold,
italic etc.). Computer generated italics are digital monstrosities
which must be avoided at all costs. This process distorts character
shapes in a way that degrades the design and metrics of the typeface
and is annoying to the eye. True-drawn italics are usually a completely
different design, and true-drawn obliques are adjusted for any
distortion.

Underscores

Underscores are a poor typographic method to achieve emphasis and should seldom be used. Most underscores cannot be adjusted for weight and position and usually crash through
the descenders.

There are exceptions to these rules as
there are to any rules. Some designers will use underscores as a
conscious design element. In fact, sometimes the underscore is
exaggerated and extended underneath lines of copy, or actually runs
through it to achieve a particular look. If this is the effect you are
going for, of course go ahead and experiment, but it then becomes part
of the style and personality of your design, and not a tool for
emphasis within text.

Point Size

Varying the point size of your type for
emphasis is a technique that should be used sparingly, particularly
within text. It is best reserved for subheads and other stand-alone
phrases and should not be used within text unless an extreme emphasis
is desired as it disturbs the color, texture and flow.

Indents

An indent is the space inserted before the
first word of a new paragraph. It is a graphic element used to create a
visual separation of thoughts in text. It should be neither too small
nor too deep but proportional to the size of your type as well as the
width of the column.

First Line Indent

This is when just the first line of a paragraph is indented. It is the most
common kind of indent but not the only kind. When making traditional
indents, set your tabs manually according to what looks good to you;
don’t rely on the default tabs of your software to dictate style and
taste.

Extreme Indent

You will occasionally see the first two or three lines being indented, sometimes to a depth of half the column width.

Hanging Indent

This is actually the opposite of an indent in that the first line hangs out to the left of the paragraph into the margin.

Line Space Instead of Indent

The technique of separating paragraphs with an extra line space instead of an indent is
often used in correspondence as well as long blocks of text. It adds
white space and a more open look when saving space is not a
consideration.

Type Size

Deciding what size to set your type is a visual skill, but there are
some guidelines that can help you make that decision intellectually.
Let’s talk about text settings first.

Body Text

The primary consideration when setting body text is usually readability.
Assuming you select a font that was designed and intended for smaller
settings, the average range for text settings is somewhere between 8
point and 11 pt. Anything smaller becomes hard to read in longer
settings. Much larger, and it becomes a strain on the eyes for any
length of copy.

The size you select is somewhat dependent on the typeface design, as
the actual cap sizes and X-heights vary from font to font. Length of
text should also be considered, as well as any constraints on the
column width such as a pre-existing grid.

Display Text

Display, or headline, type is primarily meant to catch the eye and draw the
reader into the text. For this reason, there are fewer, if any,
constraints on size. Whatever works with your layout is probably fine,
meaning, try different sizes and see what looks best, and what balances
and complements the rest of your layout.

Line Length

Line length and point size are
interrelated, as line length should be somewhat determined by the point
size for maximum readability: the larger the point size, the longer the
line length. A general guide is to have somewhere between 50 to 70
characters per line, but there are many exceptions to this rule.

Leading (Line Spacing)

Line spacing refers to the vertical space between lines of type from
baseline to baseline, and is usually measured in points. Leading that
is too tight makes your type harder to read, especially in small sizes.
Most design programs have a default setting, called auto leading, which
is around 20 percent of the point size, however this is not always the
best setting to start with.

A basic guideline for text would be a minimum of 2 points leading--such
as 12/14 (or 12-point type with 14-point leading) up to 6 points (such
as 12/18). Display type can have less leading in general since as type
gets larger, the negative spaces associated with line spacing (and
letter spacing) appear progressively too large.

When setting all caps, throw these rules out the window; all caps can be set
with little or no leading (also referred to as set solid) and sometimes
negative leading, depending on the look you are after. Without
descending characters to worry about, all caps beg to be set tighter
than cap/lowercase setting.

Aligning Text

The following styles can be used to align type.

Flush left
is the most common setting for Latin alphabets such as ours (and
usually the default setting). It is the style we find readable and
which our eyes are used to. It aligns the text on the left margin, and
leaves the right margin to end wherever it may, dependent on line width.

Flush right aligns the text on the right with a ragged
left margin, but it is harder to read since our eyes have to follow a
wavering left-hand margin when they move to the next line down the
column.

Justified inserts space between words and sometimes letters to stretch
a line so that both margins align. This creates a geometric block of
copy that is sometimes desirable. Although commonly used (most
newspapers use it), this is a tricky technique to apply tastefully if
you do not take the time to fine-tune.

In some cases of justified text (dependent on your software and the
settings in your preferences), the actual characters are compressed or
expanded electronically to achieve this alignment.

Justified settings can also create rivers of white space, which should be avoided at any cost.

In order to avoid some of the problems inherent in justified
settings, try making your line length a bit longer than usual, or make
your type smaller.

The more words you can fit on a line, the less space you will have to add to justify the line. Once you’ve
settled on an optimum size and width, it might be necessary to edit
your copy to fix lines that are too open or too tight, or that have too
many hyphenated endings, particularly if there are more than two of
these lines in a row. This can be a lot of work, especially if you have
to go back to your copywriter to do it, but it will make for a more
professional looking job.

Centered type can be effective when used for short blocks of copy, such as headlines,
subheads, invitations, announcements and poetry. It centers the lines
of type without adding extra space, making a ragged right and left
edge.

Wrap-around type (run around or text wrap). This is type that aligns around the contour
of an illustration, photo or other graphic element. It can be applied
to either the right, left or both margins.

A Few Words about Rags

When setting type with a ragged margin (flush left or flush right),
learn to become aware of the shape that the ragged line endings are
making. A good rag goes in and out in small increments. A poor rag is
one that makes unnatural shapes with the white space. When this occurs,
make manual line breaks or edit your copy to improve the rag.

When setting type flush left be aware of the shape that the ragged line
endings are making. A good rag goes in and out in small increments. A
poor (bad) rag like the example on the left makes unnatural shapes with
the white space.

Widows and Orphans

A widow is a very short line,
usually one or two words, at the end of a paragraph. This is
typographically undesirable, as it is disturbing to the eye and creates
the appearance of too much white space between paragraphs or at the
bottom of a page. It is considered poor typography, so adjust it by
re-breaking the rag or editing the copy.

An orphan is related to a widow in that it is a
single word or very short line appearing at the beginning of a column
or a page. This terminology is not as commonly used and understood as a
widow, but the concept is the same, and so is the solution: fix it.

Scaling

Artificially stretching (or compressing) type is the number one desktop publishing type crime and should not be employed at any time.

Kerning

Kerning is the adjustment of the space between two specific
characters. It most commonly refers to a reduction of space, but it can
refer to adding space as well. This is done to balance the white space
between certain letter combinations in order to create an even color
and texture, as well as to optimize readability.

The object of proper letter fit (and the goal of kerning) is to achieve
even texture and color balance between characters, which leads to a
consistent overall texture.

Tracking or Letter Spacing

Tracking is the addition or reduction of the overall letter spacing in a selected block of text.
In most page-layout programs, it can be applied in small increments.

The term “letter-spacing” can also refer to the popular style of setting
very open type for stylistic and design purposes. This technique is
most effectively used with all-cap settings that don’t depend on their
letter shapes to be recognized. Unfortunately it is commonly misused
and abused. When it is used it should be limited to a few words or
small amounts of copy, as it definitely reduces readability.

Word Spacing

The amount of space between words is called word spacing, naturally. The
word spacing should not be so little that the words start to run into
each other and not so much that your eye has trouble reading groups of
words because large white blocks interrupt you.

Sentence Spacing

There is never a need for double
spaces between sentences when setting type on your computer, as was
done when using a typewriter. Many people still use double spacing on a
computer and don’t know it is incorrect typography. Be particularly
aware of this in copy that is given to you by others who are used to
typewriter formatting. An easy way to fix these double spaces is to use
the search-and-replace feature of your word-processing or design
program so you can catch them all. Search for a period followed by two
spaces and replace it with a period followed by a single space.

Type Dos and Don’ts

Here are some suggestions to consider when using a typeface:

  • Do start with a few basic typefaces and type families,
    and learn how to use them well. Consider them the backbone of your
    typographic wardrobe—then you can add to them to fit more specific
    occasions. Many excellent designers use the same menu of typefaces for
    most of their jobs, and used appropriately, they always manage to look
    fresh.
  • Don’t distort your type with
    the features available in your page-layout program. Type that has been
    electronically expanded, slanted, emboldened and condensed looks very
    amateurish and is annoying to the eye.
  • Do leave white space.
    That old adage “less is more” often applies to type. No need to fill up
    every square inch of space--in fact, white space can create drama and
    emphasize the type.
  • Don’t tint type with delicate thins. It might break up when printed.
  • Do consider production issues when selecting text type. For instance, when going very small, watch out for disappearing thin strokes, especially when printed.
  • Don’t go too big when setting text; smaller with more leading is often more readable than a larger setting with tight leading.
  • Do consider how your type will look at the size you are planning to use it.
    For instance, when using a thick/thin script (or any high-contrast
    typeface) for a headline, make sure it doesn’t look too clunky at large
    sizes. What looks great at 18 point might look heavy and lose its
    elegance at 96 point.
  • Don’t set to fit.
    Decide on a point size that looks and reads the best, and adjust
    leading and line width (or the length of your copy if possible)
    accordingly.
  • Don’t let the way a
    typeface looks on a laser (or ink-jet) proof be the deciding factor in
    your selection, as it can look much heavier than the actual printed
    piece.

Mixing It Up

How can you mix type effectively? When choosing a typeface outside the primary
family you are using, there are three things to remember: contrast,
contrast and contrast.

A common mistake is to use two or more faces that are too close in style, making the change too subtle to
serve the purpose at hand, yet creating a disturbance that detracts
from the cohesiveness of your design. Combine typefaces when you want
to emphasize or separate a thought, phrase or text visually.

These basic principles should keep you on the right track:

  • Serif vs. Sans:
    A good rule of thumb when combining type is to mix a serif and a
    sans-serif. There are usually strong design differences between them
    (unless they are part of a type family) that can achieve the contrast
    you are looking for.
  • Light vs. Heavy:
    Using a heavier (or lighter) weight typeface creates a strong visual
    contrast. This technique is often used for subheads; using a heavy
    sans, perhaps all caps, within a body of serif text does the trick
    well. Note: Make sure you go heavy enough because
    using the next weight up (e.g., book to medium) often results in a weak
    visual transition.
  • Large vs. Small:
    A good place to change fonts is when type changes size, such as from
    headline to subhead or text. The distinction will be emphasized that
    much more.
  • Wide vs. Narrow (or Regular vs. Condensed):
    An expanded headline font above an average-width body text, or a logo
    split in two using this technique can create powerful contrast.
  • Cap vs. Lowercase:
    Another way to get more mileage out of changing fonts is to use all
    caps for one of the settings, particularly if it is short; but stay
    away from setting lengthy text in all caps, as it dramatically reduces
    readability. We read words by their shapes, not by individual letters,
    and all-cap settings eliminate the information (ascenders and
    descenders) our brains need to read most easily.

No comments:

Post a Comment