1. THENEWWEB
TYPOGRAPHY
WHERE THE SEXY IS
JASON CRANFORD TEAGUE
@
jasonspeaking.com | @jasonspeaking
forumone.com | @forumone
edUi | 14 September 2011

2. LET'S GO 

3. WHAT IS
SEXY?

19. folha de s. paulo newspaper

20. WEB
TYPOGRAPHY=
HTML + CSS = SEXY?

21. WEB
BORING
TYPOGRAPHY=
HTML + CSS = SEXY?

29. SO…
What's been the problem?

30. Q1
HOW MANY FONTS ARE THERE?
1,500,000
150,000
15,000
1,500

31. 150K

DIGITAL FONTS

32. Q2
HOW MANY FONTS ARE
COMMONLY USED ON THE WEB?
18
11
10
5

33. Q2
HOW MANY FONTS ARE
COMMONLY USED ON THE WEB?
18
11
10
5

34. Q2
HOW MANY FONTS ARE
COMMONLY USED ON THE WEB?
18
11
10
5

35. Andale Mono
11
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
f Times New Roman
!
Trebuchet MS
CORE WEB FONTS Verdana


36. If Fonts Were Dogs…
fuckyeahdementia.com

37. Andale Mono
11
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
f Times New Roman
!
Trebuchet MS
CORE WEB FONTS Verdana


38. 115 Andale Mono
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
f Times New Roman
!
Trebuchet MS
CORE WEB FONTS Verdana


39. Verdana
Georgia
Trebuchet MS
Arial
Times New Roman

40. Arial
Georgia
Times New Roman
Trebuchet MS
Verdana

42. A A A A A A
A A A A A A
A A A A A
A A A A A

43. and A Brand BBrand
C Brand D Brand E
Brand X
and F Brand
G Brand H Brand I
rand J Brand K Bran
d S Brand R Brand T

44. typography::type
voice::speech

48. SO…
Where are the fonts on the web?

49. 182
!
f
WEB SAFE FONTS
Windows & Mac Fonts

50. 66
!
f
WEB SAFE FONTS
Common Denominator

51. Websafe Fontsß 3 I
Font Name Weight and Style OS Rank Sample
1 Academy Engraved LET 3-Likely
2 Agency FB bold 4-Less Likely
3 Algerian 4-Less Likely
4 American Typewriter bold 2-Almost Certain
5 Andale Mono 1-Certain
6 Apple Chancery 2-Almost Certain
7 Apple Symbols 2-Almost Certain
8 Arial bold, italic, bold/italic 1-Certain

52. @ 2008
Safari Supports TTF & OTF Formats

53. @ 2008
2009
All Browsers Support Webfonts

54. @ 2008
2009
2010
The Year of Web Typography

55. @ 2008
2009
2010
2011
Web Typography is Sexy

59. 40K
@
WEBFONTS

60. WHERE DO
WEBFONTS COME
FROM?
@ @ $ @ ⎋
convert buy lease

61. @
THENEWWEB
TYPOGRAPHY
WEBTYPE
BASICS

62. LET'S GO 

63. WHAT IS A
WEBFONT?

64. WEBFONT
or web font
e space
notice th

65. WEBFONT
Font file downloaded from a web
server and used by the browser to
render HTML text.

66. WEBFONTS
Your
your Your Computer
font
font-file
Server
server file

67. YOUR FONT
web
page
User's Computer
your
server @font-face
font-file

68. 5
@
WEBFONT FILE FORMATS

69. BROWSER WEBFONT
EOT ✔4
TTF/OTF ✔ 3.5 ✔ 3.1 ✔ 10
SVG ✔ 3.1 ✔3 ✔ 10
WOFF ✔9 ✔ 3.6 ? ✔6 ✔ 11

70. MOBILE WEBFONT
EOT
TTF/OTF ✔ 4.2 ✔ 2.2 ✔6
SVG ✔ 3.1
WOFF

71. WEBFONTS
.eot file
font-file
.ttf/.otf
font-file
file
Your
your
Server
server
Your Computer
font-file
.svg file
.wo
font-file
file

72. BUILDING A
FONTSTACK
Adding a webfont

73. Star generic
understudy
font-family:%'gill%sans%MT',%arial,%sans-serif;

74. Websafe generic
core web
font-family:%'gill%sans%MT',%arial,%sans-serif;

75. /fonts
myfont-webfont.eot
myfont-webfont.otf
myfont-webfont.svg
myfont-webfont.woff

76. name you give it
@font-face%{ font-family:%Diavlo;
src:%url('fonts/Diavlo_BOOK_II_37.otf');
}
path to font file

77. name you give it
@font-face%{ font-family:%'body%copy';
src:%url('fonts/Diavlo_BOOK_II_37.otf');
}
path to font file

