the new web typography: where the sexy is
DESCRIPTION
2010 was the year of web typography—the year new technologies came online that will forever change the way information appears online. As the dust settles from the advances of web fonts and CSS3, a new style of web typography is emerging, one that reflects print origins, but is also experimenting with the unique strengths of online communication. Learn about recent advances in technology through case studies at the boundaries of online typography. See how to use the new web typography to set your work apart from the rest of the herd.TRANSCRIPT
![Page 1: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/1.jpg)
@!THENEWWEB TYPOGRAPHYWHERE THE SEXY IS
JASON CRANFORD TEAGUEjasonspeaking.com | @jasonspeaking
forumone.com | @forumone
edUi | 14 September 2011
![Page 2: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/2.jpg)
@!LET'S GO
![Page 3: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/3.jpg)
WHAT IS SEXY?
![Page 4: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/4.jpg)
![Page 5: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/5.jpg)
![Page 6: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/6.jpg)
![Page 7: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/7.jpg)
![Page 8: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/8.jpg)
![Page 9: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/9.jpg)
![Page 10: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/10.jpg)
![Page 11: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/11.jpg)
![Page 12: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/12.jpg)
![Page 13: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/13.jpg)
![Page 14: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/14.jpg)
![Page 15: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/15.jpg)
![Page 16: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/16.jpg)
![Page 17: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/17.jpg)
![Page 18: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/18.jpg)
![Page 19: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/19.jpg)
folha de s. paulo newspaper
![Page 20: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/20.jpg)
WEB TYPOGRAPHY=HTML + CSS = SEXY?
![Page 21: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/21.jpg)
WEB TYPOGRAPHY=HTML + CSS = SEXY?BORI
NG
![Page 22: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/22.jpg)
![Page 23: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/23.jpg)
![Page 24: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/24.jpg)
![Page 25: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/25.jpg)
![Page 26: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/26.jpg)
![Page 27: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/27.jpg)
![Page 28: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/28.jpg)
![Page 29: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/29.jpg)
SO…What's been the problem?
![Page 30: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/30.jpg)
1,500,000
150,000
15,000
1,500
Q1HOW MANY FONTS ARE THERE?
![Page 31: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/31.jpg)
150KDIGITAL FONTS
![Page 32: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/32.jpg)
Q2 HOW MANY FONTS ARE COMMONLY USED ON THE WEB?
18
11
10
5
![Page 33: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/33.jpg)
Q2 HOW MANY FONTS ARE COMMONLY USED ON THE WEB?
18
11
10
5
![Page 34: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/34.jpg)
Q2 HOW MANY FONTS ARE COMMONLY USED ON THE WEB?
18
11
10
5
![Page 35: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/35.jpg)
11CORE WEB FONTS
Andale Mono
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
ImpactTimes New Roman
Trebuchet MS
Verdana!f
![Page 36: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/36.jpg)
fuckyeahdementia.com
If Fonts Were Dogs…
![Page 37: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/37.jpg)
11CORE WEB FONTS
Andale Mono
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
ImpactTimes New Roman
Trebuchet MS
Verdana!f
![Page 38: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/38.jpg)
11CORE WEB FONTS
Andale Mono
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
ImpactTimes New Roman
Trebuchet MS
Verdana!f
5
![Page 39: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/39.jpg)
Arial
Georgia
Times New Roman
Trebuchet MS
Verdana
![Page 40: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/40.jpg)
ArialGeorgiaTimes New Roman
Trebuchet MS
Verdana
![Page 41: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/41.jpg)
![Page 42: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/42.jpg)
AA A A AAA A A A
AA A A �
A
A
AA A A AA
AA A A AA
![Page 43: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/43.jpg)
Brand D
Brand IBrand H
Brand EBrand BBrand M
Brand F Brand NBrand C
Brand A
Brand GBrand KBrand J Brand Q
Brand X
Brand R Brand TBrand S
![Page 44: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/44.jpg)
typography::type
voice::speech
![Page 45: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/45.jpg)
![Page 46: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/46.jpg)
![Page 47: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/47.jpg)
![Page 48: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/48.jpg)
SO…Where are the fonts on the web?
![Page 49: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/49.jpg)
!f182WEB SAFE FONTSWindows & Mac Fonts
![Page 50: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/50.jpg)
!f66WEB SAFE FONTSCommon Denominator
![Page 51: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/51.jpg)
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
9 Arial Black 1-Certain
10 Arial Narrow bold, italic, bold/italic 3-Likely
11 Arial Rounded MT Bold bold 3-Likely
12 Arial Unicode MS 4-Less Likely
13 Bank Gothic 3-Likely
14 Baskerville bold, italic, bold/italic 2-Almost Certain
15 Baskerville Old Face 4-Less Likely
16 Bauhaus 93 4-Less Likely
17 Bell MT bold, italic 4-Less Likely
18 Berlin Sans FB bold 4-Less Likely
19 Berlin Sans FB Demi Bold 4-Less Likely
20 Bernard MT Condensed 4-Less Likely
21 Big Caslon 2-Almost Certain
22 Blackadder ITC 4-Less Likely
23 BlairMDITC TT 3-Likely
24 Bodoni MT bold, italic 4-Less Likely
25 Bodoni MT Condensed bold, italic, bold/italic 4-Less Likely
26 Bodoni MT Poster Compressed 4-Less Likely
Websafe Fontsß3Introduction | TBD | Back to Fluid Web Type →
Font NameFont Name Weight and StyleWeight and Style OSOS RankRank SampleSample
![Page 52: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/52.jpg)
Safari Supports TTF & OTF Formats
2008@!
![Page 53: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/53.jpg)
@!20082009
All Browsers Support Webfonts
![Page 54: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/54.jpg)
@!The Year of Web Typography
200820092010
![Page 55: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/55.jpg)
@!2008200920102011Web Typography is Sexy
![Page 56: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/56.jpg)
![Page 57: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/57.jpg)
![Page 58: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/58.jpg)
![Page 59: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/59.jpg)
40KWEBFONTS
@!
![Page 60: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/60.jpg)
⎋@!$@!@!convert buy lease
WHERE DO WEBFONTS COME FROM?
![Page 61: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/61.jpg)
@!THENEWWEB TYPOGRAPHY
WEBTYPEBASICS
![Page 62: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/62.jpg)
@!LET'S GO
![Page 63: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/63.jpg)
WHAT IS A WEBFONT?
![Page 64: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/64.jpg)
or web font
notice the space
WEBFONT
![Page 65: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/65.jpg)
WEBFONTFont file downloaded from a web server and used by the browser to render HTML text.
![Page 66: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/66.jpg)
font-filefont file
your serverYour
Server
WEBFONTS
Your Computer
![Page 67: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/67.jpg)
webpage
font-file
your server @font-face
YOUR FONT
User's Computer
![Page 68: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/68.jpg)
5WEBFONT FILE FORMATS
@!
![Page 69: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/69.jpg)
BROWSER WEBFONT
EOT
TTF/OTF
SVG
WOFF
✔ 4
✔ 3.5 ✔ 3.1 ✔ 10
✔ 3.1 ✔ 3 ✔ 10
✔ 9 ✔ 3.6 ? ✔ 6 ✔ 11
![Page 70: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/70.jpg)
MOBILE WEBFONT
EOT
TTF/OTF
SVG
WOFF
✔ 4.2 ✔ 2.2 ✔ 6
✔ 3.1
![Page 71: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/71.jpg)
your serverYour
Server
WEBFONTS
font-file.eot file
font-file.ttf/.otf file
font-file.svg file
font-file.wo! file
Your Computer
![Page 72: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/72.jpg)
BUILDING AFONTSTACKAdding a webfont
![Page 73: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/73.jpg)
'gill%sans%MT',%arial,%sans-serif;font-family:%
Starunderstudy
generic
![Page 74: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/74.jpg)
'gill%sans%MT',%arial,%sans-serif;font-family:%
Websafecore web
generic
![Page 75: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/75.jpg)
/fontsmyfont-webfont.eotmyfont-webfont.otfmyfont-webfont.svgmyfont-webfont.woff
![Page 76: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/76.jpg)
@font-face%{
name you give it
font-family:%Diavlo;src:%url('fonts/Diavlo_BOOK_II_37.otf');}
path to font file
![Page 77: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/77.jpg)
@font-face%{
name you give it
font-family:%'body%copy';src:%url('fonts/Diavlo_BOOK_II_37.otf');}
path to font file
![Page 78: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/78.jpg)
@font-face%{
name you give it
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');}
?# fixes IE
![Page 79: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/79.jpg)
diavlo,%'gill%sans%MT',%arial,%sans-serif;font-family:%
name you gave it
![Page 80: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/80.jpg)
font-family:%
name you gave it
'body%copy',%'gill%sans%MT',%arial,%sans-serif;
![Page 81: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/81.jpg)
@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');}
![Page 82: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/82.jpg)
@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;}
![Page 83: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/83.jpg)
@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;}
![Page 84: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/84.jpg)
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;}
@font%face,{
![Page 85: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/85.jpg)
WHERE DO I FIND
WEBFONTS?
![Page 86: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/86.jpg)
CONVERT, BUY OR LEASE?
![Page 87: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/87.jpg)
CONVERT, BUY OR LEASE?conversion — YOUR FONTretailers — YOUR FONTweb font service bureaus — THEIR FONT
![Page 88: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/88.jpg)
webpage
font-file
your server @font-face
YOUR FONT
User's Computer
![Page 89: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/89.jpg)
WFSB server
webpage
font-file
your server
@font-face, <link> JavaScript
THEIR FONT
User's Computer
![Page 90: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/90.jpg)
CONVERT?➡Any Font
➡You control quality
➡You control the code
➡Sub-setting
@!
![Page 91: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/91.jpg)
EULAEnd User License Agreement
![Page 92: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/92.jpg)
IPIntellectual Property
![Page 93: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/93.jpg)
LOOKING FOR…
➡ EULA? Are you breaking the law?
➡Server load?
➡Screen Quality?
@!
![Page 94: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/94.jpg)
![Page 95: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/95.jpg)
![Page 96: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/96.jpg)
$@!✓ One Time Price
✓ Desktop Use
✓ Unlimited Domains
✓ Unlimited Page Views
✓ Many are free
BUY?
![Page 97: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/97.jpg)
LOOKING FOR…
✓ Webfont linking in EULA
✓Compression
✓ Formats
✓ Price Structure
$@!
![Page 98: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/98.jpg)
RETAILERS
eot, ttf, svg & woff
kernest.com
free–$15/font
2543famalies
Kernest
myfonts.comURL fontsquirrell.com fontshop.comfontspring.com
$10-$160/font
eot, ttf, svg & woff
37,296fonts
MyFonts
100+families
eot & woff
FontShop
✔
Free-$100/ws
$80-860/ws
FontSpring
1800+families
eot, ttf, svg & woff
✔
Price Free
eot, otf, ttf, svg & woffFormats
RETAILER
Webfonts
FontSquirrell
660families
✔Subset
$@!
![Page 99: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/99.jpg)
LEASE?➡ No license worries
➡ No cross browser worries
➡ Reduces server strain
➡ Quality Fonts
⎋@!
![Page 100: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/100.jpg)
✓Available Fonts or Font Families
✓How Fonts are Added
✓Local Use
✓Bandwidth Usage
✓Price Structure
LOOKING FOR… ⎋@!
![Page 101: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/101.jpg)
⎋@!WEBFONT SERVICE BUREAUS
Subset ✔✔ ✔✔
fontdeck.comwebink.comgoogle.com/webfonts webtype.comURL webfonts.fonts.com
Free–$500unlimited/month
Free
<link>
10,000+fonts
25K–12.5Mpageviews/month
Unlimited 1–80GBmonth
$2.50–19.99font/year
@font-face
Google Web Fonts
1Mpageviews/month
580+families
✔✔Local
735families
FontDeckWFSB
<link>
Billing
WebInk
2283fonts
Bandwidth
WebType
Webfonts
fonts.com
<link>
$40–400font/yeat
✔
99¢–$59.994ws/month
Embed
250K–2.5Mpageviews/month
150+families
<js> or @font-face
![Page 102: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/102.jpg)
⎋@!WEBFONT SERVICE BUREAUS
Free–$99.99/year
✔
Typekit
4000fonts
<js>
25K–1Mpageviews/month
typekit.com typonine.comkernest.comfontslive.com typotheque.com
✔ ✔✔
✔ ✔
40families
Free–$15/font/year/ws
✔
250K–12.5Mpageviews/month
<link>
20families
$40–$2,000unlimited/year
Unlimited
<link>
TyponineFontsLive
Unlimited
2503fonts
<js> or @font-face
✔
500MB/month free
!2additional GB/month
<link> or @font-face
Kernest Typotheque
$100–900/family
499fonts
URL
Billing
Bandwidth
Subset
Local
Embed
Webfonts
WFSB
![Page 103: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/103.jpg)
![Page 104: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/104.jpg)
HOW DO I CHOOSE
WEBFONTS?
![Page 105: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/105.jpg)
choose forREPERTOIRE…
![Page 106: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/106.jpg)
choose for
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.
STYLES…
Cambria
![Page 107: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/107.jpg)
choose forSTYLES…
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.
Baskerville Old Face
![Page 108: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/108.jpg)
choose forOPTIMIZATION…
![Page 109: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/109.jpg)
choose forCOMPATIBILITY…
![Page 110: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/110.jpg)
choose forLEGIBILITY…
Looking Glass
Looking GlassWeight & Thickness Strokes & Serifs
Diavlo
Tahoma
![Page 111: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/111.jpg)
choose forLEGIBILITY…
Slab Serif
![Page 112: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/112.jpg)
choose for
Looking Glass
READABILITY…
letter spacing
counter width
letter width
x-heightTahoma
![Page 113: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/113.jpg)
choose for REPERTOIRESTYLESOPTIMIZATIONCOMPATIBILITYLEGIBILITYREADIBLITY
![Page 114: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/114.jpg)
VOICE!!!
![Page 115: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/115.jpg)
typography::type
voice::speech
![Page 116: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/116.jpg)
![Page 117: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/117.jpg)
AA A A AAA A A A
AA A A �
A
A
AA A A AA
AA A A AA
![Page 118: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/118.jpg)
Brand D
Brand IBrand H
Brand EBrand BBrand M
Brand F Brand NBrand C
Brand A
Brand GBrand KBrand J Brand Q
Brand R Brand TBrand S
Brand X
![Page 119: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/119.jpg)
IF I SAY…“I’m going to kill you”
![Page 120: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/120.jpg)
“I’m going to kill you”
“I’m going to kill you”
“I’m going to kill you”
“I’m going to kill you”
Pirate = UglyQua
Insane = Sybil Green
Robotic = Synchro LET
Suave = Cooper Black
![Page 121: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/121.jpg)
HOW DO I MAKE WEB
TYPOGRAPHY SEXY?
![Page 122: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/122.jpg)
use CONTRAST…
High Color Contrast
![Page 123: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/123.jpg)
use CONTRAST…
Low Color Contrast
![Page 124: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/124.jpg)
use CONTRAST…
Mixed Color Contrast
![Page 125: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/125.jpg)
use CONTRAST…
Stylecontrast
![Page 126: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/126.jpg)
use CONTRAST…
widthContrast
![Page 127: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/127.jpg)
use CONTRAST…
TypefaceContrast
![Page 128: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/128.jpg)
use CONTRAST…
multiContrast
![Page 129: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/129.jpg)
![Page 130: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/130.jpg)
![Page 131: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/131.jpg)
![Page 132: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/132.jpg)
use SPACE…
Looking-Glass houseOne 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.
![Page 133: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/133.jpg)
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
![Page 134: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/134.jpg)
![Page 135: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/135.jpg)
![Page 136: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/136.jpg)
use SCALE…
LARGEsmall
![Page 137: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/137.jpg)
![Page 138: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/138.jpg)
use TEXTURE…
Drop Shadow
![Page 139: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/139.jpg)
use TEXTURE…
Emboss or Bevel
![Page 140: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/140.jpg)
![Page 141: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/141.jpg)
use CONSISTENT VARIATION…
![Page 142: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/142.jpg)
![Page 143: The NEW Web Typography: Where the Sexy Is](https://reader034.vdocuments.site/reader034/viewer/2022042814/54c78d384a795964268b456f/html5/thumbnails/143.jpg)
MAKE IT SEXY…