TYPOGRAPHY AND LAYOUT

01 Subtopic 1

Definition and
Function
• Define Typography and functions
• Differentiate the Macro-micro typography
- style or appearance of a text.
- the study of letters used
to create text.
- art of working with text.

Typography is everywhere we look. It's in

the books we read, on the websites we
visit, even in everyday life—on street
signs, bumper stickers, and product
packaging.
Typography is a process, a refined craft that makes
language visible. Designers shape language with type
and give words life and power to speak text fluently.
Johannes Gutenberg modeled his first
typeface on mid-fifteenth-century
calligraphic
writing called Textura. It is narrow
with tightly fitted characters and dense,
angular strokes. Textura is part of a
larger Blackletter family that includes
Rotunda, Schwabacher, and Fraktur
The term has a confusing A typeface was the shape of letters
such as Times Roman or Arial.
history. Originally type was set
with small metal letters called A style might have been bold or italic.
Fonts combined a typeface,
A size is measured in points. For example , one font might
Style and size into a single name. have been identified as 14-point Times Roman Bold.
Another font might have been identified as 12- point Times
Roman.

The typeface, style and size together determine the

font.
 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.
Function
Projects in all media require distinct typographic use based on
function. Merge communication with aesthetics—one without
the other limits the potential to convey information effectively
and beautifully.
 Although projects vary with individual needs, follow
simple objectives for all when designing with type for
communication.
1. Convey information with type.
Communicate with clarity.
2. Assist the reading process.
Make it accessible (and delightful).
3. Uphold typeface integrity.
Value it and its makers.
4. Expresses text beautifully.
Create visually inviting work.
5. Design with appropriateness
Do what best serves each project.
Typography is everywhere, crossing mediums
that include environments, interfaces, packaging,
and print.

Typography is at the center of design practice.

Typography is also conceptual and interpretive

Typography is everywhere, crossing mediums
that include environments, interfaces, packaging,
and print.

Typography is at the center of design practice.

Typography is also conceptual and interpretive

 Designing with type for communication is many-sided. It is
analytic and instructive, dramatic and whimsical. Designers
work with type objectively and subjectively with economy and
extravagance.
Environmental signage systems
are practical and direct; clarity is imperative
Motion sequences
appeal to viewers through lively type treatments.
Letterforms
personify or emote strongly regardless of the medium,
balancing function and aesthetics reigns
Macro and Micro typography
describe approaches to typographic design.

Macro typography
addresses composition or (layout—the plan and
organization of typographic elements.) The macro view is the
compositional body, in which designers order, connect, and
balance type. It is the first impression that engages viewers.
Without immediate visual interest, communication ceases; the
intended typographic messages are not received.
Macro typography
Key considerations include spatial positioning and
relationship-building among elements and white space
(negative space).

It is the arrangement of paragraphs, depending on the

elements, such as images or colour layout.

Includes, amongst other things, the margins – the

distances between individual text containers – and the contrast
of the font.
Micro typography
refers to typesetting essentials and details. Designers
transform plain text into a typo- graphic system.
Designers transform plain text into a typo- graphic
system—a hierarchy, with optical emphasis and strategic
variation. Letterform, word, line, and paragraph dynamics
demand acute attention. A principal micro factor is spacing,
which includes kerning and tracking.

Aesthetic tailoring, as in refining punc- tuation and

ragging, are other micro components
Micro typography
takes care of the detail in the typeface. All factors that
affect the font itself fall into this category. For example, the font
selection and font size are microtypographic elements.
In this image, choreographed
letterforms perform the song
“Que Sera” by Wax Tailor. The
motion sequence visualizes
sound and voice.
One-off typographic
arrangements in many type-
faces shape scenes. Graphic
elements frame the viewing
area and support typographic
action.
02 Subtopic 2

In Practice
• Able to know the different Typography in practice.
 Different text in wide-ranging mediums for assorted
viewers provides extensive typographic options. Designers
might navigate multiple mediums or specialize in one or
a limited few. Typography connects all. Numerous spreads
with examples and captions follow to exhibit the diversity of
typographic practice.
POSTER
Beside is an elegant poster that has limited and striking
typography.

WB (Werner Bischof) set in Typonine Stencil is in distinct contrast to

the photograph. The color commands attention, and the letterform
anatomy defines the alignment of subordinate text.

The B stem, for example, is the main axis for logos and text, set in
sans serif Akzidenz-Grotesk.
TYPEFACE ART/ TYPE AS
IMAGE
These expressively
illustrated pieces are fine examples
of type as image. Miscellaneous
letterforms interact playfully. Just
one element of a larger campaign
for the bar Le Buro, the spirited
typographic works enchant.
CAMPAIGN MATERIALS
Everything is OK. An example of
concept-driven campaign, it is “a kind of social
design experiment in subversive positivism. It
explores the relationship between medium and
message, challenges accepted modes of
communication.

A consistent system of color and type—

a trio of Helvetica, Trade Gothic, and Dot
Matrix—unify elements across mediums has
seen
LETTERPRESS CARDS

Type expresses sentiments and

creates joy.

A collection of everyday
letterpress cards reminds us that even
simple gestures merit typographic
attention.
CALLING CARDS
A bold color palette and
delicate pattern set the stage for this
simple sans serif and serif combination.

The contrast is clear, the

information conveyed with ease. A
beautiful ampersand adds an extra
touch of elegance to the design.
WEBSITE
The Tinkering Monkey website is
open and accessible. Main navigational
links in sans serif Underground lie in
the header. An uppercase setting plus
color clarifies the site structure.
Headings and subheads, such as
“Taking the heat” and “We start
tinkering,” in the serif Rooney Web
combine well with Underground. Both
typefaces have warm personalities.
PACKAGE DESIGNS
The package design for Dulce
Vida, a 100-proof, 100% organic
tequila, is contemporary and tasteful.
The brand name in the Blackletter
serif Brauhaus Alternate conveys
confidence. Direct and refined, the
versatile sans serif Flama
accompanies the graphic logotype.
“Your choice of typeface is as important
as what you do with it.”
- Bonnie Siegler
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=sByzHoiYFX0&t=173s
END OF MODULE
 Module 2
TYPOGRAPHY AND LAYOUT
• Define the different terminologies in typography
• Enumerate the anatomy and iden%fy typographic
building blocks
01 Subtopic 1

Anatomy
• Define the different terminologies in typography
Glyphs and Characters
FONTS
With introduc,on of computer type, the term “font” came to
be iden,fied only with the typeface name such as Times
Roman.

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

today the term font and typeface are used Interchangeably.
.

TYPE DESCRIPTIONS
To begin to understand how a font is designed, you first need to
know the typography terms that describes the placement and
design of the type.
Understanding typography fundamentals includes learning
its terminology (the language of type), anatomy
(the parts of type), and architecture (the framework of type).
Designers share common terms that iden,fy typographic
building blocks. Basic terminology is typically constant across
mediums, which builds mutual connec,ons from one
to another.

For example, all typefaces, regardless of their diversity, share

anatomical parts and details.
Knowing well the parts that comprise typographic prac3ce
aids type selec,on and use.

Best expression comes with in3mate knowledge of the

essen3al elements, which include characters, measures, and
styles.

Typographic results arise through the considered manipula3on

of the essen3al elements. Cul3va3ng an understanding and
gaining proficiency begins with learning basic terminology,
anatomy, and architecture.
Many typographic terms originate from metal typeseLng days when typographers and
printers set lead type slugs (cast-metal sorts) by hand to form words, lines, and paragraphs.
They shape much of the terminology now used to describe type anatomy and measure.

A Beard / Bevel
B Face
C Feet
D Groove
E Nick
F Point Size/ Body Size
G Set Width
H Shank
I Shoulder
J Type Height/Height to Paper0.918 inch (2.3 cm)
Glyphs
Glyphs comprise all marks in a typeface from le1erforms and
numerals to punctua4on and symbols. For instance, a diacri4c (accent
mark) is a glyph, not a character. It combines with a le=erform to
create a character, as in ́ (acute) + e = é.

An elemental symbol within an agreed set of symbols, intended

to represent a readable character for the purposes of wri4ng.
Characters
A character is a typographic element such as a le1erform,
numeral, or punctua4on mark. Typefaces might have mul4ple
versions of each character represented by glyphs. For example, the
lowercase g character can have three glyphs: single story g, double
story g, and small cap G. The term “alternates” (or alternate
characters) applies to the variants.
.
The Parts of Type
Aperture An aperture (open counter) is the par1ally enclosed white space in le6erforms such as C and S, as
well as n and e.

Apex An apex is the top point of a le6erform, where two strokes meet, as in A and W.

Arc of Stem An arc of stem is a curved stroke that flows smoothly into a straight stroke. Examples include f, j,
and t.
Arm An arm is a short horizontal or ver1cal stroke a6ached to another on one end, such as E, F, and L.

Ascender An ascender is the part of lowercase le6erforms—b, d, f, h, k, and l— that rises above the x-height.

Axis An axis is the invisible line that bisects character tops and bo6oms at the thinnest points. It indicates
character stress from oblique to ver1cal.
.
Bowl A bowl is the curved character stroke that encloses counters, as seen in a, b, g, and p. Bowls are closed
or open, depending on whether or not the curve connects to the stem.

Chin A chin connects the arm and spur of the uppercase G.