78. name you give it ?# fixes IE
@font-face%{ font-family:%'body%copy';
src:%url('myfont-webfont.eot');
src:%url('myfont-webfont.eot?#iefix')%
%%%%%%%%%%format('embedded-opentype'),%
% %url('myfont-webfont.woff')%format('woff'),%
% %url('myfont-webfont.ttf')%%format('truetype'),
% %url('myfont-webfont.svg#webfontFqDaNIX6')%
%%%%%%%%%%format('svg');
}

79. name you gave it
font-family:%diavlo,%'gill%sans%MT',%arial,%sans-serif;

80. name you gave it
font-family:%
'body%copy',%'gill%sans%MT',%arial,%sans-serif;

81. @font-face%{ font-family:%'body%copy%bold';
src:%url('myfont-bold-bold-webfont.eot');%
src:%url('myfont-bold-webfont.eot?#iefix')%
%%%%%%%%format('embedded-opentype'),%
% %url('myfont-bold-webfont.woff')%format('woff'),%
% %url('myfont-bold-webfont.ttf')%%format('truetype'),
% %url('myfont-bold-webfont.svg#webfontFqDaNIX6')%
%%%%%%%%format('svg');
}

82. @font-face%{ font-family:%'body%copy';
src:%url('myfont-bold-webfont.eot');%
src:%url('myfont-bold-webfont.eot?#iefix')%
%%%%%%%%format('embedded-opentype'),%
% %url('myfont-bold-webfont.woff')%format('woff'),%
% %url('myfont-bold-webfont.ttf')%%format('truetype'),
% %url('myfont-bold-webfont.svg#webfontFqDaNIX6')%
%%%%%%%%format('svg');
font-weight:%bold;
font-style:%normal;
}

83. @font-face%{ font-family:%'body%copy';
src:%url('myfont-webfont.eot');%
src:%url('myfont-webfont.eot?#iefix')%
%%%%%%%%format('embedded-opentype'),%
% %url('myfont-webfont.woff')%format('woff'),%
% %url('myfont-webfont.ttf')%%format('truetype'),
font-weight:%bold;
font-style:%normal;
}

84. @font%face,{ font%family:,'body,copy';
src:,url('myfont%webfont.eot');,
src:,url('myfont%webfont.eot?#iefix'),
,,,,,,,,format('embedded%opentype'),,
, ,url('myfont%webfont.woff'),format('woff'),,
, ,url('myfont%webfont.ttf'),,format('truetype'),
font%weight:,normal;
font%style:,normal;
}
@font%face,{ font%family:,'body,copy';
src:,url('myfont%bold%webfont.eot');,
src:,url('myfont%bold%webfont.eot?#iefix'),
,,,,,,,,format('embedded%opentype'),,
, ,url('myfont%bold%webfont.woff'),format('woff'),,
, ,url('myfont%bold%webfont.ttf'),,format('truetype'),
font%weight:,bold;
font%style:,normal;
}
@font%face,{ font%family:,'body,copy';
src:,url('myfont%italic%webfont.eot');,
src:,url('myfont%italic%webfont.eot?#iefix'),
,,,,,,,,format('embedded%opentype'),,
, ,url('myfont%italic%webfont.woff'),format('woff'),,
, ,url('myfont%italic%webfont.ttf'),,format('truetype'),
font%weight:,normal;
font%style:,italic;
}

85. WHERE DO I
FIND
WEBFONTS?

86. CONVERT, BUY OR
LEASE?

87. CONVERT, BUY OR
LEASE?
conversion — YOUR FONT
retailers — YOUR FONT
web font service bureaus — THEIR FONT

88. YOUR FONT
web
page
User's Computer
your
server @font-face
font-file

89. THEIR FONT
web
your page
server User's Computer
@font-face, <link>
JavaScript
WFSB
server font-file

90. CONVERT? @
➡Any Font
➡You control quality
➡You control the code
➡Sub-setting

91. EULA
End User License Agreement

92. IP
Intellectual Property

93. LOOKING FOR… @
➡ EULA? Are you breaking the law?
➡Server load?
➡Screen Quality?

96. BUY? @ $
✓ One Time Price
✓ Desktop Use
✓ Unlimited Domains
✓ Unlimited Page Views
✓ Many are free

97. LOOKING FOR… @ $
✓ Webfont linking in EULA
✓Compression
✓ Formats
✓ Price Structure

98. RETAILERS @ $
RETAILER
FontSquirrell FontSpring MyFonts Kernest
FontShop
Webfonts 660 1800+ 100+ 37,296 2543
families families families fonts famalies
Subset ✔ ✔ ✔
eot, otf, ttf, svg &
Formats woff
eot, ttf, svg & woff eot & woff eot, ttf, svg & woff eot, ttf, svg & woff
Price Free $80-860 Free-$100 $10-$160 free–$15
/ws /ws /font /font
URL fontsquirrell.com fontspring.com fontshop.com myfonts.com kernest.com

