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