Typography
2.01 Investigate typefaces and fonts.
Where’d they come from?
• Times - developed for newspaper text, books, magazines, office
documents, display, and advertising
• Courier New - designed to emulate a
typewriter
• Comic Sans MS - originally created for comic books
• Century Schoolbook - originally created for magazines
and later widely used in reading primers and texts
• Tahoma – created for small-sized text in dialog boxes and
menus; can be rotated and scaled
• Trebuchet MS, Georgia, and Century Gothic were created
to optimize digital display
Typefaces, Fonts, and
Font Families
• A typeface is a specific style applied to a font
• A font is a specific size, weight, and style applied
to a character (letter, number, symbol)
• A font style is a specific slant and weight of a
character, such as bold or italics
• A font family is a group of similarly formatted
characters
• Four Families of Fonts:
• Serif
 Ornamental or Decorative
• Sans Serif
 Script or Cursive
Serifs
• Contain attributes/strokes at the tips of a
letter
• Examples of Serif Fonts:
•
•
•
•
Goudy
 Times
Bodini
 Modern No. 20
Courier
 Rockwell
Century Schoolbook
k
• Uses
• Newspaper text
 Office documents
• Books
 Magazines
• Display
 Advertising
Sans Serifs
No attributes (serifs) at the tips of a letter
– Mono-weight appearance
• Examples of Sans Serif Fonts
– Arial
- Berlin Sans
– Gill Sans
- Verdana
• Uses
– Web pages
– Headings
- Digital display
- Captions
k
Ornamental or Decorative
Designed strictly to catch the eye
– Should be used sparingly
• Examples
– Chiller
– Webdings
• Uses
– Headlines on flyers
– Symbols used in logos
Script or Cursive
All typefaces that appear to have been written by
hand, with a calligraphy pen or a brush
– Should never be used to key in all caps
• Examples
• Brush Script
• French Script
• Uses
– Invitations
– Calling cards
– Poetry
Three Cs of Typography Design
• Concord
• Conflict
• Contrast
Concord
• A calm and harmonious layout
• In this example
– Initial cap is larger than the rest of the type
– Words "full of sound and fury" have been
italicized
– Resulting effect is subdued
Conflict
• Using two different typefaces that are similar, but
not different enough to stand apart from each
other
• In this example, the words “full of sound and fury”
are in a different typeface
Contrast
• Effects on typeface, size, and/or weight to
– Direct reading patterns
– Organize information
– Emphasize information
Type Effects
•
•
•
•
•
•
Monospace
Proportional
Leading
Kerning
Tracking
Punctuation
Monospaced Fonts
• Each letter takes up the same amount of
space
• 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 Fonts
• 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.
• Advantages
– Does not take up as much space as
monospaced fonts
– Easier to read
• Used in publications
Times New Roman is proportional
Leading
• Vertical spacing between lines of text
• Also referred to as expanded or
condensed
• Measured from the top of the capital of
one line to the top of the capital of the
next.
• Uses
– 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 that a text block
Kerning
• Horizontal spacing between pairs of
letters
• Used to add or subtract space between
pairs of l e t t e r s to create a more
visually appealing and readable text
Tracking
• The adjustment of space for groups of
letters and entire blocks of text
• 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
Typographical Punctuation
• Curly quotes (also called smart quotes)
can add interest to pull-quotes in a design
• En dashes – for showing duration or range
as in 9:00–5:00 or 112–600 or March 15–31.
• Em dashes — the proper dashes to use in
place of single or double hyphens (--)
•
Hyphens – used to separate numbers and/or
letters, such as in a phone number