On Typography

1
On Typography

• The study of Type
• Type facilitates
• Communication
• Information Design
• Choosing the right type can have profound impact
  on the design

2
(No Transcript)
3
(No Transcript)
4
History of Type Styles

• Classical/Old Style (Bookman) 1450-1700
• Type sets based on handwriting/calligraphy
  styles
• Transitional (Baskerville) 1700-1800
• Greater contrast between thick and thin strokes
• Increased type delicacy required improved
  letterpresses
• Modern (Big Caslon) 1800-1900
• Sharp contrast between thick and thin strokes
• Hairline thin serifs
• Bauhaus (Bauhaus 93) 1900-1960
• Geometrically designed sans serifs
• Contemporary (Trebuchet) 1960-Present
• Development of fonts specific to purpose or
  medium (eg Adobe Postscript fonts)

5
Modern Typography

• Gutenbergs Press
• Photo typesetting
• Bauhaus type movement
• Computer-enhanced
• Bitmapped fonts
• Postscript fonts
• Screen fonts
• TrueType
• ClearType

6
Readability vs. Legibility

• Ease of reading is called Readability
• The ability to recognize letters is legibility

• Readability measures ease of reading
• Issues affecting them
• Font Size Font Style
• Leading Tracking/Kerning
• Proportions Alignment
• Word Spacing Line length

7
size
8
Leading - distance from baseline to baseline
9
(No Transcript)
10
alignment
11
word and letter spacing
12
style
13
Use of Type
Good type is often overlooked Bad type is noticed
by all

• Traditional setting
• Serif font
• 120 leading
• Full use of page, equal margins
• Large to small data hierarchy

• Modern setting
• Sans-Serif font
• Lots of white space
• Creative use of letters
• Stretching the bounds of type

14
Creative Use of Type

• Letters are (also) graphics
• Words are (also) images
• Consider variation in
• Direction
• Contrast
• Form (capital vs lowercase)
• Edges of screen/paper

15
(No Transcript)
16
(No Transcript)
17
(No Transcript)
18
(No Transcript)
19
experimenting with the
baseline
20
(No Transcript)
21
(No Transcript)
22
experimenting with the
Line length
23
(No Transcript)
24
(No Transcript)
25
word as image
26
(No Transcript)
27
(No Transcript)
28
(No Transcript)
29
(No Transcript)
30
(No Transcript)
31
(No Transcript)
32
(No Transcript)
33
(No Transcript)
34
(No Transcript)
35
(No Transcript)
36
(No Transcript)
37
(No Transcript)
38
animated type
interactive type
39
(No Transcript)
40
(No Transcript)
41
(No Transcript)
42
(No Transcript)
43
experiment,
familiarize yourself with the tools
BUT remember...
just because you CAN do something...
...doesnt mean you SHOULD
44
Matching text and image
icon
index
symbol
metasymbol
45
(No Transcript)
46
(No Transcript)
47
(No Transcript)
48
(No Transcript)
49
(No Transcript)
50
(No Transcript)
51
(No Transcript)
52
(No Transcript)
53
(No Transcript)
54
(No Transcript)
55
(No Transcript)
56
(No Transcript)
57
(No Transcript)
58
(No Transcript)
59
(No Transcript)
60
(No Transcript)
61
(No Transcript)
62
(No Transcript)
63
(No Transcript)
64
(No Transcript)
65
(No Transcript)
66
(No Transcript)
67
(No Transcript)
68
(No Transcript)
69
(No Transcript)
70
(No Transcript)
71
(No Transcript)
72
(No Transcript)
73
(No Transcript)
74
(No Transcript)
75
(No Transcript)
76
(No Transcript)
77
(No Transcript)
78
(No Transcript)
79
(No Transcript)
80
(No Transcript)
81
(No Transcript)
82
(No Transcript)
83
(No Transcript)
84
(No Transcript)
85
(No Transcript)
86
(No Transcript)
87
(No Transcript)