Counter A counter (counter form) is the enclosed white space in characters such as b, d, and o. An open
counter (aperture) is the par1ally enclosed white space in characters such as
C and S, as well as n and e.
.
Crossbar A crossbar (cross stroke) is the horizontal bar that connects two strokes (A and H), crosses stems (f
and t), or bisects stems (E and F).

Crotch A crotch is the acute inside point where two strokes meet, as in V.
Descender A descender is the part of lowercase le6erforms—g, j, p, q, and y— that falls below the baseline.

Dot A dot (16le) is the rounded mark above the lowercase i and j.

Double story Double story refers to specific le6erform varia1ons that have upper and lower closed or open
counters. For example, the lowercase g in some typefaces has a bowl plus loop. Another double story
le6erform is the lowercase a. It features a lower closed bowl with an upper aperture.
Ear An ear is a small stroke that extends from the bowl of the double story lowercase g.

Eye An eye is the closed counter space specific to the lowercase e.

Flag A flag is the horizontal stroke found on the numeral 5.

Finial A finial is the curved and tapered finishing stroke seen in the lowercase a, c, and e.
Hook A hook is the curved stroke in a terminal, as in the lowercase f and r.

Leg A leg is the short, diagonal stroke that sweeps downward in the le6erforms K and R.

Link A link is the connec1ng stroke between the bowl and loop of the double story lowercase g.
Loop A loop is the enclosed or par1ally enclosed counter of the double story lowercase g. It falls below the
baseline and connects via a link to the upper bowl.

Overshoot (overhang) is the slight character por1on that falls below the baseline or above the cap height or
x-height. Examples are A, a, O, o, and
V, v. It gives the op1cal sense that such forms are the same size as those siKng flush on the baseline.
Serif A serif is a small finishing detail at the start and end of strokes.

Shoulder A shoulder is the downward curved stroke that extends off a stem, as in h, m, and n.
Spine A spine is the primary curving stroke of the S.
Spur A spur is a one-sided, small finishing detail that slightly extends from a primary stroke, as in the
uppercase E, G, and S.

Stem A stem is the primary ver1cal stroke of a le6erform.

Stroke A stroke is any curved, straight,
or diagonal line that constructs characters. Arms, legs, and stems are specific
stroke types.

Swash A swash is an embellished stroke that replaces a serif or terminal to create a swash character, a
decora1ve form that is regarded as lively and elegant.
Tail A tail is a downward finishing stroke. The uppercase Q
typically features a dis%nct, o<en decora%ve, tail. Uppercase
le?erforms with legs—like K and R— some%mes have curved
tails that fluidly extend from the diagonal stroke.

Terminal A terminal is the curved or straight end of finishing

strokes, as seen in a, c, f, j, r, and y. Terminal styles include
ball, beak, and teardrop (lachrymal).
02 Subtopic 2

Terminology
• Enumerate the anatomy and iden%fy typographic building blocks
The Framework of Type
The first element of typography is line(s) on which text is placed. There are
three basic lines used when describing a typeface

……………………………………………………………………………………………………………

……………………………………………………………………………………………………………

……………………………………………………………………………………………………………
X-Height line is the line under which type “sits ”. Font
designed with high x-heights are harder to read than those placed
at the standard height.
……………………………………………………………………………………………………………

……X-HEIGHT………………………………………………………………………………………

……………………………………………………………………………………………………………
Baseline is the line on which the type “sits”.

……………………………………………………………………………………………………………

……………………………………………………………………………………………………………

……………………………………………………………………………………………………………
BASELINE
Ascender Line The ascender line marks the height or highest point
of ascenders.

Ascent Ascent is the maximum leBerform height from the

baseline beyond the cap line.

Baseline The baseline is the imaginary line on which leBerforms,

words, lines, and paragraphs sit.
Descender Line The descender line marks the lowest point of
descenders.

Descent is the maximum leBerform distance below the baseline.

Leading (line spacing) is the ver3cal distance from one baseline to

the next measured in points. The term derives from metal
typeseEng days when lead strips were set between lines of type
to adjust ver3cal spacing.
Mean Line The mean line (mid-line) marks the height or highest
point of lowercase leBerforms minus ascenders and descenders.

X-height the distance from baseline to mean line, or, typically, the
top of the lowercase x. It measures lowercase leBerform height
minus ascenders and descenders. X-height conveys perceived
typeface size.
BASELINE ALIGNMENT
Baselines are imaginary lines on which le?erforms, words, lines, and
paragraphs sit. Baseline alignment refers to a calculated system of
horizontal guides at equally spaced ver%cal intervals that underlie
typo- graphic layouts. A baseline alignment system designates related
posi%ons for all type, no ma?er the range of point sizes. Baselines
enable consistent horizontal alignment across composi%ons. Lines of
type coincide; they also back up from page-to- page if viewed one atop
another
Measure, Contrast, and
Stress
Em An em is a typographic measure
equal to the point size (type size) used.

An em in a 6-point typeface is 6 point;

in a 12-point typeface it is 12 point.
(see figure 1)

En An en is a typographic measure equal

to half an em. An en in an 8-point type- face
is 4 point, in a 16-point typeface it is 8 point.
(see figure 2)
Figure 2.
Pica
A pica (abbreviated p) is a typographic
measure equal to 12 points.
Picas measure line length.
Point
A point (abbreviated pt) is a typographic
measure equal to 0.0138 inch (0.35 mm).
Points measure type size
and leading (line spacing).
Pica (pai·kuh)

1 pica = 12 points = 0.166 inch(4.2mm)

6 picas = 72 points = 1 inch(2.5cm)

1 point = 0.0138 inch(0.35mm)

12 points = 1 pica = 0.166 inch(4.2mm)
72 points = 6 picas = 1 inch(2.5cm)
Point size (type size) refers to the body size of a character—not its
appearing size. Typefaces that share matching point sizes do not
always have the same op%cal size. For example, same-sized
typefaces with tallx-heights(thedistancefrombaseline to mean line,
or, typically, the top of the lowercase x) look larger than faces
with small x-heights.
Body size is the area a character inhabits plus added white space
surrounding it. Body height equals point size. The term body size
originates in metal-typeseRng days when lead-type blocks called
slugs (or cast-metal sorts) contained characters. Lead slugs had
basess lightly larger than the character size.
Appearing Size refers to op%cal size or perceived character size; 12-
point type in one face might look larger or smaller than the same
measure in other typefaces.

Side bearings Digital characters have slight white spaces on their

le< and right sides called sidebearings. Defining the distance
between characters, side- bearings are substan%al factors in
typeface design. The term set width refers to the combined width
of the character and sidebearings.
Contrast refers to the rela+onship between thick and
thin strokes. Serif typefaces such as Bodoni and Didot
have a high thick-to-thin stroke contrast. Sans serif
typefaces such as Trade Gothic and Universe feature
a low to uniform thick-to-thin stroke contrast.

Stress refers to the invisible axis that bisects

character tops and boBoms at the thinnest points.
Orienta+on is oblique or ver+cal. Stress is detec+ble
using the lowercase o as a guide
Serif and Sans Serif
Serif is a small finishing detail at the start
and end of strokes. Basic serif construc,ons
are reflexive and transi,ve; bilateral
and unilateral; abrupt and adnate.
Variants include cupped, hairline, rounded,
slab, and wedge. The first roman serif
typefaces appeared in the fi]eenth century.
Typifying the Humanist typeface category,
the style was inspired by Italian handwri,ng
called “le^era an,ca.” Other serif typeface
categories include Old Style, Transi,onal,
Modern, and Slab
Sans serif refers to type without serifs
and very low to uniform thick-to-thin
Serif stroke contrast. The first known
sans serif Epic typeface by William
Caslon I V appeared
in 1816. Vincent Figgins coined the term
sans serif roughly twenty years later. Sans
serif typeface categories are Grotesque,
Geometric, Humanist, and Transi%onal
are small finishing details at the start and end of strokes.

Serif construc3ons are reflexive and transi,ve;

bilateral and unilateral; abrupt and adnate.
• Abrupt Serif Abrupt (unbracketed) serifs extend
sharply with angled stem connec;ons.
• Adnate Serif Adnate (bracketed) serifs extend fluidly
with curved stem connec;ons.
• Bilateral Serif Bilateral serifs extend off both sides of the stroke.
• Unilateral Serif Unilateral serifs extend off one side of the stroke.
• Reflexive Serif Reflexive serifs break slightly at the stroke then
con;nue off it. They are typically evident in roman typefaces.
• Transi;ve Serif Transi;ve serifs flow smoothly out of the stroke
without pause. They are typically evident
in italic typefaces and most oDen unilateral.
Serif are small finishing details at the start
and end of strokes.

Serif varia3ons are Cupped, hairline, rounded,

slab, and wedge.
Typeface, Font, and
Superfamily
 A typeface is the consistent design, or dis%nct visual form,
of a type family. It is a cohesive system of related shapes created
by a type designer.

Characters such as le9erforms, numerals, and punctua=on

share formal a9ributes. In metal typeseRng days, a font was
a complete character set of a typeface in one point size and
style—12-point Centaur roman, for example.
 A font can also describe family members com- prising
typefaces such as light, regular, and bold. For instance, Bembo is
a typeface, Bembo italic a font. Digitally speaking, font refers to a
computer file that makes a typeface available for use and
produc%on.
 Superfamilies are full-bodied typeface families that can
include serif, semi serif, sansCASE
serif, semi sans, and slab serif
AND NUMERALS

faces. Extensive weights and widths, as well as op%cal styles, are

common. Unified by concept and form, superfamilies add unique
flavor to typographic works, all connected by family %es.
Case and Numerals
 Uppercase refers to capital le?erforms (majuscules).
