Principles of
Typography
Fonts
• Different fonts
send a different
message to the
reader:
– Sans serif
– Serif
– Script
– Decorative
–
Sans-serif Fonts
• Easy to read,
especially online
• Modern and clean
• Good for websites or
other online formats
• Good for headings in
printed texts
• Examples include:
– Arial
– Comic Sans MS
– Century Gothic
– News Gothic MT
Serif Fonts
• Easier to read in print
• More old-fashioned
or traditional
• Best for the body
text in print
documents
• Examples include:
–
–
–
–
Times New Roman
Book Antiqua
Courier New
Garamond
Script Fonts
• Hard to read - use
sparingly!
• Traditional and
flowery – often used
on wedding
invitations or menus
• Examples include:
– French Script MT
– Pristina
– Lucida Calligraphy
Decorative Fonts (also
Display)
• Hard to read – use
sparingly
• Good for headings
• Create a fun,
funky mood
• Examples include:
– BeesKnees
– Curlz MT
– Harlow Solid Italic
– Jokerman
Grunge Fonts
• Deteriorated fonts
• Designed to
appear “beaten
up” with parts of
the characters
missing or
misshapen
Dingbat Fonts
• Symbol sets in
fonts
• Often used for
bullets or for
accents
• Examples include:
– Wingdings
– Webdings
Type Checkup
• Which is serif and which is sans
serif?
Serifs
Type Checkup
• Which is script and which is decorative?
Text Terms
• Kerning
– The distance between letters
– a.k.a Tracking
Text Terms
• Leading
–
–
The Distance between lines
Named for the lead used to separate lines of type in
early printing presses.
This is my first Line of Text
This is my Second
A third
And Finally a fourth
Another?
Text Terms
• Text Styles
• Some common styles that can be applied to
text:
Bold
Italic
Underlined
Shadow
Embossed
Text Terms
• Font Size
– Measured in points
– 72 points = 1’’
12-Point
24-Point
36-Point
Ascender
Display
Descender
48-Point
Text Terms
• Alignment
Left Aligned
Center Aligned
Right Aligned
Justified words in a paragraph are shown in
these two short sentences. See how they
line up at the left and right?
Text Terms
• Reverse text
• Common style used
because white on a
dark background is
quite striking
• Adds impact and
emphasis to words
Mixing Fonts
• If you want to use
more than one font in
a document, make
sure they come from
two different font
families
• In the improved
business card, a
sans-serif font is
combined with a
serif-font for better
contrast
Rupert Buchanan
Widget Enterprises
1569 Stone Road
Toulouse, PQ
(800) 325-2532
Rupert Buchanan
Widget Enterprises
1569 Stone Road
Toulouse, PQ
(800) 325-2532
Type contrasts
• There are six different ways of
contrasting fonts:
–
–
–
–
–
Size
Weight
Structure
Direction
Color
Type contrast - size
• You can contrast
any two fonts by
making them two
different sizes, but
make them very
different
• i.e. 12 pt. versus
14 pt. isn’t enough
Schnobblecaster
Incorporated
Schnobblecaster
I N C O R PO RAT E D
Type contrast - weight
• You can also achieve
contrast by varying
the thickness of type
strokes
• i.e. regular, bold,
extra bold, and light
• This can be an
effective way of
organizing
information (i.e. use
it for headers)
Carmichael Foods
Asparagus Tips
Carmichael
Foods
Asparagus Tips
Type contrast - structure
• Make sure you pick fonts from two
different families with different
structures
• i.e. one serif and one sans serif, one
decorative and one sans serif, etc.
• For printed documents, the body
text is normally a serif, while the
headings are usually sans serif.
Structure - continued
• The examples on
this page look bad
because they each
combine two fonts
from the same
family
Some of this
And some of that
Some of this
And some of that
Some of this
And some of that
Some of this
And some of that
Structure - continued
• By switching the
fonts around, we
can get some
decent looking
examples of type
contrast
Some of this
And some of that
Some of this
And some of that
Some of this
And some of that
Some of this
And some of that
Type contrast - Direction
• You can create some
interesting effects by
varying horizontal
and vertical lines of
type
• You should have a
good reason for doing
this, though. In
general, don’t make
people read stuff
sideways or on an
angle.
Experience
teaches
you to
recognize
a mistake—
when
you’ve
made it
again.
Type contrast - color
• Warm colors tend to
come forward and
command attention
• Cool colors tend to
recede from our eyes
• You need more of a
cool color to create
effective contrast
than you would need
of a warm color
Cunningham
State College
Cunningham
State College
Type contrast – black &
white
• Varying the typeface
you use can add
“color” to a page,
even if it’s still black.
• Differences in the
weight, structure,
space inside letters,
space between
letters, size of type,
and so on can create
“color” contrast.
Typography
If you add some color to your heads
and subheads with a stronger
weight, or perhaps set a quote,
passage or short story in
an obviously different
‘color,’ then readers are more
likely to stop on the page and
actually read it. If you add some
color to your heads and subheads
with a stronger weight, or perhaps
set a quote, passage or short story
in an obviously different ‘color,’ then
readers are more likely to
stop on the page and
actually read it.
Type contrast – black &
white
•
•
•
Each font has a different
density, so some look
darker than others.
Each of these examples is
in Arial, but each has a
different “color” or shade
of grey.
Differences in the weight,
structure, space inside
letters, space between
letters, size of type, also
create “color” contrast.
If you add some color to your heads
and subheads with a stronger weight,
or perhaps set a quote, passage or
short story in an obviously different
‘color,’ then readers are more likely to
stop on the page and actually read it.
If you add some color to your heads and
subheads with a stronger weight, or perhaps
set a quote, passage or short story in an
obviously different ‘color,’ then readers are
more likely to stop on the page and actually
read it.
If you add some color to your
heads and subheads with a
stronger weight, or perhaps set a
quote, passage or short story in an
obviously different ‘color,’ then
readers are more likely to stop on
the page and actually read it.
Typography Do’s and Don’ts
• don't mix more than three type styles in
one page
• use sans serif in titles and serif in body
text
• use italics sparingly
• create contrast
• don't use display fonts or too many colors
in body copy
• don't forget that typography is supposed
to make the text easier to read
Combining contrasts
• Most effective layouts take advantage of
more than one type of contrast.
• Look through magazines for examples
and ideas.
• Try to verbalize what you see in a good or
bad example. You should also be able to
provide a rationale for any design
decision you make (not just “it looked
better”).
Critiquing designs
• Try do identify the problem. How effective
is the contrast in weight? Size? Structure?
• Try to name the differences, not
similarities. Are two font faces competing
with each other because they are both all
caps? Because they are both sans serif?
• Focus on conflicts. Is the larger type a
light weight, and the smaller one a bold
weight, so that they fight with each other
for emphasis?
Contrast or conflict?
extremely good
HALLOWEEN
THRILLER
DOG FOOD
let’s DANCE tonight
MY MOTHER
This is an essay on why my
Mom will always be the greatest
mother in the world.
FUNNY FARM
Health Insurance