Are you tired of using the same old fonts in your Web designs? The type you use can say as much to your audience as the actual words on the page, but until now, Web designers have had an extremely limited palette of fonts from which to choose—essentially, Arial (yawn), Times (yawn), and Georgia (yawwwwwn). Design is about overcoming the limitations of a medium, and Web design is no different. In this session, Jason will show you how to use fluid typography, browser-safe fonts, and type on images to create robust scalable designs to achieve great typography without resorting to typing in images or Adobe Flash. You’ll also learn how to use CSS to download any font you want to use in your Web designs, and to use downloadable fonts, despite the limitations of some browsers.

1. { Many Types, Many Faces}
W e b T y p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a
Jason Cranford Teague
Bright Eye Media
jason_speaking
Voices That Matter | 29 April 2009
San Francisco, California

2. { Many Types, Many Faces}
W e b T y p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a
Jason Cranford Teague
Bright Eye Media
jason_speaking
Voices That Matter | 29 April 2009
San Francisco, California

3. { Many Types, Many Faces}
W e b T y p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a
Jason Cranford Teague
Bright Eye Media
jason_speaking
Voices That Matter | 29 April 2009
San Francisco, California

4. 3 Options

15. CSS Typography =

16. CSS Typography =
Limited Font
Choices

17. limits

18. design is about
limits

19. design is about
overcoming
limits

20. “Type Design is an act of
plagiarism in itself—you
basically recreate the
flesh of the same
skeleton.”
Alejandro Lo Celso Saravia

22. How many fonts are there?

23. How many fonts are there?
>100K Fonts

24. How many fonts are there
on the Web?

25. How many fonts are there
on the Web?
3 Fonts
Arial Times Georgia

26. Arial
Helvetica

27. Arial
Helvetica
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

28. Times
Times New Roman

29. Times
Times New Roman
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

30. Georgia

31. Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

32. Verdana
Trebuchet MS

33. Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Trebuchet MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

35. Andale Mono
Arial Black
Courier New
Comic Sans MS
Impact


36. Core Web Fonts

37. Core Web Fonts

38. Core Web Fonts
11 Fonts

40. EULA

41. EULA
End-User License Agreement

42. Installed Fonts

43. Windows XP

44. Windows XP
+9 Fonts
Franklin Gothic Medium
Lucid Console
Lucida Sans Unicode
Marlett
Microsoft Sans Serif
Palatino Linotype
Symbol
Tahoma
Wingdings

45. Windows Vista

46. Windows Vista
+7 Fonts
Calibri
Cambria
Candara
Consolas
Constantia
Corbel
Segoe UI

47. Mac OS X

48. Mac OS X
+31 Fonts
American
Courier Monaco
Typewriter
Didot Optima
Apple Chancery
Futura Papyrus
Apple Symbols
Geneva Tahoma
Baskerville
Gill Sans Taipei
Big Caslon
Helvetica Times
Brush Script
Helvetica Neue Zapf Dingbats
Chalkboard
Herculanum Zapfino
Charcoal CY
Hoefler Text
Cochin
Lucida Grande
Cooper
Marker Felt
Copperplate

49. Apple iLife

50. Apple iLife
+13 Fonts
Academy Engraved Palatino
Bank Gothic Portago
BlairMDITC TT Santa Fe
Bodoni SvtyTwo ITC TT Savoye
Bradley Hand ITC TT Snell Roundhand
Cracked Stone Sans
Handwriting – Dakota

51. Microso Office 2007

52. Microso Office 2007
+121 Fonts

53. Microso Office: Mac 2008

54. Microso Office: Mac 2008
+72 Fonts

55. MS Office:
Mac & Windows

56. MS Office:
Mac & Windows
62 Fonts

57. Web Safe Fonts

58. Windows

59. Windows
148 Fonts

60. Mac

61. Mac
134 Fonts

62. Mac & Windows

63. Mac & Windows
73 Fonts

64. Mac & Windows

65. Mac & Windows
Wide Latin