They share uniform heights called cap height. The term
uppercase originates from le?erpress prin%ng. Sec%oned type
cases held uppercase and lowercase slugs; uppercase forms sat
in the upper part.
 Lowercase refers to small le?erforms (minuscules). They
differ from uppercase in that they have more varia%on in form,
as well as ascenders and descenders, which aid readability. The
term lower- case originates from le?erpress prin%ng. Sec%oned
type cases held uppercase and
lowercase slugs; lowercase forms
sat in the lower part.
 Small caps are uniquely designed uppercase le?erforms that share
with lowercase a similar weight and x-height (small caps are typically
slightly taller). When elements such as acronyms and abbrevia%ons are in
body text, small caps replace full capitals, which are op%cally too large
next to lowercase le?erforms. Use small caps only if offered in a selected
typeface—not all contain them. Reducing full caps to small- cap size makes
them look too thin and narrow.
“Fake small caps” are awkward
and discordant.
 Lining Figures (%tling figures) are
numerals that are the same height as
uppercase le?erforms. Unlike non-lining
figures, they do not have ascenders or
descenders. Lining figures are well
suited in combi- na%on with full capitals.
 Non-lining figures (old-style or text figures)
are numerals with variable widths, ascenders, and
descenders. Some sit on the base- line (0, 1, 2, 6,
8); others fall below it (3, 4, 5, 7, 9). They share
weight and x-height with lowercase le?er- forms
and small caps. Non-lining figures serve body and
con%nuous text well. They blend fibngly with
lowercase without commanding a?en%on like
lining figures, which are hulking in such situa%ons
and disrupt fluid reading.
 Propor4onal figures are numerals with
variable width or body size. For instance,
the numeral 1 has a narrower width than the
numeral 3. They accommodate many texts except
numerical data or columns of numerals that
require ver%cal alignment (in which case, tabular
figures are apt). Propor%onal figures may be lining
or non-lining.
 Tabular figures are monospaced numerals,
meaning all share the same character width or
fixed width. They accommodate numerical data or
columns of numerals that require ver%cal
alignment, as in tables or charts. Tabular figures
may be lining or non-lining.
 Inferiors and superiors are specially
designed and propor%oned forms, not reduced
full-size characters, which appear too thin when
scaled.

Inferiors and superiors are small

characters used for special text such
as footnotes, mathema%cal nota%ons,
and scien%fic formulas.
 Inferiors (subscripts) fall below the
baseline.
 Superiors (superscripts) rise above the
baseline and hang from or top-align to the
ascender line.
Analphabetics and Type Style
 AnalphabeDcs are characters
used with the alphabet and are not
included in its alphabe%c order (or A
B C s). They include punctua%on,
diacri%cs (accent or diacri%cal
marks), and symbols.
 PunctuaDon marks clarify text
structure and meaning. Common
examples are
apostrophes,
commas,
and periods.
 DiacriDcs, such as acute ( )́ ,
circumflex (ˆ), and umlaut ( )̈ , are
auxiliary marks that combine with
le?erforms and indicate a dis%nct
sound or vocal emphasis
 Symbols such as arithmeDcal
and currency signs, as well as
copyright and registered marks, are
special-purpose characters
typeface posture, weight, and width
Posture is the angle of le6erforms rela1ve to the baseline. Roman
le6erforms are upright with a ver1cal stance. (The term roman also
refers to the regular weight of a typeface.)

Posture also includes italics and obliques, which typically sit at a12- to
15-degree slant from the roman posi1on. Derived from handwri1ng,
the first italic appeared in Italy during the fiXeenth century.

VeneFan printer Aldus ManuFus introduced the style as an

alterna*ve to roman body text. Used in pocket-sized books, the
narrower italic form allowed more words per line, which saved space
and money. Italics and obliques now create emphasis within roman
text rather than ac1ng as subs1tutes for it.
typeface posture, weight, and width

Weight refers to stroke thickness.

Regular (book or roman) and bold are
tradi%onal weights common to most
typefaces. Addi%onal weights include
thin, light, medium, black, and ultra.
typeface posture, weight, and width

Width (how wide the le?erforms

stand) indicates horizontal le?erform
propor%on. Condensed is a typical
width narrow in appearance.
Compressed and extra- condensed are
others. Extended refers to widths with
markedly broad appearances.
EXAMPLE
A promo%onal materials for
Glasgow rock band Sindûstry are
bold in execu%on. with A
circumflex (ˆ) above the U is for
graphic effect not pronuncia%on.
The diacri%c is structurally sharp.
It is a dis%nct visual note—
typographic form used with
drama%c intent. The typeface
is Helve%ca Ultra Condensed.
Ligatures
 A ligature is the union of two
or more characters. Varie%es include
stylis%c, lexical, and discre%onary.
 StylisDc Ligatures resolve
unwanted character collisions that
occur when certain le?erforms
combine. Such ligatures deliver
aesthe%c refinement. Common
examples are fi, ffi, and fl.
 Lexical Ligatures (diphthongs)
represent composite vowels such as
æ (aesc) and œ (ethel).
 DiscreDonary Ligatures
Several typefaces also contain
discre%onary ligatures. They add
stylis%c grace with ornate or
historical nuance. Op%ons include
ct and st.
 Ampersand Another ligature is
the ampersand, which symbolizes the
La%n word et, meaning “and.” Some
amper- sand varia%ons clearly echo
their heritage as e and t ligatures;
others vary indirectly, with li?le
e and t resemblance.
EXAMPLE
The Logik logotype conveys
connec%ons via a custom gi
ligature, which also unites
with the k. It is apt for a
company that analyzes text
documents and reveals links
among them. The modified
typeface is Century
Schoolbook
EXAMPLE
A specially designed ri
ligature enriches the
aesthe%c and per- sonality of
the Carissa Pelleteri logotype,
which is set in Aus%n Bold. A
modified r terminal replaces
the dot (%?le) of the
i and shapes the le?erform.
 Knowing well the parts that comprise typographic pracDce
aids type selecDon and use. Best expression comes with
inDmate knowledge of the essenDal elements, which include
characters, measures, and styles.
Kris,n Cullen (2020). Design Elements Typography Fundamentals: a Graphic Style
Manual for understanding how typography affects design, Beverly: Rockport
Publishers.

Visuals from Google Images

h^ps://www.youtube.com/watch?v=NrBF-ebM4uE

h^ps://www.youtube.com/watch?v=WzVl_ATHUQ0
END OF MODULE
 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
 Module 4
TYPOGRAPHY AND LAYOUT
The Principles of Typography
• Space and Spacing
• Alignments and Paragraphs
• Hierarchy
• Aesthetic tailoring
• Measure, Point Size, and Leading
• Kerning and Tracking
01 Subtopic 1

The Principles of
Typography
TYPESETTING
• Typesetting happens in accord with the space in and around it.
Space is as much a physical presence as typographic marks.
Their collective relationship enlivens works. Space can change
the look and feel of type, noticeably improving
or weakening it.
• The act of spacing adjusts and refines the distances between
characters, as well as the overall appearance of words, lines,
and paragraphs. It includes kerning, tracking, and leading (line
spacing).
Spaces and Spacing
SPACES AND SPACING
The terms normal, loose, tight, and negative describe spacing.

Normal Spacing typically means an even, gray field of text. It

lacks light and dark values, called typographic color (not hue),
which vary and emphasize.
For instance, Tight Spacing creates a blacker impression than
Loosely spaced type. Readability declines as spacing decreases or
increases beyond average ranges: type looks awkwardly squeezed
or scattered.
SPACES AND SPACING
Key spacing goals are balance and consistency.

The eye guides because spacing type relies on optical sensitivity.

What works well once might not work again; always space with a
delicate touch, case by case.
Alignments and Paragraphs
PARAGRAPHS
Paragraphs are the largest text bodies in typographic design. Optimal
settings seek balance among type size, line length, and leading

Forty-five to seventy-five characters per line is an ideal range for

continuous text.

A line length that is too wide makes it difficult to travel back across the
paragraph to the next line and is tiring to read.
PARAGRAPHS
Paragraph indicator is a visual cue that signals the beginning of a
new thought. It is a silent note that provides a fleeting pause and
smooth transition from one paragraph to another. Reading
continues fluidly and does not halt.

Common paragraph indicators are indents and half or full line

returns.
PARAGRAPHS
Traditional indent is equivalent to one em space.

Exaggerated indents range up to half the measure of the line

length.

Outdents are expressive indicators

PARAGRAPHS
Traditional Indent
A traditional approach is an indent equivalent to one em space. Indents can
also match the leading. Be sure that they are not too slight, which can look
like an extra space or unplanned misstep.

Indent Alternative
An indent alternative equals half the paragraph measure or
line length. Such extension might be excessive for large amounts of
continuous text, but in limited use, the exaggerated effect is unexpected
and dramatic.
PARAGRAPHS
PARAGRAPHS
Outdent
An outdent refers to first lines that shift outside the paragraph body. Ledge-
like in appearance, outdent lengths vary from a half to a full paragraph
width or more. Outdents work well when dramatic effect
is desired. They sometimes have a second emphasis factor, such as a style or
case change, that contrasts with the body text.
PARAGRAPHS
Graphic Elements and Symbols
Graphic elements, such as circles, squares, and triangles, offer expressive
ways to indicate paragraphs. Integrated throughout body text, they shape
what looks like one para- graph.
ALIGNMENTS
Alignments the way type is arranged on the page.

