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