95% of web design is written language. This means that we need to pay extra careful attention to typography. We have to make it easy for our audience to process and understand information quickly. This course will teach you how to present information on the screen for optimal legibility. You will also learn: How people scan and skim web content Use visual hierarchy to improve readability & increase comprehension How to set and size type for multiple screen sizes Optimal reading sizes for body copy, h1-h6, and p tags Techniques for combining fonts New possibilities with CSS3

1. @andigalpern #designtype @cascadesf

2. @andigalpern
#designtype @cascadesf
Andi Galpern

3. What is Typography?

4. Why is it important?

5. Typography
95%of design is

6. The main goal of design
is to improve comprehension.

7. The Anatomy of a Typeface

8. Let’s start with the basics.

9. Serif Sans-Serif

10. The Serif
Traditional purposes, long reading,
storytelling

11. Serifs were designed to improve
reading comprehension.
They connect letters and words
in large paragraphs of printed
text.

12. Sans-serif
neutral, clean simple, modern

13. Serif Sans-Serif

15. Pay attention to the x-height.

16. Learn about the anatomy of a typeface

18. Classifications of Type

19. http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications

20. http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications

21. http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications

22. font vs. typeface

23. Digital file that contains the typeface
.ttf, .otf
Font

24. Design of the alphabet
Typeface

25. To develop your gut instinct for typography,
start by learning the language of type. It will
take your typography from mere words on a
page to something that resonates. Learn what a
descender and an ear are; recognize the
differences between pixels, percentages, and
ems when sizing type; know when to use small
caps, an em dash, and more. Get the basic
principles, or the stuff that works most of the
time, under your belt and then take the leap on
your own.
jason santa maria
“on web typography”

26. Pairing Typefaces

27. When combining fonts
ALWAYS think about
Contrast

28. http://www.typography.com/techniques/

29. http://www.typography.com/techniques/

30. Selecting Typefaces
for your Brand

31. http://www.golivehq.co

32. Branding for print + screen are very similar.

33. How would you describe your brand?

34. Adventurous
Business-like
Fun
Cutting Edge
Functional
Reliable
Stable
Secure
Daring
Trustworthy
Describe your brand

35. Find typefaces that represent your
description.

36. print

40. web

41. Sans-serif is easier to read for the screen.

42. Sans-Serif is easier to read at smaller sizes.

43. Humanist typefaces
The best choice for setting type
for the screen.

44. Futura
Proxima Nova
Avenir
Gotham
Franklin Gothic
Brandon Grotesque
Helvetica Neue

45. Type libraries

46. Typekit, Google, H&J

53. Google Fonts has a new interface
and it’s useful!

54. Dear Future Andi,
This is your cue to open up
Google Fonts
and show off the new features!
https://fonts.google.com

58. Other Google fonts include

60. Jessica Hische’s guide to
choosing a sans-serif typeface

61. il1
il1
il1
il1
il1
il1
il1
il1
il1

62. Tip: If you are set on a particular typeface
which lacks contrast, select a different
typeface for numbers

63. Always use smart quotes

69. iOS and App Design

70. Mixing several different fonts can
make your app seem fragmented
and sloppy.
iOS Typography Rules
Not recommended —->

71. Instead, use one font and just a
few styles and sizes.
iOS Typography Rules
Better —->

72. Text should never be smaller
than 11 points, even at the
extra small size.
iOS Typography Rules

73. Body text default is 17pt.
iOS Typography Rules

74. At the smallest three text sizes, tracking values are
relatively wide; at the largest three text sizes,
tracking values are relatively tight.
iOS Typography Rules

75. Tip: Always Test!

76. pixels for web points for native
& mobile
How do we measure type?

78. Dear Andi,
This is where you open Principle
and demo how to preview type on
a mobile prototype.

79. System fonts
• These already installed on your computer.
• Some are better than others.
• Made for the screen
• AKA “browser safe” fonts

80. System fonts
Times
Verdana
Arial
Georgia
Lucida Grande

81. System fonts
Comic Sans Papyrus

82. System fonts
For a list of which system fonts you should use, visit
http://practicaltypography.com/system-fonts.html

83. System fonts
San Francisco
San Francisco UI Display

84. What are others doing?

85. Dear Andi,
This is where you open the
interface dissections.

87. “Sterling” custom typeface

88. font-family: Archer

89. font-family: Archer
Gotham

90. Gotham, Helvetica, Sans-serif

91. Benton Sans

92. Benton Sans

93. font-size: 16px;
line-height: 1.6em;
Georgia, Times New Roman
ESPN.com

94. Gotham

95. Setting type

96. Golden ratio of type

97. pearsonified.com/typography

98. Optimal line-length = 45-90 characters

99. Line-length refers to the width of a line.

100. Standard sizes of body, p, h1- h6
https://medium.com/@lukejonesme/3-typography-tips-for-a-
more-comfortable-read-fed478affa8d#.msy0xzt81

101. Choose your body text wisely.
http://practicaltypography.com/typography-in-ten-minutes.html

102. Body copy should be sized 15-25px.
http://practicaltypography.com/typography-in-ten-minutes.html

103. Line-height should be
120-145% of the text size.
http://practicaltypography.com/typography-in-ten-minutes.html

109. Kerning
http://type.method.ac/

110. Legibility

111. Readability

112. Make the scale obvious.

113. Contrast is key.

114. How do people read information?

115. Most people don’t read.
They skim and scan.

116. Useful sites

120. CSS3

121. rotate, add shadows, embed any typeface you want.

122. We’ve come a long way with web typography.

123. In conclusion

124. Typography is an art.

125. Learn (or re-learn) the basic
art principles and elements

126. Trace typefaces

127. Have fun with it!

128. Explore.

129. Always design with intent.