It is the placement of text or graphics on a line.

The placement can be to the right, to the left, or centered.
ALIGNMENTS

Flush Right Flush Left Centered Justified

FLUSH RIGHT FLUSH LEFT CENTERED JUSTIFIED

 ALIGNMENTS
Flush-right alignments are best suited to words or lines, rather than
paragraphs. Flush right contrasts well with flush left text, when juxtaposed
along alignment edges. Flush right is less fitting for paragraphs because the
start of each line varies in position. The stable left edge
seen in flush-left and justified alignments fosters improved reading
conditions for continuous text
ALIGNMENTS
Flush left alignments is a multipurpose alignment method, especially for
paragraphs. It offers a fixed point from which words, lines, and paragraphs
begin, which eases left to right reading. Fixed word space typically makes
ragging easier to manage than justified alignments with variable word
space.
 ALIGNMENTS
Centered alignments fit short amounts of text, such as that in title pages,
packaging, or business cards. Centering is rarely practical for running
paragraphs. Left and right ragged lines do not offer alignment points for
support text, nor do they create relationships with format edges.
ALIGNMENTS
Justified alignment often produces harder, geometric settings with clean
flush edges. It has variable word spaces, which means word spaces flex in
width, based on type size, line length, and number of characters per line.
Attention to such factors is vital to well justified settings, which are prone to
rivers — disruptive gaps and holes that run through justified paragraphs.
02 Subtopic 2

Hierarchy
HIERARCHY
Hierarchy orders text by complementing and contrasting
relationships. Without it, typographic design lacks focus and visual
interest.

Hierarchy is inherent to typesetting.

• Start with text when defining hierarchy.
• Map it by noting the quantity and variety.
• Rank text by importance.
• This defines what viewers see first, second, third, and so on.
HIERARCHY
Spatial and graphic factors support type for hierarchical benefit. Spatial
factors include spacing (tracking, kerning, and leading), orientation shifts
(horizontal, vertical, and diagonal), and position changes.

BASIC VARIATION AND EMPHASIS FACTORS:

Typographic
• Point Size
• Style (Posture, Weight, Width) Typeface Combinations
• Case Distinctions
• Baseline Shifts
HIERARCHY
BASIC VARIATION AND EMPHASIS FACTORS:
Spatial
• Spacing (Kerning, Tracking, Leading)
• Orientation
• Position
Graphic
• Line
• Shape
• Color
HIERARCHY
Styling Techniques in Hierarchy There are a few basic methods for establishing
a visual typographic hierarchy:

• Size
This is the easiest and most
common method for establishing
hierarchy.
HIERARCHY
• Weight
Simply using a bolder weight of a font can help isolate.

• Color
Color plays a big role in what our eye
sees as primary and secondary.
Generally speaking; warm
colors pop, cooler colors
recede.
HIERARCHY
• Position
Where sections of information are positioned in relationship to each
other can establish a hierarchy.
HIERARCHY
• Contrasting Typefaces
A great way to achieve hierarchy is to use contrasting typefaces.
HIERARCHY
• Combination
As mentioned previously, these methods can be most effective when
used in combination with one another. This is the fun part – deciding
what combination is right for your content and layout.
HIERARCHY
Flow is the visual path created by arrangements of elements within a page
design.

Once you have established a focal point, the reader needs to be encouraged to
look at the rest of the page by following a predetermined FLOW.

The FLOW follows the same rule as the focal point, image before text, larger
text before small text, and colored text before black text.
HIERARCHY
Z Flow Pattern
Z-PATTERN: Z, from Zigzag pattern, begins at the upper left, moves to the right
and then down to the lower left and on to the lower right.

This pattern duplicates the usual reading pattern of texts, which is why,
designs with this pattern is easy for readers to follow.
HIERARCHY
Weight change and orientation contrast
are dominant typographic and
compositional techniques. Squares
support type and lead the eye to key
text: title, date, location, and description.
The study also features consistent
lowercase settings. Slight tracking
of the title “Julian Stanczak” offers subtle
variation without sacrificing readability.
HIERARCHY
Dramatic type size contrast gives
attention to “Stanczak.” The stem
of the k is a leading edge for support text
(location, sponsors, and contact
information), which sits at
Flush left and right alignments. Bold and
italic styles add typographic color
in justified paragraphs. A slightly
exaggerated indent signals the second
paragraph.
Aesthetic Tailoring
AESTHETIC TAILORING

Aesthetic tailoring is the final typesetting phase when designing with type
for communication. Called microtypography, it ensures refined type settings.
Projects are free of distractions and missteps that inhibit reading and
message delivery. All mediums and formats require an enhanced sensitivity
to typographic detail.
AESTHETIC TAILORING
Fundamental etiquette factors that offer simple
methods to tailor type.

• Maintain proper typeface proportions.

• Maintain baseline relationships.

AESTHETIC TAILORING
Fundamental etiquette factors that offer simple
methods to tailor type.

• Match combined typefaces optically

when set side by side.

• Choose roman (or regular) brackets,

curly brackets, and parentheses.
AESTHETIC TAILORING
Fundamental etiquette factors that offer simple
methods to tailor type.
• Insert ligatures and avoid character collisions.
• Use small caps only if offered in typefaces selected.
• Use hyphens and dashes appropriately
• Refine punctuation.
• Use correct apostrophes, quotation marks, and primes.
• Balance bullets optically or substitute midpoints.
AESTHETIC TAILORING
Fundamental etiquette factors that offer simple
methods to tailor type.
• Insert one word space between sentences.
• Refine paragraph and line edges.
• Fix rivers, orphans, and widows.
• Control hyphenation.
• Kern between characters.
• Track specific settings.
• Avoid tracking lowercase and paragraphs
Measure, Point Size and
Leading
MEASURE & POINT SIZE

SIZE
Type is measured using the characters that have ascenders
and descenders. The distance between the top of the highest
ascenders and the bottom of the lowest descender determines
the size of the font measured in pica.
MEASURE & POINT SIZE
It is important to realize that the height of typeface, rather than
its width, is being measured

yh
……………………………………….………………………………………..

……………………………………….………………………………………..

……………………………………….……………………………………….. Pica Size

……………………………………….………………………………………..
MEASURE & POINT SIZE
A unit of measurement equal to one-sixth of an inch. There are 12
points to a pica. 12 points = 1 pica; 6 picas = 1 inch; 72 points = 1 inch

yh
……………………………………….………………………………………..

……………………………………….………………………………………..

……………………………………….……………………………………….. Pica Size

……………………………………….………………………………………..
LEADING
Leading is the vertical distance from one baseline to the next
measured in points.

Leading options are

• Positive leading - is greater than the point size, Positive leading
is apt for most type settings.
• Negative leading - can work for display styles (24 point and up)
but not body styles (9 to 14 point).
LEADING

Leading can also overlap, which

weaves together lines of type.
One text fits into the line space
of another. Overlapping leading
offers visual interest, as well as
typographic texture, via merged
yet contrasting text.
Kerning and Tracking
KERNING
Kerning adjusts slight spaces between characters and corrects
ill-fitting pairs that distract because of collisions or gaps.

Kerning fixes awkward appearances.

The space between two pairs of letter.

Example:
KERNING
Certain combinations appear too close to or far from each other
when typeset by default. Such pairs are common with letter-
forms that combine with T, V, W, and Y—for example Ty, Va, Wi,
and Ye.

Numerals, notably 1, often need kerning to bring others closer to

or farther from them. Slivers of space around punc- tuation like
em dashes (—) and backslashes (/) set well with attentive tunings.
KERNING

A well-designed typeface has considered kerning pairs, which ease

typesetting because quality spacing is inherent. Still, regardless of
the typeface strength, manual adjustments can be required.
Body (9 to 14 point) and caption (6 to 8 point) styles typically
need less notice than display styles (24 point and up) because
space between characters grows at large type sizes.
KERNING
Attentive typesetting will eliminate unwanted collisions or gaps
that distract.

Kerning adjusts the slivers of space between characters. Such fixes

are common with letterforms next to T, V, W, and Y.

Kerning finesses type for best

presentation.
TRACKING
Tracking affects overall spacing of words, lines, and paragraphs
to enhance readability. Uppercase settings (full and small caps) and lining
numeral sequences rely on open tracking for recognition.
Lowercase settings typically need little to no tracking because of their
variation in shape.
Condensed typefaces with narrow proportions and counters in upper and
lower- case can often benefit from slight tracking. Avoid tracking paragraphs
or continuous text. Words, lines, and paragraphs loosely, tightly, or
negatively tracked look spotty
and no longer read as intended.
KERNING AND TRACKING
Kerning Tracking
Space between two pairs Adjustment of spacing of large
of letters. section of type.

• Anne • Anne
• A nne • Anne
• A nne • A n n e
 “Don’t Stop Learning
This is just the beginning. Typography is about
bringing these basic elements together to form
a coherent, robust design. It may take a while
for you to develop your skills in typography, but
with patient practice and constant vigilance,
you’ll master it in no time.”
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://webdesign.tutsplus.com/articles/understanding-typographic-hierarchy--
webdesign-11636
END OF MODULE
 Module 5
TYPOGRAPHY AND LAYOUT
• Baseline Alignment
• Grid System
• Alternate Method
• Color Harmony
• Matching Colors
• Composition
01 Subtopic 1

Structure
STRUCTURE
Structure shapes typographic compositions and offers designers
creative potential. Used to order, connect, and balance, structure
helps designers build rational layouts. Harmony follows with
clarity and aesthetic grace. Viewers engage in and navigate works
without distraction.

