Module 3

TYPOGRAPHY AND LAYOUT

• Define the different selections and considerations in type
• Enumerate the different type combinations
• What type to combine and to select
The terms typeface and font are commonly
interchanged (and occasionally disputed).

A typeface is the consistent design, or distinct

visual form, of a type family. It is a cohesive system
of related shapes created by a type designer.

Characters, such as letterforms, numerals, and

punctuation, share formal attributes.

Font has multiple definitions. In metal typesetting

days, a font was a complete character set of a
typeface in one point size and style, such as 12-
point Centaur roman. A font can also describe
family members comprising typefaces, such as
light, regular, and bold.
A. Blackletter K. Pixellated
Halja, Michael Parson, 2008
B . Brush Lettering
Pixeleite, Rafael Neder, 2005
Filmotype Atlas, Charles Gibbons, 2011 L. Period/Retro
C. Calligraphic Peignot, A . M . Cassandre,
Alana, Laura Worthington, 2011 1937
D. Chromatic M. Sans Serif
Rosewood, Carl Crossgrove, Kim Buker
Chansler, Carol Twombly, 1994
Heroic, Silas Dilworth, 2008
E. Distressed N. Serif
Stomper, Matthew Aaron Desmond, Newzald, Kris Sowersby, 2008
1997 O. Slab Serif
F. Experimental Caecilia, Peter Matthias
Hunter, Si Scott, 2009
G. Incised
Noordzij, 1990
Albertus, Berthold Wolpe, 1932–1940 P. Stencil
H. Mathematical A R G N , Greg Ponchak, 2011
Universal Mathematical Pi, Linotype Q. Symbol
Design Studio, 1990 Carta, Lynne Garell, 1986
I. Monospaced
Orator, John Scheppler, 1962
R. Typewriter
J. Ornamental American Typewriter, Joel
Adobe Wood Type Ornaments, Barbara Kaden, Tony Stan, 1974
Lind, Joy Redick, 1990 S. Unicase
Democratica, Miles Newlyn,
1991
T. Wood Type
TYPEFACES
• Influence communication through appearance and legibility.
Aesthetics provide first impressions and express personalities,
such as friendly, professional, or sweet and youthful,
masculine, or utilitarian.

• Typefaces are key tools of visual communication. Designers

assemble language and form with them. Applied adeptly,
typefaces create lasting effects. Take care when handling
them, and respect their makers. Invest in them, and gradually
build a quality typeface library.
01 Subtopic 1

Categories of Type in
Selection
CATEGORIES OF TYPE
Identifying and organizing more than 550 years
of typography and myriad typefaces is a challenging task (not without
debate among typophiles) that has been taken on by many
throughout the years, including
• Francis Thibaudeau
French typographer and creator of the first well-established
system for classifying typefaces, the Thibaudeau classification. He
devised his system while developing the catalogues for the Renault &
Marcou and G. Peignot & Fils foundries in the early 20th century
CATEGORIES OF TYPE
Identifying and organizing more than 550 years
of typography and myriad typefaces is a challenging task (not
without debate among typophiles) that has been taken on by many
throughout the years, including
• Maximilien Vox
was a French writer, cartoonist, illustrator, publisher,
journalist, critic art theorist and historian of the French letter and
typography. He devised Vox-ATypI classification and makes it
possible to classify typefaces into general classes in 1954
CATEGORIES OF TYPE
Identifying and organizing more than 550 years
of typography and myriad typefaces is a challenging task (not
without debate among typophiles) that has been taken on by
many throughout the years, including
• Alexander Lawson
Anatomy of a Typeface is a book on typefaces written
by him. In 1990 Lawson arranges the typefaces by
classification
CATEGORIES OF TYPE
Identifying and organizing more than 550 years
of typography and myriad typefaces is a challenging task (not
without debate among typophiles) that has been taken on by
many throughout the years, including
• Robert Bringhurst
a Canadian poet, typographer and author. He wrote The
Elements of Typographic Style in 1992, a reference book of
typefaces, glyphs and the visual and geometric arrangement of
type
CATEGORIES OF TYPE
Identifying and organizing more than 550 years
of typography and myriad typefaces is a challenging task (not
without debate among typophiles) that has been taken on by
many throughout the years, including
• Catherine Dixon.
is a designer, writer and teacher. As a designer she works
mostly with text-based projects, including typographic covers for
the award-winning ‘Great Ideas’ series for Penguin Books
CATEGORIES OF TYPE
19th Century
Classification began, by printers seeking to note lineage and classify
typefaces during a period marked by many new styles. Various
classification systems exist, each with organizational methods based on
factors such as historical development, formal attributes, and intended
use. These methods are points of departure, not perfect plans. Many
typefaces fit easily in categories; others overlap in multiple ways or escape
classification entirely. Regardless of the system (and the limitations of
each), cataloging typefaces is a valuable exercise. Classification shapes
context and provides descriptive terms, which aids general identification
and selection.
CATEGORIES OF TYPE
There are five basic classifications of typefaces: serif, sans serif, script,
monospaced, and display.

