Typography

A Few Basics
 Mechanical refers to the Notation refers to Language embraces
science of machines, a graphic system of both spoken and written
the precise automatization documentation using a codes: groups of sounds
of a task working symbolic code. In this which form words;
through a structured context, that code is arrangements of words
process towards a the Western or Latin which signal complex
defined aim (physical alphabet. meanings to those
or digital). Mechanical familiar with the code.
defines the difference
between typography and
lettering: typography uses
repeatable units whereas
lettering is unique.

Definition taken from Type & Typography, Phil Baines & Andrew Haslam
Font versus
typeface

In these digital times, font and typeface are often

mistakenly used interchangeably, however they
actually have very distinct meanings that date
back to the days of metal type

+T
 ype: the physical object, a piece of metal with
a raised face at one end that contains the reversed
image of a character

+F
 ont: the physical means of typeface production

+T
 ypeface: a collection of characters with the same
distinct design
www.freepik.com
Typeface
baseline bowl
line on which letters sit the part of a character that encloses a space in
circular letterforms
cap height

Anatomy distance from baseline to top of capital letter.

x-height
serif
small stroke at the end of a main horizontal or
vertical stroke
height of the lower case x
descender
stem part of the letter that falls below the baseline
main vertical or diagonal stroke of a letter

Fancy
cap height

x-height

baseline
descender
stem bowl serif

Ellen Lupton, Thinking with Type

ligature
joining of two characters to form a single unit to
avoid interference between certain combinations

finial
a tapered or curved end on letters such as the
bottom of c or e. Also defined as a swash or
ornamental flourish

ascender
vertical stem that extends above the x-height -
often an identifying characteristic of a typeface

flesh
ligature ascender

finial

Ellen Lupton, Thinking with Type

terminal
the end of a stroke that does not include a serif

spine
left to right curving stroke

ascender
vertical stem that extends above the x-height -
often an identifying characteristic of a typeface

fresh
terminal ascender

spine

Ellen Lupton, Thinking with Type

apex cross bar arm stem tail vertex
the point formed at the the horizontal stroke a horizontal stroke that the vertical or diagonal the descending, often the angle formed at
top of a character - that intersects the is open on one or both stroke of a letter decorative stroke on the bottom of a letter
where left and right central stem ends the letter Q or the where the left and right
strokes meet descending, often strokes meet
curved diagonal stroke
on K or R is the tail

ABFTQM
Gavin Ambrose & Paul Harris, The Fundamentals of Typography
Relative
Measurements

A relative measurement in typography refers to a

measurement linked to a specific type size
+L
 eading uses relative measurement -
leading increases with point size

R R R
R
R

R
R
R
R R R
R
R

R R
R

Gavin Ambrose & Paul Harris, The Fundamentals of Typography

Ems, ens & hyphens

+E M:
_ a relative unit of measurement used in typesetting to
define basic spacing functions, linked to the size of
the type
_ initially based on the width of the uppercase M
_ equal to the currently specified point size

+ E N:
_ a unit of relative measurement equal to half
of one em
_ traditionally the width of an uppercase N

+ HYPHENS:
_e m and en are used in punctuation to provide
measurement for dashes
_ not to be confused with the hyphen
_ an em is half of an em, a hyphen is one third of an em
Gavin Ambrose & Paul Harris, The Fundamentals of Typography
X-height

+ the height of the main part of lowercase letters - defined

by the lowercase ‘x’ - from the baseline to the meanline
+ a relative measurement - varies from typeface to
typeface

x x x x x x
Bembo Optima Univers Futura Garamond Letter Gothic

Gavin Ambrose & Paul Harris, The Fundamentals of Typography

Bounding boxes,
kerning and
letterspacing
+T  he bounding box of a metal type character provided the
necessary spacing around characters
+D  igital type characters have invisible binding boxes that
define the space between characters
+ Increasing the space between letters - letterspacing
+ Decreasing the space between letters - kerning
+ Adjusting the amount of space between letters - tracking
+W  ith the exception of monospaced typefaces, the
bounding box varies with each character

