Typography, all of it.

1. Web Typography
A Long Dark Rant

2. 95% of the
information on the
web is written
language
http://ia.net/blog/the-web-is-all-about-typography-period/

3. Typography is the
visual expression of
language

5. We are all typographers
Yes, you, internet people

6. Ryan LaBouve
UX • Designer • Typographer
me
@RyanLaBouve

7. @RyanLaBouve

8. HolyArchers
@RyanLaBouve

9. Soon to be Dad
@RyanLaBouve

10. @RyanLaBouve

11. Why I’m personally
interested in typography
Tim Brown’s More Perfect Typography
After watching this I
knew I was supposed to
be a designer.
http://vimeo.com/17079380

12. 3 Goals Today
• Show the impact of typography
• Show where typography is from and where
its’ going
• Give you practical ways to practice (on as
many platforms as possible)

13. Obstacles
• Type is hard
• There are no rules
• There are a lot of variables

14. Worth It
• Happier Users
• Represents Content Better
• Works on more platforms

15. All typographic knowledge
Knowledge you need for proficiency
What you need to know to be good
Good News

16. Our Project
http://publicdomainreview.org/collections/george-withers-emblem-book-1635/
Before
After

17. History

18. Where do letters
come from?

19. The history of typography reflects a continual tension between
hand and machine. Organic and the geometric, the human body
and the abstract system. These tensions, which marked the birth
of printed letters over five hundred years ago, continue to
energize typography today.
—Ellen Lupton in Thinking With Type
“
”

20. Modern Writing Systems
Arabic (Abjad)
Hangul (Syllabic)
Latin (Alphabetic)
French
Spanish
Italian
English
Dutch
German
Irish
Welsh
Czech
Polish
Chinese (Logographic)

21. Ancient
Egyptian
Abbreviated History of Our Alphabet
Phoenician Greek
(logographic with alphabetic
elements)
4000
BC
Latin
1200
BC
800
BC
700
BC
(Essentially the “latin” or
“roman” alphabet)

22. Early Latin Writing
Uncial (400)Roman Capitals (Trajan)

23. Blackletter (12th-15th)Carolingian (9th)

24. Invention of
Movable Type

25. Evolution of Type

26. Gutenberg’s Textura (1450) Garamond (1530)
Old StyleTextura
http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/

27. Transitional
Caslon (1720) Bodoni (1798)
Modern
http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/

28. Humanist Sans
Gill Sans (1926)
Egyptian/Slab Serif
1815
http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/

29. Geometric Sans
FuturaHelvetica
Transitional Sans-serif
http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/

30. Digital Type

31. Bitmap Fonts Word Processing

32. Now Everyone’s a Typography
Bleeding Cowboy Lobster
Payparus

33. Digital fonts, human origins

34. Demo
https://github.com/ryanlabouve/type-talk-demo

35. Content + Reset

36. Add Markup

37. Organize

38. Define Containers

39. Choosing Typeface

40. Choosing Typeface

41. Choosing Typeface

42. Typographic Scale

43. Proofread, Edit, Augment

44. Typographic Hierarchy

45. Before/After

46. Mechanics

47. Quick Technical
Disclaimer

48. Examples assume level of
html/css knowledge
#webTypography

49. Additional Resources
Pixels vs EM vs REM (and vh, vw)
Mapping Typography to CSS (don’t fear web typography)
HTML/CSS Typography Primer
http://j.eremy.net/confused-about-rem-and-em/
http://adamschwartz.co/magic-of-css/chapters/5-typography/
http://www.dontfeartheinternet.com/css/don%E2%80%99t-fear-web-
typography
http://css-tricks.com/viewport-sized-typography/

50. Including web fonts
http://css-tricks.com/snippets/css/using-font-face/
Self Hosting
Generating Fonts for the Web
http://www.fontsquirrel.com/tools/webfont-generator
Using a Service
https://developers.google.com/fonts/docs/getting_started

51. font-family
font-weight
font-font size
letter-spacing
max-width
line-height
Which Font
How Bold/Light
Font Size
Letter Spacing
Measure
Leading
CSS IRL

52. Anatomy of a
Typeface