Serif and Sans Serif typefaces are used for either body copy or headlines
(including titles, logos, etc.)

Script and Display typefaces are only used for headlines.

Monospaced typefaces are generally used for displaying code, though they
can also be used for body and headline copy, and were originally used on
typewriters.
CATEGORIES OF TYPE
The oldest typefaces were called BLACKLETTER and date back to the 1400s.
These early typefaces were reminiscent of handwritten calligraphy.

The New York Times logo is a classic, ubiquitous example of blackletter type,
as are many other popular newspaper titles.
CATEGORIES OF TYPE
After blackletter came the first Serif Typefaces. Serifs include slight projections that finish off
the strokes of their letterforms (called serifs, where the style gets its name). Emerging in the
1500s, the first serifs were Old Style serifs. This style includes Garamond and Goudy Old
Style.

The successors to the Old Style serifs were called Transitional serifs, which made their first
appearance in the 1700s. These typefaces had high stroke contrast and were more upright
than their Old Style predecessors.

The natural evolution of the trends present in Transitional serif typefaces became known as
the Modern serifs during the 1800s. These Modern serifs include fonts like Didot and Bodoni.
They have extreme contrast between strokes and no brackets on their serifs.
CATEGORIES OF TYPE
Formal traits and historical development shape the fundamental
typeface categories:

1. Serif—Humanist, Old Style, Transitional, and Modern

2. Slab Serif—Egyptian and Clarendon

3. Sans Serif—Grotesque, Geometric, Humanist, and Transitional.

CATEGORIES
OF TYPE
SERIF
• Humanist
• Old Style
• Transitional
• Modern
CATEGORIES
OF TYPE
SLAB SERIF
• EGYPTIAN
• CLARENDON
CATEGORIES
OF TYPE
SANS SERIF
• GROTESQUE
• GEOMETRIC
• HUMANIST
• TRANSITIONAL
Classification of Typefaces
FONTS
With introduction of computer type, the term “font” came to
be identified only with the typeface name such as Times
Roman.

The size and style began to be identified separately . As result,

today the term font and typeface are used Interchangeably.
CLASSIFICATION OF TYPEFACES
CLASSIFICATION OF TYPEFACES
CLASSIFICATION OF TYPEFACES
CLASSIFICATION OF TYPEFACES
CLASSIFICATION OF TYPEFACES
CLASSIFICATION OF TYPEFACES
CLASSIFICATION OF TYPEFACES
CLASSIFICATION OF TYPEFACES
CLASSIFICATION OF TYPEFACES
CLASSIFICATION OF TYPEFACES
CLASSIFICATION OF TYPEFACES
CLASSIFICATION OF TYPEFACES
CLASSIFICATION OF TYPEFACES
CLASSIFICATION OF TYPEFACES
CLASSIFICATION OF TYPEFACES
CLASSIFICATION OF TYPEFACES
EXAMPLE
Hand-embossed business cards
feature the Humanist serif typeface
Centaur. Set solely in tracked
uppercase, the typeface is elegant.
Capitals are one of Centaur’s finest
assets. Subtle changes in type size,
color, and value aid hierarchy.
EXAMPLE
Old Style typeface Garamond pairs
with Benton Sans(a contemporary
Revival of the 1903 Grotesque
typeface News Gothic). Garamond
conveys spirited messages framed
in colorful talk bubbles.

The letterforms are warm and

friendly.
EXAMPLE
The Hartney logotype is set
in Century Schoolbook,
a Transitional serif type- face.
Lowercase letterforms feature
a tall x-height and open counters.
The typeface personality
is welcoming; a touch of italic
adds sophistication. Geometric
sans serif Futura in limited use
complements the serif typeface.
EXAMPLE
Web banners for an online course
exhibit strong figure-ground
relationships. Slab serif typefaces—Giza
(an Egyptian slab) with a pinch of
Sentinel (a Clarendon slab)— seamlessly
interact with closely cropped
photographs. Letterforms, numerals,
and punctuation function as words,
graphic forms, and image carriers.
EXAMPLE
The photograph provides an implied
vertical axis from which the book title
Oper Nach Wagner rises. Title and author
connect perpendicularly and echo the
image. Orientation and type size variations
order the text, set in Futura, the archetype
of Geometric sans serifs.
02 Subtopic 2

