Typography

Desktop Publishing
Involves using a desktop computer and publishing
software to create documents for publication.
Some examples of Desktop publications include:

Flyers
Newsletters
Magazine and Newspaper Articles
Advertisements
Proposals
Brochures
Business Correspondence
Letterhead
Business cards
Envelopes

The Target Audience

Publications are created to convey a message to
the intended audience, called the target
audience.
The target audience will determine the:

Language used.
Typefaces used.
Colors used.
Graphics used.

Typography
Many publications will contain a large amount of
text to deliver the message.
It is important to understand a few basic
guidelines for working with text and typography.
Typography refers to the design of the characters
and the way they are presented on the page.

Typefaces, Fonts, and

Font Families
A typeface is the basic design of a character.
Each typeface has a design for each letter of
the alphabet, numbers, punctuation symbols
and may contain other symbols.
Example:
Arial

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
!@#$%^&*()_+-=?,.:;

Typeface Categories
Typefaces can be divided into four main
categories.

Serif
Sans Serif
Script
Decorative/Ornamental

Serif Typefaces
Have attributes or strokes at the tips of
the letters called serifs.
Examples:
Bodoni
Goudy

Courier
Times New Roman

Used for body text in printed

publications.
Business correspondence
Magazine article text
Newsletter text

Book text
Newspaper text

Recommended sizes for body text are 10 to

12 points.

Serif Typefaces

Sans Serif Typefaces

There are no attributes (serifs) at the
tips of the letters.
Examples:

Arial
Berlin Sans

Gill Sans
Verdana

Used for very large or very small text

and for digital display.
Webpages
Headings
Captions

On-screen
Tables
Headlines

display

Serif vs Sans Serif Typefaces

The ends of each

character do not
have attributes
(serifs)

Sans Serif

Decorative/Ornamental
Typefaces
Designed strictly to catch the eye
Should be used sparingly.
Can be hard to read.

Examples
Chiller
Broadway
Webdings engravers MT

Used for decoration.

Headlines on flyers or advertisements.
Webdings can be used for symbols in logos.

Script Typefaces
Appear to have been written by hand with a calligraphy
pen or brush
Should never be used to key in all caps.

Example

French Script

Uses

Formal Invitations
Place cards
Poetry
Announcements

Fonts

Its easier to understand fonts if you begin with

the original definition of a font.
Before desktop publishing, people called
typesetters set the type by hand using
moveable type.
Each character was a separate block of metal.
The letters were set on the layout to form the
text.
Each typeface had a complete set of metal
characters for each size, weight, etc.

Fonts Continued
Each different size or weight required a completely
separate set of metal characters.
Each metal set of characters was kept in its own drawer
and was called a type font.
So a font is the specific size, weight and style applied to a
typeface.
Examples:

Arial, bold, 12 point

Arial, italic, 14 point
Arial, 10 point

Font Style
The font style refers to the slant, weight and
special effects applied to the text.
Examples:
Bold

Italic
Underline
Shadow
Outline
Small Caps

Font Families
A font family is the different sizes, weights and
variations of a typeface.
Examples:

Arial
Arial Black
Arial Narrow
Arial Rounded MT Bold

Typeface Spacing

Monospace
Proportional
Leading
Kerning
Tracking

Monospaced Typefaces
Each letter takes up the same amount of
space regardless of the letter size.
Advantages
Easier to see thin punctuation marks.
Similar characters look more different.
If limited to a certain number of characters
per line, each line will look alike.

Used often in computer programming

and biology
Courier is monospaced

Proportional Typefaces
Proportional
The amount of space each character takes up is
adjusted to the width of that character.
Therefore, an i is not as wide as an m and
receives less space.

Advantages
Does not take up as much space as monospaced
typefaces.
Easier to read.

Used in most documents and publications.

Times New Roman is proportional

Proportional vs. Monospace

Leading
The vertical spacing between lines of text.
Pronounced led-ding.
In most software programs, it is referred to as
line spacing.
In Desktop Publishing, it is still referred to as
leading because typesetters used long pieces of
lead between the moveable type to create blank
lines between the text.