Structural systems are mathematic, mechanical, intuitive, and

organic.
Baseline Alignment
BASELINE
Baselines are imaginary lines on which letterforms, words, lines,
and paragraphs sit.

Baseline alignment refers to a calculated system of horizontal

guides at equally spaced vertical intervals that underlie
typographic layouts.

Baselines enable consistent horizontal alignment across

compositions.
BASELINE
Baseline alignment helps
achieve them. Body text
leading (the vertical distance
from one baseline to the
next measured in points)
typically regulates baseline
intervals.
Grid System
GRID SYSTEM
Grid systems are vertical and horizontal divisions of space that
structure compositions.

Grids promote clarity and consistency and make designing with

type efficient. They help designers organize information and
users navigate layouts.
GRID SYSTEM
A Grid is the division of a page into a design on which text,
figures, or white space are placed in order to design a page.

As you begin to learn about using design elements, it is best to

think of the page as a grid.
BASIC GRID
ANATOMY
Columns are vertical guides that
split space into segments. Framed by
margins, columns divide the active area
and offer positioning options. Single-
column grids are best suited for works
with continuous text. Multiple-column
grids serve projects with many
typographic variables and elements,
such as illustrations or photographs
BASIC GRID
ANATOMY
Gutters are thin channels of white space
that separate columns and rows.
Their size typically equals body- text
leading or the baseline alignment
interval. Gutters prevent collision
when elements juxtapose.
BASIC GRID
ANATOMY
Flowlines (hang lines) are limited
horizontal guides that indicate where
key elements rise or hang. For instance,
one flowline might set the consistent
starting position of body text; another
might define the heading location.
BASIC GRID
ANATOMY
Margins define the active compositional
area where typographic elements dwell.
They are a buffer between live content
and format edges. Margins also deliver
essential white space (or breathing room)
that frames layouts and directs the eye
to positive areas.
BASIC GRID
ANATOMY
Modules are active spaces occupied by
elements and white space, which fill
single modules or cross many.
Modules are square or rectangular,
with horizontal or vertical stress
(wide versus tall). A set of modules
forms a spatial zone.
GRID SYSTEM
Parts like columns and modules, gutters and margins can be
combined in different ways to form distinct types of grids.

Here are the 4 grid types and when you might use each.
•Manuscript grid
•Column grid
•Modular grid
•Hierarchical grid
GRID SYSTEM
Manuscript Grid
Sometimes called a block grid or single column grid, the manuscript grid is the simplest
grid structure. It’s mainly a large rectangular area taking up most of the space inside a
format.

The primary structure is defined by large text blocks and margins, which position the
block within the format. Its secondary structure defines the location and proportions of
folios, footnotes, running headers, and other secondary information.

Manuscript grids are good for extensive and continuous blocks of text. They’re used in
books and long essays and perhaps lend themselves well to blog posts. They aren’t
limited to text though. Images can be used to fill the block.
GRID SYSTEM
By adjusting the margins designers can help create interest. More
opportunity for this exists where two page spreads are used as in
magazines or books, but even on a single page interest can be created
through margins alone.
Wider margins — lead to narrower text blocks, which helps focus the
eye on the text and creates a sense of calm and stability.
Narrower margins — force the text block to the edge of the format
creating tension as the two near each other.
GRID SYSTEM
•Asymmetrically placed text blocks add visual interest and leave a larger
block of whitespace on one side to allow the eye to rest.
•Because of the simplicity of manuscript grids, typography plays an
important role in creating visual interest. Your choice of typeface, font-size,
leading, measure, hierarchy, etc will make up most of your design choices.
•Designers typically center these layouts, but with the above ideas in mind
perhaps there are better places to locate your layout.
GRID SYSTEM
Column Grids
• When people think of grids, especially online, they likely think of column grids. As
you would expect column grids are made up by placing multiple columns within the
format.
• Column grids are good when discontinuous information needs to be presented.
• For example you might have various asides, pull quotes, etc in your design, which
can occupy different columns in the grid. One column might be reserved for text,
another for images, and yet another for image captions.
• Columns can be dependent on each other, independent from each other, and
crossed over by design elements. This leads to a large amount of flexibility
when organizing information on the page.
GRID SYSTEM
• A column should be able to accommodate a comfortable measure for reading and
avoid excessive hyphenation at the end of lines. Too wide or narrow a column and
reading becomes difficult.

Column Gutters
• When the margins are wider than the gutters between columns the eye is guided
inward and tension is eased. When margins are narrower than gutters the eye is
directed outward and more tension is present.
• There are no hard rules, but traditionally if the size of the gutter is x the margin is
usually set to be 2x.
COLUMN GRIDS
Single-column grids are simple structures suited for works with continuous text
(running paragraphs).

Examples include journals and novels. Such frame- works also serve text-rich websites,
such as blogs. Single-column grids are devoted to framing a text block.

Margins—left and right, top and bottom, inner and outer (for spreads)—define the
active area and provide white space. Margin size varies per text and project dimensions
COLUMN GRIDS
Multiple-column grids range from two-column structures to intricate varieties with
eight, twelve, sixteen, and more spatial divisions.

They are fit for projects across mediums with diverse text and factors, such as images,
charts, and tables.

Creating multiple-column grids follows simple steps that adapt per project and
designer preference.
COLUMN GRIDS
Modular grids are suitable for multifaceted projects
in any medium.

They have equally distributed spatial modules vertically and horizontally—a precise
system of columns and rows.

Modules are active spaces in which type and elements such as illustrations and
photographs reside.
COLUMN GRIDS
Building modular grids starts with dividing
the compositional space
in half vertically. Proceed horizontally.
Subdivide space equally until a desired
module proportion and quantity forms that
best supports content. Add intervals called
gutters between modules to separate them
ALTERNATE METHOD
Alternate methods offer compositional options beyond
traditional grids. The lack of preset spatial divisions nurtures
intuition and experimentation. Inspired by improvisation, axiality,
and geometry, alternate methods best suit projects with limited
text—letterforms, words, and lines; paragraphs
or multiple-page sequential formats can pose challenges.
ALTERNATE METHOD
ALTERNATE METHOD
The axis is a guide. It provides immediate alignment edges and
points for type.

Using a single axis, or a relationship between two axes, offers

composition methods pertinent to works with limited text.

A simple typographic structure develops by placing one line—an

axis— in a composition.
EXAMPLE
A central axis structures the print for
The Tunnel, Foolproof Four, and
Word. Ornamental typefaces
Mesquite and Bordeaux create
ambiance. A symmetrical layout with
limited text that expresses proper
mood and apt typesetting does
not need structural complexity to be
successful.
ALTERNATE METHOD
Geometric shapes such as circles, rectangles, or squares inspire a
third variety of alternate structure and composition methods.
With more complexity than improvised or axial plans, type can
rotate concentrically around circles, extend from arcs, or wrap
around edges of squares.
02 Subtopic 2

Typography in
Contrast, Color,
and Composition
Contrast and Color
CONTRAST
Contrast is a visual technique, tool, and concept that is vital to
visual communication in intensifying meaning.

The principle of contrast states that visual elements on a page

should look distinctly different from one another. It is used to add
visual variety to your layouts and to keep everything on the page
from looking alike. Contrast takes up where emphasis leaves off by
really stressing the visual difference between words and phrases
and graphics.
CONTRAST

Typographic contrast can be clear and exaggerated or nuanced and

subtle. In typography, contrast occurs in the structure, color, tone,
and scale of letter forms.
COLOR
Color is one of the most important decisions to make in
differentiating your brand while, at the same time, making
the right first impression.

Most people are visual creatures and they rely on color to an

extraordinary degree
COLOR
Color science and theory is a remarkably complex field. The graphics
included below, though, can offer valuable insight into the world of color,
including how to effectively create color palettes and what colors
mean.

Basic Color Relationships

This infographic gives all the basic information you need to know about
color theory. It includes terms, the way RGB and CMYK work, and
meanings of different colors, as well as a color wheel the illustrates
warm and cool colors.
COLOR
Color science and theory is a remarkably complex field. The graphics
included below, though, can offer valuable insight into the world of color,
including how to effectively create color palettes and what colors
mean.

Basic Color Relationships

This infographic gives all the basic information you need to know about
color theory. It includes terms, the way RGB and CMYK work, and
meanings of different colors, as well as a color wheel the illustrates
warm and cool colors.
COLOR
Color Basics
Remember learning about primary and secondary colors

Secondary colors are created by combining two primary colors. Red

and yellow make orange; yellow and blue make green; and blue and
red make purple.
COLOR
Avoid Common Mistakes
Colors that seem to vibrate when they're placed next to each other

The solution is to tone it down—

literally—and there's a simple way do
it. Start with one color, and try
adjusting its lightness, darkness,
or saturation. Sometimes a little
contrast is all your color palette needs.
COLOR
Readability
Readability is an important factor in any design. Your colors should
be legible and easy on the eyes, especially when working with text.

Sometimes that means NOT using

color—at least not in every little
detail.
Neutral colors like black, white, and gray can help you balance your
design, so when you do use color, it really stands out.
COLOR
Choosing the right colors
Every color sends a message. It's important to consider the tone of
your project, and choose a color palette that fits.

For example, bright colors tend to have

a fun or modern vibe.
COLOR
Desaturated colors
Desaturated colors often appear more serious or businesslike.

Sometimes it just depends on