99. LEASE? @ ⎋
➡ No license worries
➡ No cross browser worries
➡ Reduces server strain
➡ Quality Fonts

100. LOOKING FOR… @ ⎋
✓Available Fonts or Font Families
✓How Fonts are Added
✓Local Use
✓Bandwidth Usage
✓Price Structure

101. @
WEBFONT SERVICE BUREAUS ⎋
WFSB
Google Web Fonts fonts.com WebInk FontDeck WebType
Webfonts 150+ 10,000+ 2283 735 580+
families fonts fonts families families
<js> or
Embed <link> @font-face <link> <link>
@font-face
Local ✔ ✔ ✔
Subset ✔ ✔ ✔ ✔
Bandwidth Unlimited 25K–12.5M 1–80GB 1M 250K–2.5M
pageviews/month month pageviews/month pageviews/month
Billing Free Free–$500 99¢–$59.99 $2.50–19.99 $40–400
unlimited/month 4ws/month font/year font/yeat
URL google.com/webfonts webfonts.fonts.com webink.com fontdeck.com webtype.com

102. @
WEBFONT SERVICE BUREAUS ⎋
WFSB
FontsLive Typekit Kernest Typotheque Typonine
Webfonts 499 4000 2503 40 20
fonts fonts fonts families families
<js> or <link> or
Embed <js> <link> <link>
@font-face @font-face
Local ✔ ✔ ✔ ✔
Subset ✔ ✔ ✔ ✔
Bandwidth 250K–12.5M 25K–1M Unlimited Unlimited 500MB
pageviews/month pageviews/month /month free
Billing $40–$2,000 Free–$99.99 Free–$15 $100–900 €2
unlimited/year /year /font/year/ws /family additional GB/month
URL fontslive.com typekit.com kernest.com typotheque.com typonine.com

104. HOW DO I
CHOOSE
WEBFONTS?

105. choose for REPERTOIRE…

106. choose for STYLES…
Cambria
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.

107. choose for STYLES…
Baskerville
Old Face 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.

108. choose for OPTIMIZATION…

109. choose for COMPATIBILITY…

110. choose for LEGIBILITY…
Diavlo
Looking Glass
Weight & Thickness Strokes & Serifs
Tahoma
Looking Glass

111. choose for LEGIBILITY…
Slab Serif

112. choose for READABILITY…
letter spacing letter width
Tahoma
Looking Glass x-height
counter width

113. choose for REPERTOIRE
STYLES
OPTIMIZATION
COMPATIBILITY
LEGIBILITY
READIBLITY

114. VOICE!!!

115. typography::type
voice::speech

117. A A A A A A
A A A A A A
A A A A A
A A A A A

118. and A Brand BBrand
C Brand D Brand E
Brand X
and F Brand
G Brand H Brand I
rand J Brand K Bran
d S Brand R Brand T

119. IF I SAY…
“I’m going to kill you”

120. “I’m going to kill you”
Suave = Cooper Black
“I’m going to kill you”
Robotic = Synchro LET
“I’m going to kill you”
Insane = Sybil Green
“I’m going to kill you”
Pirate = UglyQua

121. HOW DO I
MAKE WEB
TYPOGRAPHY
SEXY?

122. use CONTRAST…
High Color Contrast

123. use CONTRAST…
Low Color Contrast

124. use CONTRAST…
Mixed Color Contrast

125. use CONTRAST…
Stylecontrast

126. use CONTRAST…
widthContrast

127. use CONTRAST…
TypefaceContrast

128. use CONTRAST…
multiContrast

132. use SPACE…
Looking-Glass house
One thing was certain, that the white kitten had
had nothing to do with it:--it was the black
kitten's fault entirely. For the white kitten had
been having its face washed by the old cat for
the last quarter of an hour (and bearing it
pretty well, considering); so you see that it
couldn't have had any hand in the mischief.

133. use SPACE
Looking-Glass house
One thing was certain, that the white kitten
had had nothing to do with it:--it was the
black kitten's fault entirely. For the white
kitten had been having its face washed by
the old cat for the last quarter of an hour
(and bearing it pretty well, considering);
so you see that it couldn't have had any

136. use SCALE…
LARGE
small

138. use TEXTURE…
Drop Shadow

139. use TEXTURE…
Emboss or Bevel

141. use CONSISTENT
VARIATION…

143. MAKE IT SEXY…

144. forumone.com

145. fluidwebtype.info

146. THENEWWEB
TYPOGRAPHY
QUESTIONS @
jasonspeaking.com | me@jasonspeaking.com | @jasonspeaking

147. THANKS!
www.jasonspeaking.com
me@jasonspeaking.com
@jasonspeaking