Introduction to Typography

An overview of typographic concepts and history given to the Trunk Club engineering and product teams on 28 Nov, 2012.

Transcript

1. INTRODUCTION to TYPOGRAPHY
2. INTRODUCTION to TYPE DESIGN
3. ter•mi•nol•o•gy | ˌtərməˈnäl noun ( pl. terminologies ) the body of terms used with a particular tech application in a subject of study, theory, pro the terminology of semiotics | specialized te for higher education. DERIVATIVES ter•mi•no•log•i•cal |-nəˈläjikəl| adjective ter•mi•no•log•i•cal•ly |-nəˈläjik(ə)lē| adv ter•mi•no•lo•gist |-jist| noun ORIGIN early 19th cent.: from German Ter
4. 0 8 @ H P X ` h p x 0 Å 1 9 A I Q Y a i q y L Ç 2 : B J R Z b j r z X É 3 ; C K S [ c k s { j Ñ 4 < D L T \ d l t | 0 Ö 5 = E M U ] e m u } L Ü 6 > F N V ^ f n v ~ X á 7 ? G O W _ g o w Ä j à
5. hil
6. x
7. r
8. h
9. y
11. ter•mi•nol•o•gy | ˌtərməˈnäl noun ( pl. terminologies ) the body of terms used with a particular tech application in a subject of study, theory, pro the terminology of semiotics | specialized te for higher education. DERIVATIVES ter•mi•no•log•i•cal |-nəˈläjikəl| adjective ter•mi•no•log•i•cal•ly |-nəˈläjik(ə)lē| adv ter•mi•no•lo•gist |-jist| noun ORIGIN early 19th cent.: from German Ter
12. Character Height or Font Size
13. 18pt abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh 24pt abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm 36pt abcdefghijklmnopqrstuvwxyzabcdefghijklmnopq 48pt abcdefghijklmnopqrstuvwxyzabcdef 64pt abcdefghijklmnopqrstuvwx 72pt abcdefghijklmnopqrstuv 96pt abcdefghijklmnop 144pt abcdefghijkl
14. p { font-size: 16px } h1 { font-size: 24pt } h2 { font-size: 150% } h3 { font-size: 1.2em } h4 { font-size: 1.1ex } h5 { font-size: small } h6 { font-size: smaller }
15. Stroke Width or Font Weight
16. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwx abcdefghijklmnopqrstuvw abcdefghijklmnopqrstuvw
17. font-weight: normal bold
18. font-weight: 100 200 300 400 500 600 700 800 900
19. font-weight: 100 Gotham Thin font-weight: 200 Gotham Extra Light font-weight: 300 Gotham Light font-weight: 400 Gotham Book font-weight: 500 Gotham Medium font-weight: 600 font-weight: 700 Gotham Bold font-weight: 800 Gotham Black font-weight: 900 Gotham Ultra
20. Character Angle or Font Style
21. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
22. p { font-style: normal } i { font-style: italic } em { font-style: oblique }
23. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
24. Character Width or Font Stretch
25. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
26. font-stretch: ultra-condensed font-stretch: extra-condensed font-stretch: condensed font-stretch: semi-condensed font-stretch: normal font-stretch: semi-expanded font-stretch: expanded font-stretch: extra-expanded font-stretch: ultra-expanded
27. Tracking or Letter Spacing
28. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
29. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
30. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
31. h1 { letter-spacing: -.5em } p { letter-spacing: .2em }
32. Kerning
33. To AV Wa To AV Wa
35. CITY OFFIC ES
39. Kerning
41. Leading or Line Height
42. Lorem ipsum adipisicing elit
43. Lorem ipsum adipisicing elit
44. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
45. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
46. h1 { line-height: 1.2em } p { line-height: 2 }
47. ter•mi•nol•o•gy | ˌtərməˈnäl noun ( pl. terminologies ) the body of terms used with a particular tech application in a subject of study, theory, pro the terminology of semiotics | specialized te for higher education. DERIVATIVES ter•mi•no•log•i•cal |-nəˈläjikəl| adjective ter•mi•no•log•i•cal•ly |-nəˈläjik(ə)lē| adv ter•mi•no•lo•gist |-jist| noun ORIGIN early 19th cent.: from German Ter
48. font
49. 18pt abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh 24pt abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm 36pt abcdefghijklmnopqrstuvwxyzabcdefghijklmnopq 48pt abcdefghijklmnopqrstuvwxyzabcdef 64pt abcdefghijklmnopqrstuvwx 72pt abcdefghijklmnopqrstuv 96pt abcdefghijklmnop 144pt abcdefghijkl
50. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxy abcdefghijklmnopqrstuvwx abcdefghijklmnopqrstuvw abcdefghijklmnopqrstuvw
51. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
52. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
53. AaBbCcDdEe FfGgHhIiJjLkLl MmNnOoPp QqRrSsTtUu VvWwXxYyZz 1234567890
54. AaBbCcDdEe FfGgHhIiJjLkLl MmNnOoPp QqRrSsTtUu VvWwXxYyZz 1234567890
55. fonte Photo: Leo Reynolds
56. Photo: solsken
57. 18pt abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefgh 24pt abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklm 36pt abcdefghijklmnopqrstuvwxyzabcdefghijklmnopq 48pt abcdefghijklmnopqrstuvwxyzabcdef 64pt abcdefghijklmnopqrstuvwx 72pt abcdefghijklmnopqrstuv 96pt abcdefghijklmnop 144pt abcdefghijkl
58. Futura Light Futura Light Oblique Futura Book Futura Book Oblique Futura Medium Futura Medium Oblique Futura Heavy Futura Heavy Oblique Futura Bold Futura Bold Oblique Futura Extra Bold Futura Extra Bold Oblique
59. ter•mi•nol•o•gy | ˌtərməˈnäl noun ( pl. terminologies ) the body of terms used with a particular tech application in a subject of study, theory, pro the terminology of semiotics | specialized te for higher education. DERIVATIVES ter•mi•no•log•i•cal |-nəˈläjikəl| adjective ter•mi•no•log•i•cal•ly |-nəˈläjik(ə)lē| adv ter•mi•no•lo•gist |-jist| noun ORIGIN early 19th cent.: from German Ter
60. AaBbCcDd AaBbCcDd
61. Humanist
62. e
63. Axe
64. Hash
65. Old Style
66. d
67. O
68. e
69. Transitional
70. ceo
71. M
72. d d Old Style Transitional
73. Modern
74. M
75. M
76. ceo
77. Slab Serif
79. It was a dark and stormy night. The wind howled and twigs and leaves scuffled and rattled past the house. Mr and Mrs White sat in the parlour of their cosy home, in front of a blazing fire. Mr White played chess with his only son, Herbert. His wife sat in a rocking chair knitting and watching as they played.
81. AaBbCcDd AaBbCcDd
82. Humanist
83. Humanist Humanist
84. Transitional
85. AaBbCc
86. AaBbCc
88. Geometric
89. O o
91. Use the Correct Character
92. it's
93. ambidextrous quotes, real quotation marks, apostrophes, and prime
94. it's
95. it’s
96. " ' “ ” ‘ ’ ʺ″ ʹ′ &quot; &#29; &ldquo; &rdquo; &lsquo; &rsquo; &Prime; &prime;
97. 7-5=2 867-5309 December 24-31 Mason-Dixon Line No one -- not even Jim -- knew the answer.
98. hyphen, minus sign, figure dash, en dash, horizontal bar, and em dash
99. 7-5=2 7−5=2
100. 867-5309 867‒5309
101. December 24 - 31 December 24 – 31 Mason-Dixon Line Mason–Dixon Line
102. No one -- not even Jim -- knew the answer. No one — not even Jim — knew the answer.
103. Brian Drum Nov 14, 1973 —
104. “I just don’t f——ing care about 3.0 browsers”
105. hyphen minus sign figure dash en dash horizontal bar em dash - - ‒ – ― — &#8208; &minus; &#8210; &ndash; &#8213; &mdash;
106. Thank You