the context. With practice and
creativity, there's no limit to what you
can do.
COLOR
Putting it all together
Everywhere you look, there's color, color, and more color. It can be
intimidating to use it in your work, but it doesn't have to be.
Just keep experimenting, and remember what you've learned about color
theory.
Soon, choosing great-looking
colors will feel like second nature.
Composition
COMPOSITION
It is plan and organization of typographic elements. Key
considerations include spatial positioning and relationship-building
among elements and spaces

It is the compositional body, in which designers order, connect, and

balance type. It is the first impression that engages viewers.
Without immediate visual interest, communication ceases; the
intended typographic messages are not received.
COMPOSITION
Manipulating Feelings And Reactions
The visual language established when designing with type can bring into play
not only emotions, but also physical responses.

Making The Most Of Visual Language

Verbal language is often used to inspire and shape design and typography in
order to get a message across, with the goal being to make the most of the
viewer’s reaction. Carefully mixing a design’s implication with literal meaning
can lead to a memorable outcome.
COMPOSITION
Rules of design composition in typography and layout
• Use the Grid System
Grids bring organization not only to the design, but to the process of creating
design.
• Emphasis and Scale
Figuring out the focal point of the design will give your eye the guide it requires to
structure the composition, as well as organically build hierarchy.
• Rule of Odds
The Rule of Odds says that pleasing compositions seem to often have an odd
number of elements placed in the foreground, most commonly three. The two objects on
the outside both balance the focal point in the center, creating a simple, natural balance.
COMPOSITION
Rules of design composition in typography and layout
• Balance
Keep in mind that in terms of composition, white space (or negative
space) is also an element. White space gives our eyes paths to follow through
the design. Give each element on the page some space to breathe and
balance between positive and negative space will emerge organically.
• Rule of Thirds
The Rule of Thirds is inescapable in design. It’s a fundamental guideline that’s so
simple and effective, it often feels like a cheat: divide your design into three rows and
three columns. The points where the vertical and horizontal lines meet form natural
guidelines for where you should place your subject and supporting elements.
 “Don’t Stop Learning
This is just the beginning. Typography is about
bringing these basic elements together to form
a coherent, robust design. It may take a while
for you to develop your skills in typography, but
with patient practice and constant vigilance,
you’ll master it in no time.”
Kristin Cullen (2020). Design Elements Typography Fundamentals: a Graphic Style
Manual for understanding how typography affects design, Beverly: Rockport
Publishers.

https://sheilaaachan.files.wordpress.com/2012/04/sidewalk_modular_grid_02.png

http://www.designersinsights.com/designer-resources/using-layout-grids-effectively
END OF MODULE
 Module 6
TYPOGRAPHY AND LAYOUT
• To define different Layout Design Theories
• To know about different Methodologies in Layout
01 Subtopic 1

Layout design
Theories
LAYOUT

Layout is the universal design tool. It’s the presentation. To

layout a page, means to use type and graphics and space, to
create story , and voice, and engagement.
LAYOUT
Layout in graphic design deals with the arrangement of
visual elements so as to achieve specific communication
objectives.

When designing, the graphic designers should rely on the

required information to present the layout properly, such as
rotating and resizing the images, which requires time and efforts.
In order to be able to design quickly, it is necessary to plan the
layout in advance to save time and create a consistent look for
your design.
LAYOUT
Two main kinds of Layout
1. Grid Layout
Grid is structure. It’s a set of horizontal and vertical guides
that govern or at least guide where the elements go.
This is the simplest grid that you use for a letter, a white
paper, a report, data; just a single sheet typically one column
that you fill with text and perhaps a head and subheads.
LAYOUT
Two main kinds of Layout
2. Free-form Layout
It starts with a blank page and grows more organically.
There’s not a preset structure. It’s fluid. The look of the layout
uniquely conveys the content of the layout.
LAYOUT
The advantages of layout in graphic designs
Layout is important in graphic designs therefore it must meet
some requirements about proportion, sequence, emphasis,
consistency of elements, etc on the purposes below:
•Helping the layout of the page become harmonious from fonts, colors, backgrounds,
etc.
•Helping to streamline the site’s overall rationale, making it easy for readers to
receive information.
•Helping the reader to grasp the essence of the article and focus on the main content.
•Making the unification of the elements on your page to convey information
accurately without breaking the segment.
PAGE LAYOUT

Page layout is the process of placing and arranging and

rearranging text and graphics on the page to produce
documents such as poster, newsletters, brochures, books, etc.
GESTALT PRINCIPLES
Gestalt is a psychology term which means "unified whole". It refers
to theories of visual perception developed by German psychologists
in the 1920s. It is derived from the German Ungesalt (deformity or
misshapen).

In graphic design, it is used to describe how a design is not a single

element, but a combination of different elements or forms that work
together in a particular configuration.
GESTALT PRINCIPLES
These theories attempt to describe how people tend to organize
visual elements into groups or unified wholes when certain principles
are applied.
These principles are:
• Similarity
• Continuation
• Closure
• Proximity
• Figure and Ground
GESTALT PRINCIPLES
Similarity
Similarity occurs when objects look similar to one another. People
often perceive them as a group or pattern.

When similarity occurs, an object can be emphasized if it is

Unity occurs because the triangular shapes at the bottom of
dissimilar to the others. This is called anomally. The figure on
the eagle symbol look similar to the shapes that form the
the far right becomes a focal point because it is dissimilar
sunburst.
to the other shapes.
The more alike objects appear, the more likely they are to be seen as a group. Note that
similarity is based upon what an object looks like, not what an object is. Two dogs on a
page do not automatically have similarity because they are dogs. One could be a
Labrador and the other a Pomeranian—dogs that have very little in common.
However, similarity would be created if both were brown and wearing red collars.
Similarity can be achieved in many different ways, including size, color and shape.
GESTALT PRINCIPLES
Continuation
Continuation occurs when the eye is compelled to move through one
object and continue to another object.

Continuation occurs, because the viewer's eye will naturally

follow a line or curve.
The smooth flowing crossbar of the "H" leads the eye directly
to the maple leaf.
This symbol indicates that a viewer should follow the line to the end
to see where the arrow is pointing. Symbols and objects that are
similar to arrows, such as a hand with a pointing finger, are used
frequently in design to create continuity.
Other ways to lead the eye include a photograph or illustration containing an eye. A common
design rule is that if an image of a person is used, make sure the person is looking toward the
rest of the design.
 This helps the viewer move through the information instead of looking off the edge of the page,
turning away from the information. A designer can also create a path through the page, either literally
or figuratively.
GESTALT PRINCIPLES
Z-PATTERN: Z, from Zigzag pattern, begins at
the upper left, moves to the right and then
down to the lower left and on to the lower
right.

This pattern duplicates the usual reading

pattern of texts, which is why, designs with
this pattern is easy for readers to follow.
GESTALT PRINCIPLES
Closure
Closure occurs when an object is incomplete or a space is
not completely enclosed. If enough of the shape is indicated, people
percieved the whole by filling in the missing information.

Although the panda above is not complete, enough is

present for the eye to complete the shape. When the
viewer's perception completes a
shape, closure occurs.
The designer must strike a balance between what is taken away and what remains. The mind cannot
complete the object if too much of it is missing. Closure can be found quite often in paintings, mosaics and
sculptures through the ages. Classical artists have long recognized the ability of the mind to fill in the blanks.
GESTALT PRINCIPLES
Proximity
Proximity occurs when elements are placed close together. They tend
to be perceived as a group.

The nine squares above are placed without proximity.

They are perceived as separate shapes. The nine squares above are placed
without proximity. They are perceived
as separate shapes.
GESTALT PRINCIPLES
Figure and Ground
The eye differentiates an object form its surrounding area. a form,
silhouette, or shape is perceived as figure (object), while the
surrounding area is perceived as ground (background).
Balancing figure and ground can make the perceived image more
clear. Using unusual figure/ground relationships can add interest and
subtlety to an image.
Figure/ground can be used quite creatively when both the figure and ground form recognizable
shapes at the same time. There are many examples of this, one of the most common being the
optical illusion of two opposing faces on opposite sides of the page with the negative space in
between them forming a lamp, spindle or another recognizable shape.
PROPORTION
Proportion is the visual or structural relationship between part of an
item to the whole, such as the relationship between the size of the
text boxes to the overall page, for example. Proportion is a useful
tool for achieving a balanced layout by helping to define the size
relationship that governs the different design elements, such as their
relative size and spacing.
02 Subtopic 2

Layout
Methodologies
METHODOLOGIES
•There is prescriptive method to layout design and it is often the
variance that comes from using different methods that results in
innovative design.

•‘Breaking the mould’ essentially means using a different approach

or methodology to arrive at a different design solution, whether this
design is for packaging, book covers, web pages, furniture or interior
spaces.
METHODOLOGIES
Ultimately, all designers work towards specific goals and several
methodologies have been developed for use in design, whether the
ultimate aim is to produce a magazine spreads or a chair.
METHODOLOGIES
Featured below are various methodologies that can be used as a
starting framework for producing a design.
•TIMTOWDI
•Lateral Thinking
•Occam or Ockham’s razor
•KISS
•Bottom Up
•Top Down
METHODOLOGIES

