More Related Content Similar to The NEW Web Typography: Where the Sexy Is (20) More from Jason CranfordTeague (9) The NEW Web Typography: Where the Sexy Is35. Andale Mono
11
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
f Times New Roman
!
Trebuchet MS
CORE WEB FONTS Verdana
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
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
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
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
67. YOUR FONT
web
page
User's Computer
your
server @font-face
font-file
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
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;
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;
}
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
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
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.
110. choose for LEGIBILITY…
Diavlo
Looking Glass
Weight & Thickness Strokes & Serifs
Tahoma
Looking Glass
112. choose for READABILITY…
letter spacing letter width
Tahoma
Looking Glass x-height
counter width
113. choose for REPERTOIRE
STYLES
OPTIMIZATION
COMPATIBILITY
LEGIBILITY
READIBLITY
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
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
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…