Selection
Considerations
Typeface quality depends on character construction and
how well the forms work together.

What constitutes a good typeface?

• It is a system of thoughtfully conceived and
constructed characters working together as words,
lines, and paragraphs.

• It is highly legible, with well-considered space built in

and around the characters.

• Good typefaces used with care and creativity serve

texts, authors, and readers. Smart selections give
designers the precise kit of parts to do this.
Conversely, fitting faces of mediocre merit work if typeset well. There
are few absolutes. Like much in typography, flexible principles guide
the process for choosing and combining typefaces.

• To begin, start with the text—not the type.

• Take time to read and grasp it as well as possible.

• Get a sense of its mood and energy.

• Pinpoint the main message. Context initiates decision-making.

Conversely, fitting faces of mediocre merit work if typeset well. There
are few absolutes. Like much in typography, flexible principles guide
the process for choosing and combining typefaces.

• Next, carefully map the text. Note its quantity and variety, or types of text,
then order it by importance.

• Determine the technical needs of a typeface, such as stylistic range (posture,

weight, and width) or special features (ligatures, numeral styles, and small
caps), to create hierarchy.
Conversely, fitting faces of mediocre merit work if typeset well. There
are few absolutes. Like much in typography, flexible principles guide
the process for choosing and combining typefaces.

• A project with limited types of text needs less typeface range than one with
multiple variables. For example, books are textually rich, with many options
such as body text, headings, captions, footers, and folios.

• When thinking about typefaces, begin with the text largest in quantity, most
often body text.
Conversely, fitting faces of mediocre merit work if typeset well. There
are few absolutes. Like much in typography, flexible principles guide
the process for choosing and combining typefaces.

• An ideal choice is a face designed for extended reading at small sizes in either
serif or sans serif. In contrast, posters often contain minimal text, such as
titles, dates, and brief descriptions.

• An attention-grabbing display face might echo the title perfectly, as a modest

face conveys supporting text.

• Think first of the text and its typesetting needs, then make appropriate
choices.
.
SELECTION CONSIDERATION
• Typefaces suited to one might not suit another. Expect the unexpected in
digital realms. Be flexible and responsive. Digital formats know no bound.

• Typefaces create atmosphere. They spark emotions and express historical,

contemporary, or cultural connotations—all before the text is read.

• Subtle messaging via the physical characteristics of typefaces prompts

viewer participation.
When typeset, words and lines read fluidly.
Reliable typefaces have consistent styles
(posture, weight, and width) to provide for
typographic variation and emphasis.

Depending on the quantity and variety

of text, a range of styles—from light to bold weights and
condensed to extended widths—add versatility.
Likewise, ligatures, swash characters, and alternate
glyphs offer diversity.
Caption and body styles
designed for comfortable and extended reading
perform well at small sizes. They are too dense
and muddy enlarged.

Subhead and display styles

crafted to shine at large sizes fall short when
they are reduced. Stroke quality is lost.

Optical styles
maintain typeface legibility and elegance at all
sizes when used as planned
SELECTION CONSIDERATION

• For many projects, one font isn’t enough to create visual interest
and establish the information hierarchy. And when you have
multiple typefaces, you want to be sure that they work well
together.
• The more effective combinations usually rely on typographic
principles. These principles are not scientific, rigid, or fail-safe; all
of them can be broken, but they should all be understood.
SELECTION CONSIDERATION
• Keep it simple- usually
“Never use more than three typefaces on a page” is not an
unassailable truth; rather, it’s a modernist principle that’s best
applied in editorial design.

• Vive la difference
Typeface combinations that are too similar can look like a mistake—as
if you’d been experimenting with different fonts and had forgotten to
clean up after yourself.
SELECTION CONSIDERATION
• It’s a family affair
This may sound like a contradiction of the second technique, but another
avenue to harmonious type combos is to stick with a single typeface family. Just
be sure to choose a typeface family that comes in a variety of weights, styles,
and widths