TIMTOWDI
There is more than one way to do it (TIMTOWDI pronounced
as Tim Toady) follows the belief that a problem may have several
different, but equally valid solutions.
METHODOLOGIES
Lateral Thinking
Lateral thinking is a design approach that looks to change concepts and perception in order
to arrive at different solutions by looking for what is not immediately obvious, and solutions
that may not be obtainable using traditional step-by-step logic
METHODOLOGIES
Occam or Ockham’s razor
Occam's razor is a problem-solving principle that, when
presented with competing hypothetical answers to a problem,
one should select the one that makes the fewest assumptions.
The idea is attributed to William of Ockham
METHODOLOGIES
KISS
The KISS (keep it simple, stupid) principle highlights the fact that
simplicity is a desirable objective in producing effective design.
For example, during the Cold War, while NASA spent a vast amount of money
to develop a pen that astronauts could use in zero gravity, Russian cosmonauts
simply used a pencil.
METHODOLOGIES
BOTTOM UP
Bottom-up investing begins its research at the company level but
does not stop there. These analyses weigh company fundamentals
heavily but also look at the sector, and microeconomic factors as
well. As such, bottom-up investing can be somewhat broad across
an entire industry or laser-focused on identifying key attributes..
METHODOLOGIES
TOP DOWN
Top-Down analysis generally refers to using comprehensive factors
as a basis for decision making. The top-down approach will seek to
identify the big picture and all if its components. These
components will usually be the driving force for the end goal.
https://cios233.community.uaf.edu/design-theory-lectures/fundamentals-of-design-
basic-elements/

https://www.skillshare.com/classes/Layout-Design-Theory-Create-Strong-
Designs/1517566094/projects
END OF MODULE
 Module 7
TYPOGRAPHY AND LAYOUT
• To define different Visual Identity and Promotional Design
• To know about User Interface Design
01 Subtopic 1

Visual Identity and

Promotional Graphics
What is Graphic Design?
GRAPHIC

Relating to the written or printed word or the symbols or

devices used in writing or printing to represent sound or convey
meaning.
DESIGN

• To create, fashion, execute, or construct according to plan.

• The arrangement of elements or details in a product or work of art.

• The creative art of executing aesthetic or functional designs.

GRAPHIC DESIGN
Graphic Design the art or profession of using design elements to
convey information or create an effect.

It uses visual compositions to solve problems and communicate ideas

through typography, imagery, color and form. There’s no one way to do
that, and that’s why there are several types of graphic design, each with
their own area of specialization
GRAPHIC DESIGN
There are several types of graphic design, each with their own
area of specialization though they often overlap, each type of
graphic design requires specific set of skills and design
techniques. Many designers specialize in a single type; others
focus on a set of related, similar types. But because the industry
is constantly changing, designers must be adaptable and lifelong
learners so they can change or add specializations throughout
their careers.
Types of Graphic Design
VISUAL IDENTITY GRAPHIC DESIGN
Visual identity graphic design is exactly that: the visual
elements of brand identity that act as the face of a brand to
communicate those intangible qualities through images, shapes
and color.

A brand is a relationship between a business or organization and

its audience. A brand Identity is how the organization
communicates its personality, tone and essence, as well as
memories, emotions and experiences.
VISUAL IDENTITY GRAPHIC DESIGN

Designers that specialize in visual identity graphic design collaborate with brand stakeholders to create assets
like logos, typography, color palettes and image libraries that represent a brand’s personality. In addition to
the standard business cards and corporate stationary, designers often develop a set of visual brand guidelines
(style guides) that describe best practices and provide examples of visual branding applied across various
media. These guidelines help to ensure brand consistency throughout future applications.
VISUAL IDENTITY GRAPHIC DESIGN

Visual identity design is one of the most common types of design. Visual identity graphic designers must
possess a general knowledge of all types of graphic design in order to create design elements that are suitable
across all visual media. They also need excellent communication, conceptual and creative skills, and a passion
for researching industries, organizations, trends and competitors.
MARKETING GRAPHIC DESIGN
Marketing graphic design is all about communicating and
promoting a brand's products or services in a visually appealing
way. Not only that, but all the materials created need to adhere
to the company's visual identity.

Through marketing, you create interest in your brand, and

design helps you visually communicate your brand.
MARKETING GRAPHIC DESIGN
Designers can specialize in a specific type of media (vehicle
wraps or magazine ads, for example) or create a broad
assortment of collateral for print, digital, and beyond. While
traditionally print-centered, this type of design has grown to
include more digital assets, especially for use in content
marketing and digital advertising.
MARKETING GRAPHIC DESIGN
3 Top Benefits of Great Marketing Graphic Design
• Increases conversions. Beautiful marketing design has the potential of
motivating people to take action by providing a clear, easy path to
conversion.
• Builds trust. Great design can reduce the anxiety that people may have
towards converting. This can be done by addressing the fears and
concerns someone may have around the product or service you’re
advertising for. For example, you can talk about the type of material
the product is made out of, whether people can return it, or if they can
test it out in person before buying it.
 Marketing designers need excellent communication, problem-solving and time
management skills.
In addition to being proficient in several graphic design, layout and presentation
apps, they must also be familiar with production for print and online
environments.
MARKETING GRAPHIC DESIGN
3 Top Benefits of Great Marketing Graphic Design
• It provides an incentive. To encourage consumers to use your product
or service, it helps if you showcase them in context. More specifically,
your audience needs to see how you can help them fix a problem
they’re having or how it can bring them joy. By viewing the product in
context, a person can visualize much more quickly whether it can work
for them and their current lifestyle.
MARKETING GRAPHIC DESIGN
Marketing Graphic Design Tips
• Know your Audience
• Ensure Readability
• Complement Colors
• Simplify Photos
• Embrace White Spaces
ADVERTISING GRAPHIC DESIGN
Advertising design require a more strategic approach
rather than creative.

•Ad designs can be fun but it must look professional.

•Must include a benefit to the product or service.
•Ad designs are created as a sales tactic and is used for that purpose only.
ADVERTISING GRAPHIC DESIGN
Advertising design take various things into consideration before
starting a project:

•Market research and positioning

•Value Proposition
•Project Scope
•Consumer Research
ADVERTISING GRAPHIC DESIGN
Advertising design take various things into consideration before
starting a project:

•Market research and positioning

is an informal way to really get an idea of how the customer “feels” about
your company and brand. It's not necessarily about who they're going to
use, or who has the best products, services, and pricing.
ADVERTISING GRAPHIC DESIGN
Advertising design take various things into consideration before
starting a project:

•Value proposition
is a promise of value to be delivered, communicated, and
acknowledged. It is also a belief from the customer about how value
(benefit) will be delivered, experienced and acquired.
A value proposition can apply to an entire organization, or parts thereof,
or customer accounts, or products or services
ADVERTISING GRAPHIC DESIGN
Advertising design take various things into consideration before
starting a project:

•Project scope
is described on the basis of activities included under advertising and
their forms and systems, objectives and functions. Including:
Message—which has been discussed earlier.
Media—has also been discussed in detail.
Merchandise—It is the buying and selling of the product-advertisement covers the attributes of the product to
be sold.
ADVERTISING GRAPHIC DESIGN
Advertising design take various things into consideration before
starting a project:

•Consumer research
is the research done on consumers’ preferences, attitudes,
loyalty, usage and behavior in a market. It helps in understanding
customers so that the marketing campaigns can be designed
accordingly.
ADVERTISING GRAPHIC DESIGN
Advertising design does not focus on the technical aspect of
design. So, their intentions for ads are to introduce a beneficial
product or service and convert customers.

•Create designs for a call-to-action plug

•Ads are used as a communication tool to consumers for their product or
service
•Advertising will be based for more on TV, radio, social media and other
forms of media, including copywriting
ADVERTISING GRAPHIC DESIGN
Advertising design work towards a more direct sales shove in
their effort. So, their style will not be as fancy as graphic design.

•The focus is not on design, but the message. The attention is on an

effective headline
•An ad will include a bolded offer behind everything
•Advertising design may involve a more traditional marketing route and
use: posters, billboards, or print ads
02 Subtopic 2

User Interface
Graphic Design
USER INTERFACE GRAPHIC DESIGN
A user interface (UI) is how a user interacts with a device or
application. UI design is the process of designing interfaces to make them
easy to use and provide a user-friendly experience.

A UI includes all of the things a user interacts with—the screen, keyboard

and mouse—but in the context of graphic design, UI design focuses on the
user’s visual experience and the design of on-screen graphic elements
like buttons, menus, micro-interactions, and more. It’s a UI designer’s job
to balance aesthetic appeal with technical functionality.
UI designers specialize in desktop apps, mobile apps, web apps
and games. They work closely with UX (user experience)
designers (who determine how the app works) and UI
developers (who write code to make it work).
USER INTERFACE GRAPHIC DESIGN
Examples of user interface graphic design:
•Web page design
•Theme design (WordPress, Shopify, etc.)
•Game interfaces
•App design

UI designers must be team players backed by both serious graphic design skills and an
excellent understanding of UI/UX principles, responsive design and web development. In
addition to graphics apps, they need knowledge of programming languages like HTML, CSS
and JavaScript.
Dabner, D. (2017). Graphic design school : the principles and practice of graphic design. Abbie, Vickress , Sandra, Stewart . -- Hoboken, New
Jersey : Wiley

https://99designs.com/blog/tips/types-of-graphic-design/

https://www.merriam-webster.com/dictionary/design

https://penji.co/difference-between-advertising-design-and-graphic/

https://blog.bannersnack.com/marketing-design/

https://en.wikipedia.org/wiki/Value_proposition

https://surveymethods.com/how-to-conduct-positioning-research/

