This document discusses typography and type design. It covers different type classifications like serif, sans serif, decorative, monospaced, and script. It discusses typographic principles such as font weights, variations, spacing, hierarchy, and readability. Key factors that influence readability are typeface, size, letterspacing, word spacing, line spacing, and format. Display type should usually be sans serif while text type works best in serif.

1. Introduction to TypogrAphy

2. Type is …
• A valuable communication tool.
• Speech made visible. LISTEN TO IT.
• Tone of voice. Emphasis, loudness,
whispering, dialect.

4. Type Classes
• Serif
• Sans Serif
• Decorative/Display
• Monospaced
• Script/Hand-Lettered
• Symbols/Ornaments

5. Serif vs. Sans Serif
• Sans Serif – Arial
•
•
Sans Serif – Gill Sans
Sans Serif - Helvetica!
Abc
• Serif – Times
•
•
Serif – Adobe Garamond
Serif – Adobe Caslon Abc

6. Font weights
• Interstate Hairline
• Interstate Thin
• Interstate Extra Light
• Interstate Light
• Interstate Regular
• Interstate Regular Italic
• Interstate Bold
• Interstate Black
• Interstate Ultra Black

7. Font variations
• Interstate Regular
• Interstate Regular Compressed
• Interstate Regular Condensed

9. Anatomy of a typeface

10. Designer’s challenge:
• How to organize letters, words, sentences
on blank page, screen or space
– What font?
– What size? What weight?
– How aligned, spaced, ordered, shaped,
colored, or otherwise manipulated?

12. Spacing
• Design is an act of spacing and an act
of marking
• Space in typography: negative gaps
between and around letters
– Characters, leading, margins
– Space makes words readable
Tryreadingalineoftextwithoutspacingtoseehowimportanthisis.

14. Typographic Hierarchy
• Organizational system for content
• Emphasizes some data, diminishes
others
• Helps readers scan text, know where
to enter/exit, how to pick and choose
• Cues can be:
– Spatial (indent, line spacing, placement
on page
– Graphic (size, style, color)

17. Types of Type
• Display
– Describes content
– Lures reader
– Sans serif
• Text
– Where the content is
– Serif

19. Types of Type
• Primary Type -- i.e. Headline
– Draws attention to itself
– Stops “browser”
– Leads to…
• Secondary Type -- The Payoff
– Explains the headline, hooks the reader
– Mid-level prominence
– Subhead, deck, caption

20. Dominance
What is primary?
What is secondary?

21. Types of Type
• Guidelines for Use
– Use no more than two families of type
– Two weights
– Add italics to make six voices
• Size Affects Space
– Display type, above 18 point, shows off
misspacing
– Line breaks are critical to the meaning

22. Types of Type
Line breaks are critical to the meaning/readability
Bus plunge kills 3 Lee students
Bus plunge kills 3
Lee Students
Bus plunge
kills 3
Lee Stu-
dents

23. Using Space in Text

24. Using Space in Text

25. Using Space in Text
• Space Should Make Reading the Type
Effortless
• It is done right if it is not noticeable

26. Readability of type
6 factors to consider

27. 1. Typeface Readability
• Reader Should Not Be Aware of the Form
• All-caps harder to read than lowercase
– Caps look like bricks (no more than two lines)
– Whitespace around lowercase distinguishes letters
• Sans serif may be harder to read than serif
– Serifs aid horizontal eye movement
– Italics harder than Roman because they are lighter
– Shaded, outline & inline for Display only

28. 2. Type size, weight
• 10-pt. is the smallest readable size
• Use weightier or larger face on longer
measure
• Limit use of heavy/bold faces to special
display, features (16 point and higher)
• Reverse type
– increase size and weight
– use sans serif font

29. 3. Letterspacing
• Kerning and tracking, but also space
between lines of type (leading)
• Be consistent
• Proportions:
– Wide letters need more space
– Caps need more than lowercase

30. 4. Word Spacing
• Should Be Invisible
• Justified type forces spacing
throughout the line of type … be
careful
• Justified left/ragged right gives best
spacing, provides rhythm
• Hyphenation should never be used in
Display type

31. 5. Line Spacing
• Narrow widths of type hurt flow
– Eye jerks around to keep up with narrow columns
• Too-wide widths of type hurt rhythm
– Readers lose track of line they’re scanning
• Rule of thumb: Width of line (in picas) should
be no more than twice the size of type (in
points)
– A line of 12-pt type should not be wider than 24
picas
– Approx. 40-50 characters per line

32. 6. Format
• Readers Follow Visual Signals
– Paragraphing (announce new idea)
– Punctuation (pause or stop)
– White Space (relative connectedness)
– Position on the Page (importance)
• Ragged-left is harder to read than
ragged-right and justified
• Be consistent

33. More Type Tips
• Print vs. Electronic
• In Print, Display type should be sans serif,
text should be serif
• In Electronic, Display type should be serif,
text should be sans serif

34. More Type Tips
4. Avoid placing
type over
illustrations,
tinted areas
• Background
must provide
clean,
contrasted field
for text

35. More Type Tips
• Break up long runs of type
• Paragraph indentation
• Greater leading between
grafs
• Subheads of contrasting
size, weight
• Boldface or italic for special
emphasis within text

36. More Type Tips
• Finally, keep it simple and
expressive.
– Communication won’t happen just
because something looks interesting
– Communication won’t happen just
because something is legible