Fundamentals to Typography

The looks of a written word are just as

important as what is it says

Another Lecture
 T he Genesis
• Early Writing System
• Early humans used symbols/images to share
ideas around 25,000 B.C
• Pictographs were used primarily i.e. cave Cave Drawings
drawings
• Pictographs are symbols representing concepts
in a consistent manner
• Simplified drawings that represent objects
• Advantageous: Mesopotamia Pictograph
• ability to Communicate universally
 T he Genesis….
• Phoenicians Alphabet
• Had 22 symbols around 1000 B.C.
• Symbols related to sound in the language
• People stopped memorizing thousands of
symbols
• The term “Phonetics” comes from this
concept

• Greek Alphabet
• Greeks expanded the Phoenician
alphabet
• Added vowels & named each character
• First system of reading left to right &
top to bottom
 T he Genesis….
• Rom an Alphabet
• Romans developed the Greek Alphabet
further-the modern alphabet we use now
• Added lowercase versions to letters,
condensed forms to text and cursive writing
that flowed more naturally by hand

• Invention of the Pr inting

Press
Johannes Gutenberg, invented the printing
press in mid 15th century
• The press was used to print books in larger
quantities than had previously been possible
• This invention changed the world, allowing
rapid production and distribution of printed
ideas
 T he Genesis….
• Writing dur ing the Dar k Ages
• Books were hand-produced for hundreds of
years
• Primarily religious (illuminated manuscripts)
• Due to the painstaking effort (often years) to
create a single volume, books were considered
very valuable treasures

• C hallenges with E ar ly Writing System s

• Incredibly time consuming
• Expensive
• Prone to Error
• So, mass production was impossible until when;
• Gutenberg’s invention that revolutionized
printing
Typography & Meaning
• A typographic message, must convey a Meaning.
• Meaning (Semantics) is an important aspect of
design,
• Semantics is the study of meaning and applies
to both images & language
• Syntax (grammar) are rules that govern how
elements of a sentence/ paragraph, are organised
to convey meaning
• If the syntax is wrong, then language becomes
meaningless.
 So what is Typography?
• Typography
• The study of all elements of type including shape, size &
spacing of characters Or
• The art of arranging text, so that language is visible
• Essentially, all forms of writing are typography
• Importance of Typography
• It attracts and holds attention if used well
• Establish information hierarchy-(headings/subheadings)
• It creates & builds recognition; e.g. companies & logos
• Clarifies messages the designer sends to the audience
 Typography & the Audience
• Target Audience
• Publications convey a message to the
target/intended audience.
• The target audience determines the:
• Language used
• Typefaces used
• Colors used
• Graphics used
 Design Principles For
Typogrpahy
• Legibility: Ensure audience can read &
understand your text
• Reverse type: a white type on a dark
background to ensure type stands out
• Similarity & alignment: type is used to
create relationships between similar kinds
of information
Design Principles For Typogrpahy
• Uniformity or consistency: repeating
familiar elements to focus your audience’s
attention
• Contrast: Creating interest & distinguishing
different types of information with different
typefaces
• Hierarchy: Audience understands that
information has different levels of
importance
The Anatomy of Type
• Understanding the structure of letterforms (anatomy of
type), is essential to:
• Understand how typefaces differ,
• What characteristics they share,
• So as to select and use the various typefaces available
• The most basic element of typogragpy is the letterform,
• Each typeface is unique from another
• Technology has accelerated the creation of new faces and
produced digital versions of classics
• So many choices exist,
• selecting an approriate typeface can be daunting.
Understanding & Selecting Typefaces
• Selecting Fonts
• The content of the material and purpose of the
design are key factors in selecting fonts. E.g.
• Display types offer much more variety than
Text types because their purpose is
expression than readability;
• Sans Serifs are more authoritative and bolder
than typefaces that are designed for reading
over long periods;
Typographic Basics
U nder standing & Selecting
Type
• Type is classified into 4 main classes:
• Serif (e.g. Times New Roman)
• Sans Serif (e.g. Helvetica, Gill Sans)
• a significant advantage of the sans serif is the
large number of potential variants within one
typeface
• Script
• Decorative/Ornamental
 U nder standing and Selecting
Type
•Ser if Typeface
• Serifs have attributes or strokes at the tips of the letters
called Ser ifs
• Ideal for body text in printed publications
• Book text, Newspaper text, Magazine Article & Newsletter text
• Serifs improve readability by leading the eye along the line of
type
• Recommended font sizes for body text are 10-12 points
• Examples of Serif Typeface are Times New Roman, Courier,
Bodoni etc.
 U nder standing and Selecting
Type
• Sans Ser if Typeface
• Sans Serif means without
Serifs/strokes at letter tips;
• Sans-serifs fonts come without
these embellishments
• Ideally used for digital display e.g.
• Headings,
• Captions,
• Headlines,
• Tables and
• Onscreen Display
U nder standing and Selecting
Type

U ses
•Formal
Invitations
•Place Cards
•Poetry
•Announcements
U nder standing and Selecting
Type

• Decor ative and Novelty

• Designed strictly to catch the eye & should used sparingly
• Can be hard to read; examples are Webdings, Engraves MT etc.
• Used for Decoration
• Headlines for Advertisement
• Webdings can be used as symbols in Logos
Understanding and Selecting
Type
Typographic rules/boxes and
ornaments

HANDWRITING

They are still invaluable to the

designer today because they
serve both functional and
aesthetic roles.
 Typogr aphic Measurem ents
• Two basic units of measurement used to describe
type:
• Points: Very small units used to measure both type sizes
and the spaces in between the lines of type.
• Picas: Larger unit of measurement. 12 points= 1 Pica (6
picas in 1 inch) 72 point type = 1 inch
Typefaces are not interchangeable
Font Sizes
 Spacing
• Understanding how to deal with space in typography is
essential
• Proper spacing affects legibility, & space is an integral
part of any composition, whether
symmetrical/asymmetrical
• Consider the role of space in both legibility and meaning
as you progress at every stage of design development.
• Alignment: The setting of text relative to a column or page
• Centered: Text that is aligned neither to the left nor to the
right: symmetrical, with an even gap at the end of each line.
• Hyphenation: The point at which a word is broken at the end
of a line in continuous text and a hyphen is inserted.
 Spacing
• Justified: Text is aligned on both the left and right
margins of a column (lines are equal in length).

• Kerning: Adjustments to the spaces between two letters

(used extensively for capitals).

• Leading: The horizontal space between lines of type.

Related to the historical use of strips of lead in

letterpress.
Spacing
• Ligatures: Two or more letterforms joined to
create a single character.
• Ragging:When text is aligned left, some words at
the end of the lines might extend out farther than
the rest and cause uneven- looking paragraphs.
• Tracking: The space between words, which can be
adjusted.
Spacing
C har acter Spacing
Word Spacing
Line Spacing
Paragraph Spacing
Paragraph Spacing
Paragraph Spacing
 Paragraph Spacing
• Widow: A widow occurs when the last line of a paragraph is not
able to fit at the bottom of a page or column. Instead, it sits at the
top of the next page, looking out of place.

• Orphan: An orphan is the exact opposite of a widow. It's when the

first line of a paragraph sits at the bottom of a page by itself.

• Runt: A runt can occur anywhere throughout a page or column, and

it's when the last line found in a paragraph ends with a single word;
this often happens with hyphenated words.

• Rivers: A noticeable crack or line that runs through a paragraph,

most commonly an issue after adjusting the tracking in a sentence.
Paragraph Spacing