https://www.mbaskool.com/business-concepts/marketing-and-strategy-terms/10538-consumer-research.html
END OF MODULE
 Module 8
TYPOGRAPHY AND LAYOUT
• To know the difference between Publication graphic
design, Packaging graphic design, Art and Illustration for
graphic design
01 Subtopic 1

Publication Graphic
Design
PUBLICATION GRAPHIC DESIGN
The practice of layout and graphic design for printed
matter.

Publications are long-form pieces that communicate with an

audience through public distribution. They have traditionally
been a print medium.
PUBLICATION GRAPHIC DESIGN
Publication design is a classic type of design—think books,
newspapers, magazines and catalogs. However, there’s recently
been a significant rise in digital publishing.

Publication designers must possess excellent communication,

layout and organizational skills. In addition to graphic design
expertise, they need to understand color management, printing
and digital publishing.
PUBLICATION GRAPHIC DESIGN
E-Publishing Also known as electronic publishing; an
actively growing publishing market. The act of e-publishing
occurs when content written by authors is distributed to
electronic devices via the Internet.
PUBLICATION GRAPHIC DESIGN
Examples of Publication Graphic Design
• Books
• Newspapers
• Newsletters
• Directories
• Annual reports
• Magazines
• Catalogs
02 Subtopic 2

Packaging and
Illustration for
Layout
PACKAGING GRAPHIC DESIGN
It is the design and creation of a product's container and how it looks to
consumers who might purchase it. That is why you typically see a cartoon character on
a cereal geared towards children, while adult cereals may have fresh fruit displayed on
the box. Not only does packaging design promote a product, it also serves to help
protect and prolong the contents as well.

Most products require some form of packaging to protect and prepare them for
storage, distribution, and sale. But packaging design can also communicate directly to
consumers, which makes it an extremely valuable marketing tool. Every box, bottle and
bag, every can, container, or canister is a chance tell the story of a brand.
PACKAGING GRAPHIC DESIGN
Packaging design is the connection of form, structure, materials, color, imagery,
typography, and regulatory information with ancillary design elements to make a
product suitable for marketing.

Its primary objective is to create a vehicle that serves to contain, protect,

transport, dispense, store, identify, and distinguish a product in the marketplace.
Ultimately, the goal of a packaging design is to meet marketing objectives by
distinctively communicating a consumer product's personality or function and
generating a sale.
PACKAGING GRAPHIC DESIGN
Packaging designers create concepts, develop mockups and create the
print-ready files for a product.
ART AND ILLUSTRATION GRAPHIC
DESIGN

An illustration graphic design is a decoration, interpretation or

visual explanation of a text, concept or process, designed for integration in
published media, such as posters, flyers, magazines, books, teaching
materials, animations, video games and films.
ART AND ILLUSTRATION GRAPHIC
DESIGN

Graphic art and illustration are often seen as being the same as
graphic design, however they’re each very different. Designers create
compositions to communicate and solve problems, graphic artists and
illustrators create original artwork. Their art takes a number of forms,
from fine art to decoration to storytelling illustrations.
ART AND ILLUSTRATION GRAPHIC
DESIGN
Examples of Art and Illustration Graphic Design
• T-shirt design • Comic books
• Graphic patterns for textiles • Album art
• Motion graphics • Book covers
• Stock images • Picture books
• Graphic novels • Infographics
• Video games • Technical illustration
• Websites • Concept art
Dabner, D. (2017). Graphic design school : the principles and practice of graphic design. Abbie, Vickress , Sandra, Stewart . -- Hoboken, New Jersey
: Wiley

https://99designs.com/blog/tips/types-of-graphic-design/

https://study.com/academy/lesson/packaging-design-definition-examples.html

https://www.oreilly.com/library/view/packaging-design-successful/9781118358603/chap02-sec001.html

https://en.wikipedia.org/wiki/Illustration
END OF MODULE
 Module 9
TYPOGRAPHY AND LAYOUT
01 Subtopic 1

Motion Graphic
Design
MOTION GRAPHIC DESIGN
Motion graphic design is a subset of graphic design in that it uses
graphic design principles in a filmmaking or video production context (or
other temporally evolving visual media) through the use of animation or
filmic techniques.

Examples include the kinetic typography and graphics used in film and
television opening sequences, and the spinning, three-dimensional station
identification logos of some television channels. The art form has been
around for decades and has advanced in technical sophistication over
time.
MOTION GRAPHIC DESIGN
Simply put, motion graphics are graphics that are in motion. This
can include animation, audio, typography, imagery, video and other effects
that are used in online media, television and film.

Motion graphic design is often used in the film industry. Openings

to movies, television shows, and news programs can use photography,
typography, and motion graphics to make the introduction. Motion
graphic design has also achieved widespread use in content marketing and
advertising.
MOTION GRAPHIC DESIGN
One of the leading computer programs used by modern motion
graphic designers has been Adobe After Effects, which allows the user to
create and modify graphics over time. Another relatively recent product
used in the market is Apple Inc. Motion, now a part of Final Cut Studio.
Software such as Maxon Cinema4D has integrated tools to create motion
graphics

Adobe Flash has also been widely used to create motion graphic design,
particularly for the web, where it is sometimes used in web design.
MOTION GRAPHIC DESIGN
Videos can achieve success no matter what kind of story you want
to tell.

Yet the intended effect of nearly all motion graphics can be distilled into 3
main categories. Whether you want to motivate the audience to take
action; describe the details of your company, product, or service; or drive
sales first and foremost, there’s a type of motion graphic best suited for
your story.
MOTION GRAPHIC DESIGN
THE 3 TYPES OF MOTION GRAPHICS

• EMOTIVE VIDEOS MOVE THE AUDIENCE TO FEEL

SOMETHING
The primary aim of these videos is to elicit a powerful,
emotional response from the viewer. This could be a
positive or negative experience, depending on the root
of your story. Regardless, upon watching your video, a
viewer should be driven by that emotion to take a
specific action.
MOTION GRAPHIC DESIGN
THE 3 TYPES OF MOTION GRAPHICS

• EXPLAINER VIDEOS HELP DEFINE A CONCEPT,

PRODUCT, OR SERVICE
To simplify a concept, explainer videos distill the
essence of that concept into a clear picture. This
approach is often the right choice when your story is
highly detailed, technical, or involves many steps to
complete or explain.
MOTION GRAPHIC DESIGN
THE 3 TYPES OF MOTION GRAPHICS

• PROMOTIONAL VIDEOS HELP SELL A PRODUCT,

SERVICE, OR EVENT
Driving conversions is the ultimate goal for a
promotional video. This type of video or motion graphic
is often more recognizable as a sales piece than the
other categories. Any details that help motivate a viewer
to a purchase decision should be positioned front and
center in these videos.
MOTION GRAPHIC DESIGN
THE MAKING OF A MOTION GRAPHIC

The process of creating a motion graphic is multifaceted, but

every step has a key purpose that contributes to a successful
end product.
MOTION GRAPHIC DESIGN
ESSENTIALS SKILLS IN CREATING MOTION GRAPHIC
• Graphic Design Skills • An Understanding of Color Theory
• Traditional Art Skills • Creative Thinking
• An Understanding of Animation • Technical Skills
• 3D Design Skills • Interpersonal Communication
• An Understanding of Typography • Originality
MOTION GRAPHIC DESIGN
EXAMPLES OF MOTION GRAPHIC DESIGN
•Title sequences and end credits •Tutorial videos
•Advertisements •Websites
•Animated Logos •Apps
•Trailers •Video games
•Presentations •Banners
•Promotional videos •GIFs
02 Subtopic 2

Environmental
Graphic Design
ENVIRONMENTAL GRAPHIC DESIGN

Environmental graphic design visually connects people to places to

improve their overall experience by making spaces more memorable,
interesting, informative or easier to navigate. Environmental design is a
broad type of design
ENVIRONMENTAL GRAPHIC DESIGN

Environmental Graphic Design (EGD) embraces many design

disciplines including graphic, architectural, interior, landscape, and
industrial design, all concerned with the visual aspects of wayfinding,
communicating identity and information, and shaping the idea of creating
experiences that connect people to place.
ENVIRONMENTAL GRAPHIC DESIGN

Traditionally, environmental graphic

design has produced static print pieces,
but digital interactive displays continue
to rise in popularity as a means
of creating a more engaging experience.
Wayfinding is a specific type of environmental
graphic design that consists of strategic signage,
landmarks and visual cues that help people identify
where they are and where they need to go so they
can get there without confusion.
ENVIRONMENTAL GRAPHIC DESIGN
EXAMPLES OF ENVIRONMENTAL GRAPHIC DESIGN
•Signage
•Wall murals
•Museum exhibitions
•Office branding
•Public transportation navigation
•Retail store interiors
•Stadium branding
•Event and conference spaces
Dabner, D. (2017). Graphic design school : the principles and practice of graphic design. Abbie, Vickress , Sandra, Stewart . -- Hoboken, New Jersey
: Wiley

https://99designs.com/blog/tips/types-of-graphic-design/

https://en.wikipedia.org/wiki/Motion_graphic_design

Everything You Need to Know About Becoming a Motion Graphics Designer. www.rasmussen.edu. Retrieved 2020-02-04.

eBook: 3 Types of Motion Graphics to Enhance Your Content Strategy. Killer Visual Strategies. Retrieved 2020-02-04.

https://killervisualstrategies.com/blog/motion-graphics-video-guide-marketers-brand-leaders.html

https://segd.org/article/what-environmental-graphic-design-egd
END OF MODULE