57. • X-height
• Stroke contrast
• Reading Test
!
Legibility

62. Choosing a Typeface
• Appropriate for Context
• Font Quality
• Legibility
• Affordable?

63. Display vs Body
Poster vs Reading
OR
Appropriate for Context

64. Appropriate for Context

65. via Typekit.com
Appropriate for Context

66. What kind of party?
Appropriate for Context

67. Appropriate for Context
________ Party

68. Appropriate for Context
Cocktail Party

69. ________ Party
Appropriate for Context

70. Slumber Party
Appropriate for Context

71. Appropriate for Context
___ Party

72. Appropriate for Context
LAN Party

73. Appropriate for Context
___ Party

74. Appropriate for Context
D&D Party

75. Slumber Party
Appropriate for Context
LAN Party
D&D Party
Cocktail Party

76. Set some type;
in context
Read it.
Like it?
Appropriate for Context

77. Good Inspiration
What do other designers use?
Quality

78. Font In Use
http://fontsinuse.com/

79. Typespiration
http://typespiration.com/

80. Superfamilies
Typefaces with large families
Quality

82. weights & Styles
Weight & Styles

83. Character Support
Do you need something that supports other languages?
Quality

84. https://www.google.com/fonts/specimen/PT+Sans
PT Sans, Characters

85. Affordable?
Purchasing/Procuring Fonts

86. Free Web Fonts

87. http://losttype.com/
theleagueofmoveabletype.com

88. Not Free Web Fonts
but awesome
^

89. Foundries
Buy from individuals.
Possibly host yourself

90. Services
Aggregate Fonts
Usually Host for You

92. For this Demo
Free
Legible
Book Club Party

93. https://www.google.com/fonts

94. Narrowed it down

96. Paragraphs

97. Typesetting
Tricks

98. 1. Leading
2. Measure
3. Kerning
4. Tracking
5. Word Spacing
6. Hyphenation

99. Leading
The Space between Lines
CSS: line-height
120%-140% of font size
1

100. MeasureLength of Lines of Text
CSS: max-width
45-80 Character
2

101. K erning
Spaces between letters
http://xkcd.com/1015/
http://letteringjs.com/
http://www.kernjs.com/
http://kerningjs.com/
3

102. T r a c k i n g
even spacing between every character
CSS: letter-spacing4

103. Word Spacing
Avoid messing with wordspacing
CSS: word-spacing5

104. Hyphenation & Justification
Lacking on the web
6

105. Tempo The sum of leading, measure, kerning,
tracking, word-spacing, and H&J
Narrow, Faster Tempo Wide, Slower Tempo

106. Nothing Done

107. Measure

108. Leading, Letter spacing, Tracking…

109. Hierarchy

110. Hierarchy is simply creating
CONTRAST

111. Contrast
Use size, color, and space
to differentiate content

112. Typographic Scale
Like a music scale. Creates harmony.

113. Organization
Group similar content. Make more important
content more prominent

114. Edit
Correct grammar & remove
unnecessary content
practicaltypography.com
Additional Resources
smartquotesforsmartpeople.com

115. Strategies

116. Media Queries + Relative Unites
Responsive
Typography 101

117. Why does our
demo currently
fail?

118. Phones.

119. Solution

120. PX -> (R)EM
Use relative units

121. /* Target / Context = Result */

123. Change font-size on
body(%), rest of
document resizes
mmmmmm…. relative units

125. Use media queries to
establish breakpoints and
make adjustments

126. Adjust via breakpoints

127. font-size: 100%
>1100px

128. 90%
<1100px
(Moved Aside to Bottom)
<840px

129. 90%
Before Now
<590

130. Target Specific
Problems

131. Headlines are Still too Big
Fix with Media Queries

132. Before Now

133. All kinds of things
Future of WebType

134. http://fittextjs.com/http://letteringjs.com/
Javascript Steps In

135. Molten Leading
http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-
height/

136. Face Detection
http://webdesign.maratz.com/lab/responsivetypography/realtime/

137. Dynamic Resizing

138. http://modularscale.com/scale/?px1=25&px2=1024&ra1=1.25&ra2=0
Abril Text+Titling
The End