• Go for Contrast
For editorial design, typeface combinations based on contrast are better
equipped to clearly establish hierarchy. Using contrasting typefaces makes it
clear which paragraphs are headings and subheads and which are body copy It’s
also clear that you want to draw your reader’s attention first to the heads.
SELECTION CONSIDERATION
• From the same table
When combining typefaces, a little insider knowledge can go a long way. Try
combining typefaces from the same designer. Some typefaces, like Museo and
Museo Sans or Stone Serif and Stone Sans, were designed specifically for such a
purpose, but even those that were not designed specifically as complements
will likely have a similar aesthetic when they’re from the same hand.

• Historical accuracy
Another approach, appropriate for one-of-a-kind jobs, is to choose a
typeface that is historically appropriate for the subject matter.
SELECTION CONSIDERATION
• Combine characteristics
If you intend to mix typefaces in the same paragraph, for a run-in head or for
emphasis, make them both the same x-height—that is, the height of the letter x
in the face (see Figure 14). If the x-heights differ markedly, it will be jarring to
your readers as their eyes run into the bumps of higher x-heights. If you’re
creating some sort of word play by mixing typefaces in the same word, you’ll
need to adjust sizes to match the cap height and switch to optical kerning, since
there won’t be any kerning metrics for combined letter pairs
SELECTION CONSIDERATION
• Mix it up
What these guiding principles for mixing typefaces don’t take into account is the
wild card of all good design: intuition. Just as an experienced chef can combine
the most unlikely ingredients to great effect, so an experienced typographer can
toss together unlikely type combinations that defy logic.

Selecting font is not just about choosing a letter shape. It is also about
understanding how fonts differ and what limitations they have.
EXAMPLE
In this example, changes in point
size and weight create variation
and emphasis. The contrast is
simple and effective with just one
typeface— Helvetica.
Confident type settings convey
the Knoll brand.
In Combination
Examine letterform anatomy. Compare
and contrast features. Seek the typefaces
of one designer they often have a similar
approach and style.

Starting out, begin with one quality

typeface. A dependable choice normally
meets all needs.

Sometimes one typeface is not enough.

IN COMBINATION
Multiple faces differentiate types of text.

They extend typesetting possibilities and

foster rich typographic color and texture.

Relationships between typefaces, typically

up to two or three, deepen personality. In
all cases, thoughtful deliberation leads
the way.
IN COMBINATION
Pairing one serif and sans serif typeface
works in most situations.

Contrast is key.

Check comparative and contrasting

features, such as letterform proportion, x-
height, stroke quality, and stress.
IN COMBINATION
If text calls for small caps and multiple
numeral sets, choose faces that include
them. Avoid redundancy.

Typefaces with marked likeness, such as

those from the same category, are poorly
matched partners.
IN COMBINATION
A complementary sans serif serves brief
captions or subheads well. Text in limited
quantity, such as title pages or short
headings, works nicely in striking display
faces.

When combining typefaces, carefully

review the size relationships between
letterforms. Match them optically, not by
point size.
IN COMBINATION
Subtle adjustments create balanced
combinations. Be decisive. Use typeface
combinations to enrich and clarify text.

Specific letterforms also provide cues.

Look for consistent anatomy traits
IN COMBINATION
Typefaces of the same category make unhappy
companions.

When mixing typefaces, distinction between them

is vital.

Contrast loses to similarity.

Competing identities do not benefit the text they

aim to distinguish.
SUPERFAMILIES
Simplify the process of combining typefaces. They may include serif, semi
serif, sans serif, semi sans, and slab serif faces. Extensive weights and
widths, as well as optical styles, are common.

A superfamily is a set of typefaces—sans and serif designs for example, or

regular, slab, and rounded variations—that are crafted to work together in
close harmony. In contrast to pairing typefaces from different font families,
superfamilies are often used when more visual cohesion is needed.
SUPERFAMILIES
If seeking multiple typefaces,
superfamilies are excellent choices.
Designed as full-bodied typographic
systems, they offer consistency
across serif, semi serif, sans serif,
semi sans, and slab serif typefaces.
Whether using two, three, or four
faces, superfamilies harmonize. One
size fits all.
“Typefaces are indispensable; they
conduct visible language.”
Kristin Cullen (2020). Design Elements Typography Fundamentals: a Graphic Style
Manual for understanding how typography affects design, Beverly: Rockport
Publishers.

Visuals from Google Images

https://www.youtube.com/watch?v=w2TqSuh3gTI

https://www.toptal.com/designers/typography/typeface-classification
END OF MODULE