Ma Ma Ma
Gavin Ambrose & Paul Harris, The Fundamentals of Typography
Leading Type Type
+m etal printing term originating from the lead strips Type Type
inserted between lines of text for spacing
+ digitally measured from baseline to baseline

Baselines
+ the imaginary line that most characters sit upon
+ the ‘o’ and other rounded characters fall
slightly below it
dart 280 c
Futura Garamond Letter Gothic

+b  aselines vary from one typeface to another -

position fixed by a relative measurement

Set width Monospaced

+ the horizontal scaling of type typeface
+ monospaced type aligns each character vertically
+p  roportional type sets each character within different
amounts of space Proportional
Gavin Ambrose & Paul Harris, The Fundamentals of Typography
typeface
Baseline grid

+ a n imaginary grid upon which type sits

+ the baseline of a piece of type can snap to the grid to
maintain visual continuity
+g  rid dimensions serve as a basis for other dimensions
such as point size and leading

Gavin Ambrose & Paul Harris, The Fundamentals of Typography

Gavin Ambrose & Paul Harris, The Fundamentals of Typography
The golden section
+p rinciples can be used as a means of achieving
balanced designs
+u sed as a design tool by many ancient cultures
including the Egyptians, Romans and Greeks
+ considered to represent infallibly beautiful proportions
+d ividing a line by the approximate ratio of 8:13,
relationship between greater part to the smaller part
is the same as that of greater part to the whole

CONSTRUCTING A GOLDEN SECTION

Gavin Ambrose & Paul Harris, The Fundamentals of Typography

Fibonacci sequence
+ s eries of numbers, each number is the sum of the two 0+1=1
preceding numbers 1+1=2
+ series starts at zero 1+2=3
+ important because of link the 8:13, the mathematical 2+3=5
basis of the golden section 3+5=8
+u  sed as measurements for typeface sizes, text block 5+8=13
placements, etc. because of harmonious proportions 8+13=21
+b  eauty of these proportions recur in nature: 13+21=34
pine cones, branch structures, petal formations, 21+34=55
nautilus shells 34+55=89
55+89=144
89+144=233...

Gavin Ambrose & Paul Harris, The Fundamentals of Typography

+c
 an be translated to paper or book sizes, and
typographics values

Title set at 13pt

Body copy set at 8pt type
Title set at 21pt
to complement the title size, Body copy set at 13pt type
which is one number up on
the Fibonacci sequence
to complement the title size,
which is one number up on
the Fibonacci sequence

Gavin Ambrose & Paul Harris, The Fundamentals of Typography

Standard paper sizes
INTERNATIONAL ORIGANISATION FOR STANDARDISATION (ISO)
+ paper size system based on metric system
+ retains the same proportions when cut in half
+c onvenient, economical and efficient means for designers, printers,
publishers to communicate product specification
+C anada, the USA and Mexico are the only countries that do not
use ISO paper sizes

Gavin Ambrose & Paul Harris, The Fundamentals of Typography

Hierarchy
+ logical and visual way of expressing relative importance
of different text elements
+ visual guide of information organisation
+ makes layout clear, unambiguous, easy to understand

In this hierarchy, the title is set in the largest,

boldest typeface to reinforce its importance.
Dropping down a weight for the subtitle
distinguishes its subsidiarity to the title while
allowing it to remain prominent.
Text can be presented with a different type size, but with the same weight as the subtitle.

Finally, captions can be formed using an italic that has less prominence on the page

Gavin Ambrose & Paul Harris, The Fundamentals of Typography

The page - how we read
+d  esign elements can visually compete when placed on
a page at the same time
+ typographic elements included for aesthetic qualities
and legibility
+ therefore, when designing layouts consideration must
be given to how user will obtain information

HOW WILL THE USER’S GAZE DRIFT AROUND A PAGE?

Gavin Ambrose & Paul Harris, The Fundamentals of Typography

+ when flipping thorugh a publication, + title dominates because of texture and scale,
attention usually drawn to recto page despite centered placement

+ black title in corner acts as an alternative starting + layering of title and body copy blurs distinction,
point despite unconventional placement but still allows title to be read first