Leading Continued
If there were no space between the lines of text,
the letters would touch the lines above and
below them and would be extremely difficult to
read.
Used to:
Slightly increase or decrease the length of a column of
text so that it is even with an adjacent column.
To make a block of text fit in a space that is larger or
smaller than the text block.

Leading
Look in the nook to find
Leading (vertical spacing between lines of text)

the book that you

Leading (vertical spacing between lines of text)

borrowed to read.

Kerning
Horizontal spacing between pairs of
letters
Used to add or subtract space between
pairs of letters to create a more visually
appealing and readable text.
BOOK before kerning.
after kerning the Os.

Tracking
Horizontal spacing between all of
characters in a large block of text.
Makes a block of text seem more open
or more dense.
Examples

Tracking Continued
Makes a block of text more open and airy or
more dense.
Used to expand or contract a block of text for the
purpose of aligning two columns.

Kerning, Leading, Tracking

LOOK in the nook to find

the book that you

Kerning (horizontal spacing between pairs of letters)

Leading (vertical spacing between lines of text)

borrowed to read.

Tracking (horizontal spacing between all

characters in a large block of text.

28

Typography plays an important role in how

Goals
ofperceive
typographic
design
audiences
your document
and its
information.
Good design is about
capturing your audiences interest and
helping your audience gather information quickly and accurately.

Typography creates relationships between

different types of information, both organizing this
information and keeping it interesting.

29

Legibility: Making sure the audience can read and

Design
principles
understand
your text. for typography
Similarity, alignment: Using typography to create
relationships between similar kinds of
information.
Uniformity or consistency: Repeating familiar
elements to focus your audiences attention.
Contrast: Creating interest and distinguishing
different types of information with different
typefaces. One element of contrast is hierarchy
making sure the audience understands that
information has different levels of importance.

30

Legibility is a combination of factors:

Font family
Typography
and legibility
Font size
Letter, word, and line spacing
Alignment

Legibility
Onlineand
Printfont families
Serifs create
distinctions
between
characters
(uppercase I
and lowercase L
)

Appears
blurry

Helps the
reader
follow text
easily

Serif fonts have

contrasting
strokes and lines

Helps
move
readers
eye
character
to
character

Helps move
readers
eye
character to
character

Sans serif fonts

have uniform
strokes
throughout

Helps
readers
easily read
text

Makes
words in a
sentence
hard to
follow

Stroke
Line

Stroke

32

Legibility of body text varies for different

audiences: and body text size
Legibility

Younger audiences may be able to read fonts sized at 8 or 9 points.

Older audiences may be able to read font sizes around 10 points or
above.
Font sizes above 14 points break down the continuity of the text,
making text appear too gray.

33

If letters, words, or lines are too close together,

Legibility
readers have and
a hardspacing
time because text blocks tend
to look too dark.
If letters, words, or lines are too far apart, readers
have a hard time because blocks of text tend to
look too light, causing readers to lose a sense of
continuity.
Spacing between words needs to be consistent to
promote legibility;
too much variation leads to eyestrain.

34

Legibility and alignment

Left-aligned text is most
legible, because spacing
between words is
uniform.
Justified text is also
legible, though less so
with shorter line lengths
because it tends to create
uneven spaces between
words.

35

Legibility and alignment

Center-aligned
and right-aligned
text is generally
harder to read,
because your
readers eyes are
used to following
text from left
to right.

36

Font families and audience

37

Each font family has a different personality.

Use different font families to evoke tone and
mood.
An advertisement for a school, for example, might use an elegant
font such as

An advertisement for a financial firm, on the other hand, might use

a more modern font such as

38

Font families for headings

For body text, you may want to use something
fairly conventional and legible.
For headings, consider audience: teenagers
respond to different fonts than businesspeople or
academics.
Choose font families that support your subject
matter, or deliberately use a contrasting font to
create interest.

39

Similarity and alignment

Aligned text creates a

line in your design;
such lines help readers
draw connections
between different parts
of a document.

40

To maintain overall uniformity, limit the number

Uniformity
font
of different fontand
families
per families
page to one or two.
Use the same font for headings and body text to
produce a uniform look; this is known as
concordance.

41

Using the same font family throughout creates

Contrast
and
font
uniformity but
may
makefamilies
documents seem flat
or uninteresting.
You can add interest by contrasting the display
type and body type.

42

Contrast and font families

To create contrast,
you could use two
font families, one
serif and one sans
serif.
Heading is set in
Impacta sans
serif font

Subheading is
set in Georgiaa
serif font

43

Conflict and font families

To avoid
conflict, many
designers avoid
using two font
families of the
same variety,
such as two serif
fonts.

Heading is set in
Palatinoa serif
font

Subheading is
set in Georgia
also a serif font

44

Contrast and tracking

Tracking refers to the
space between all of
the letters in a line.
Font families have
built-in tracking that
works well for body
text.
For headings, you can
change tracking to
create contrast.

Heading is set
with wide tracking

45

Designers shift baseline to create interest:

Contrast and baseline shift

Dropping the first
letter adds a playful
look.
Moving other letters
around creates a
jittery effect.

46

Use typography to guide readers through the levels

Hierarchy
and typography
of your document.
Use different headings by changing font family,
font type, font size, font color.
To promote uniformity and help your audiences
navigate, keep typographic choices consistent for
each subsection throughout the document.

47

Hierarchy helps your audience distinguish

Hierarchy
typography
between levelsand
of information,
such as headings
versus body text.
Many documents are divided into hierarchical
sections:
Main title
Section
Subsection
Or
Book
Chapter
Subheading
Sub-subheading

48

Example of hierarchy
Top-level headings can use
unconventional fonts
Different levels use different
font sizes, font families, font
colors, and leading.

These headings look the same

because they express the same
level of hierarchy

49

Typography can play a key role in design.

Summary
Good typography starts with font family; choose
these to meet your design goals, but keep them
limited.
Use text alignment to create relationships between
different kinds of information.
Create contrast by using a serif font for headings
and a sans serif font for body text (or vice versa).
You can also use italics, bold, tracking, or color to
create contrast.
Use contrast to indicate hierarchy.

Glossary Sites
www.typenow.net/glossary.htm
www.adobe.com/type/topics/glossary.html
www.typophile.com/wiki/Terminology

Useful Sites

www.identifont.com
www.typeculture.com
www.typographi.com
www.typophile.com
http://www.dubbocollm.schools.nsw.edu.au/Training/DTP/DTPtypefa
ce.htm
http://www.x24d.com/blog/?p=34

History of Typography
Robin Chin

What is Typography?
The art and technique of printing
The study and process of typefaces
Study

Legibility or readability of typefaces and their layout

Attractiveness of typefaces and their layout
Functionality and effectiveness of typefaces and their layout
How a typeface/layout combo enhances or honors content

Process

Artistic composition of individual type

Setting and arrangement of type
Basic elements of desktop publishing

Typeface

A full set of type made to a particular design (size and style)

A font

Some Typeface Examples

Quick brown foxes jump - Times New Roman

Quick brown foxes jump - Bookman Old Style
Quick brown foxes jump - Courier New
Quick brown foxes jump - Trebuchet MS
Quick brown foxes jump - Comic Sans MS
- Webdings

Typography and Print

Typography is defined in relation to print
History of (Western) printing
Johannes Gutenberg

Europes first printer (42-line Bible, 1455)

First designer of typeface
Gothic type: modeled after German script
Goal: To replicate the look of a manuscript Bible

Aldus Manutius
Designed Italic type (of Italy) in the 1490s
Modeled on handwriting of Venetian clerks
Compact form allowed for printing of smaller books

Typography and Print

German
Script

Gothic
Type

Manutius Italic

Typography and Print:

Creating Type
Basic letterform for
capital letters

Stone Engravers
Style:
As few curves as
possible

Typography and Print:

Creating Type
Geofroy Tory

16th Century French

Designer
Influenced by
architecture and the work
of Leonardo da Vinci
Designed his typeface on
the proportions of the
human body

(Not Tory, but an example of a full set of typeface)

Anatomy of a letter - Some terms eventually associated with the

potential features of type design