72. Web Safe Fonts

73. Web Safe Fonts
~180 Fonts

75. 100,000 - 180
=

76. 100,000 - 180
Still Not a Lot
=

80. Diavlo
www.josbuivenga.demon.nl

81. ...}
@font-face
{

82. font-family: Diavlo;
@font-face
{ src: url(’Diavlo_BOOK_II_37.otf’);
}

83. Name you give it.
font-family: Diavlo;
@font-face
{ src: url(’Diavlo_BOOK_II_37.otf’);
}

84. Name you give it.
font-family: Diavlo;
@font-face
{ src: url(’Diavlo_BOOK_II_37.otf’);
}
Path to font file.

85. font- georgia, times, “times new roman”, serif;
family :

86. Font-family name you give it.
font- diavlo, georgia, times, “times new roman”, serif;
family :

87. Download

88. Download Fonts

89. Download Fonts
Unlimited Fonts

90. File Format

91. File Formats

92. File Formats
True Type
Open Type

93. IP

94. IP
Intellectual Property

95. EULA

96. EULA
End-User License Agreement

97. File Formats

98. File Formats
Embedded
Open Type (.eot)

99. .ttf

100. .ttf
v3.1

101. .ttf

102. .ttf
Coming Soon

103. .ttf

104. .ttf
??????????

109. So...

111. Download Fonts
Web Safe Fonts
Core Web Fonts
Generic Font-families

112. h1 {
font-family : diavlo, georgia, times, “times new roman”,
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

113. Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”,
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

114. Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”,
Web Safe Fonts
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

115. Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”,
Web Safe Fonts Core Web Fonts
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

116. Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”,
Web Safe Fonts Core Web Fonts Generic Font-families
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

117. h1 {
font-family : diavlo, georgia, times, “times new roman”,
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula. Pellentesque
non felis vel lorem tempor ultricies. Class
aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.
Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae;
In hac habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
ultricies magna, id placerat lorem.

118. h1 {
font-family : diavlo, georgia, times, “times new roman”,
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula. Pellentesque
non felis vel lorem tempor ultricies. Class
aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.
Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae;
In hac habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
ultricies magna, id placerat lorem.

119. h1 {
font-family : diavlo, georgia, times, “times new roman”,
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula. Pellentesque
non felis vel lorem tempor ultricies. Class
aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.
Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae;
In hac habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
ultricies magna, id placerat lorem.

120. h1 {
font-family : diavlo, georgia, times, “times new roman”,
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula. Pellentesque
non felis vel lorem tempor ultricies. Class
aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.
Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae;
In hac habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
ultricies magna, id placerat lorem.

121. h1 {
font-family : diavlo, georgia, times, “times new roman”,
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula. Pellentesque
non felis vel lorem tempor ultricies. Class
aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.
Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae;
In hac habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
ultricies magna, id placerat lorem.

122. h1 {
font-family : diavlo, georgia, times, “times new roman”,
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula.
Pellentesque non felis vel lorem tempor
ultricies. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per
inceptos hymenaeos. Vestibulum ante
ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In hac
habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi

123. h1 {
font-family : diavlo, georgia, times, “times new roman”,
p{
font-family : corbel, verdana, helvetica, arial, sans-serif; }
Web Typography
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula. Pellentesque non
felis vel lorem tempor ultricies. Class aptent taciti
sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere
cubilia Curae; In hac habitasse platea dictumst.
Aenean venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi ultricies
magna, id placerat lorem.

124. design is about
overcoming
limits

125. Fluid
Typography

126. Choosing
Your Fonts

127. If you download a font or use a Web
Safe Font, always include a Core
Web Font and generic font-family as
h1 {
font-family : diavlo, georgia, times, “times new roman”,
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

128. If you download a font or use a Web
Safe Font, always include a Core
Web Font and generic font-family as
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”,
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

129. If you download a font or use a Web
Safe Font, always include a Core
Web Font and generic font-family as
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”,
Web Safe Fonts
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

130. If you download a font or use a Web
Safe Font, always include a Core
Web Font and generic font-family as
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”,
Web Safe Fonts Core Web Fonts
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

131. If you download a font or use a Web
Safe Font, always include a Core
Web Font and generic font-family as
Download Fonts
h1 {
font-family : diavlo, georgia, times, “times new roman”,
Web Safe Fonts Core Web Fonts Generic Font-families
p{
font-family : corbel, verdana, arial, helvetica, sans-serif; }

132. For headline copy use fonts with
similar widths and kerning.
Web Typography

133. For headline copy use fonts with
similar widths and kerning.
Web Typography

134. For body copy select fonts with
bold, italic, and bold/italic versions.

135. For body copy select fonts with
bold, italic, and bold/italic versions.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula.
Pellentesque non felis vel lorem tempor
ultricies. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per
inceptos hymenaeos. Vestibulum ante
ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In hac
habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
ultricies magna, id placerat lorem.
Arial

136. For body copy select fonts with
bold, italic, and bold/italic versions.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula.
Pellentesque non felis vel lorem tempor
ultricies. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per
inceptos hymenaeos. Vestibulum ante
ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In hac
habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
ultricies magna, id placerat lorem.
Arial

137. For body copy select fonts with
bold, italic, and bold/italic versions.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula.
Pellentesque non felis vel lorem tempor
ultricies. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per
inceptos hymenaeos. Vestibulum ante
ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; In hac
habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
ultricies magna, id placerat lorem.
Microsoft Sans Serif

138. Test the different fonts in different
combinations.
Web Typography
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula. Pellentesque
non felis vel lorem tempor ultricies. Class
aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos.
Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae;
In hac habitasse platea dictumst. Aenean
venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi
ultricies magna, id placerat lorem.

139. Test the different fonts in different
combinations.
Web Typography
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc sed ligula. Pellentesque non
felis vel lorem tempor ultricies. Class aptent taciti
sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere
cubilia Curae; In hac habitasse platea dictumst.
Aenean venenatis hendrerit tellus. Nunc posuere,
nulla quis sollicitudin pretium, dui mi ultricies
magna, id placerat lorem.

140. { Web Beyond A r i a l and T i m e s and G e o r g i a
jason cranford teague
www.speaking-in-styles.com/web-
typography
Fluid Typography
font-family : diavlo, quot;big caslonquot;, quot;bell mtquot;, georgia,
serif;
Download Fonts Web Safe Fonts Core Web Fonts Generic Font Families
@font { List Available at: andale mono, arial serif, sans-serif,
font-family: diavlo; tinyurl.com/ (helvetica), arial black, monospace, cursive,
src: 5qr64g comic sans ms, courier new fantasy
url(’Diavlo.otf’); } georgia, impact, times new
roman (times), trebuchet
ms, verdana, web dings
Referenced Web Pages Choosing Your fonts
More Information
lescure.com Web Typography: Tell Me What You
Test the different fonts in different combinations.
sci-fi.om Want
For headline copy, use fonts with similar widths and tinyurl.com/4rtccs
aol.com
kerning. Download Fonts Tutorial
yahoo.com tinyurl.com/5rfhsk
msn.com For body copy, select fonts with bold, italic, and bold/
italic versions. Web Safe Fonts Tutorial
de-facto.com tinyurl.com/4ud39p
cameronmoll.com If you download a font or use a Web Safe Font, always
include a Core Web Font and generic font-family as
boutique-dammann.com back-ups.
ilovetypography.com speaking-in-
thefwa.com styles.com
emigre.com
chank.com
josbuivenga.demon.nl
www.princexml.com/howcome/2008/
webfonts/

142. www.speaking-in-styles.com/web-typography

144. { Many Types, Many Faces}
W e b T y p o g r a p h y Beyond A r i a l and T i m e s and G e o r g i a
Questions
www.speaking-in-styles.com/web-typography
jason_speaking
www.brighteyemedia.com