The New Web Typography
147
@ THENEWWEB TYPOGRAPHY WHERE THE SEXY IS JASON CRANFORD TEAGUE jasonspeaking.com | @jasonspeaking forumone.com | @forumone edUi | 14 September 2011
-
Upload
forum-one -
Category
Technology
-
view
123 -
download
1
description
Transcript of The New Web Typography
@!THENEWWEB TYPOGRAPHYWHERE THE SEXY IS
JASON CRANFORD TEAGUEjasonspeaking.com | @jasonspeaking
forumone.com | @forumone
edUi | 14 September 2011
@!LET'S GO
WHAT IS SEXY?
folha de s. paulo newspaper
WEB TYPOGRAPHY=HTML + CSS = SEXY?
WEB TYPOGRAPHY=HTML + CSS = SEXY?BORI
NG
SO…What's been the problem?
1,500,000
150,000
15,000
1,500
Q1HOW MANY FONTS ARE THERE?
150KDIGITAL FONTS
Q2 HOW MANY FONTS ARE COMMONLY USED ON THE WEB?
18
11
10
5
Q2 HOW MANY FONTS ARE COMMONLY USED ON THE WEB?
18
11
10
5
Q2 HOW MANY FONTS ARE COMMONLY USED ON THE WEB?
18
11
10
5
11CORE WEB FONTS
Andale Mono
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
ImpactTimes New Roman
Trebuchet MS
Verdana!f
fuckyeahdementia.com
If Fonts Were Dogs…
11CORE WEB FONTS
Andale Mono
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
ImpactTimes New Roman
Trebuchet MS
Verdana!f
11CORE WEB FONTS
Andale Mono
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
ImpactTimes New Roman
Trebuchet MS
Verdana!f
5
Arial
Georgia
Times New Roman
Trebuchet MS
Verdana
ArialGeorgiaTimes New Roman
Trebuchet MS
Verdana
AA A A AAA A A A
AA A A �
A
A
AA A A AA
AA A A AA
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
typography::type
voice::speech
SO…Where are the fonts on the web?
!f182WEB SAFE FONTSWindows & Mac Fonts
!f66WEB SAFE FONTSCommon Denominator
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
Safari Supports TTF & OTF Formats
2008@!
@!20082009
All Browsers Support Webfonts
@!The Year of Web Typography
200820092010
@!2008200920102011Web Typography is Sexy
40KWEBFONTS
@!
⎋@!$@!@!convert buy lease
WHERE DO WEBFONTS COME FROM?
@!THENEWWEB TYPOGRAPHY
WEBTYPEBASICS
@!LET'S GO
WHAT IS A WEBFONT?
or web font
notice the space
WEBFONT
WEBFONTFont file downloaded from a web server and used by the browser to render HTML text.
font-filefont file
your serverYour
Server
WEBFONTS
Your Computer
webpage
font-file
your server @font-face
YOUR FONT
User's Computer
5WEBFONT FILE FORMATS
@!
BROWSER WEBFONT
EOT
TTF/OTF
SVG
WOFF
✔ 4
✔ 3.5 ✔ 3.1 ✔ 10
✔ 3.1 ✔ 3 ✔ 10
✔ 9 ✔ 3.6 ? ✔ 6 ✔ 11
MOBILE WEBFONT
EOT
TTF/OTF
SVG
WOFF
✔ 4.2 ✔ 2.2 ✔ 6
✔ 3.1
your serverYour
Server
WEBFONTS
font-file.eot file
font-file.ttf/.otf file
font-file.svg file
font-file.wo! file
Your Computer
BUILDING AFONTSTACKAdding a webfont
'gill%sans%MT',%arial,%sans-serif;font-family:%
Starunderstudy
generic
'gill%sans%MT',%arial,%sans-serif;font-family:%
Websafecore web
generic
/fontsmyfont-webfont.eotmyfont-webfont.otfmyfont-webfont.svgmyfont-webfont.woff
@font-face%{
name you give it
font-family:%Diavlo;src:%url('fonts/Diavlo_BOOK_II_37.otf');}
path to font file
@font-face%{
name you give it
font-family:%'body%copy';src:%url('fonts/Diavlo_BOOK_II_37.otf');}
path to font file
@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
diavlo,%'gill%sans%MT',%arial,%sans-serif;font-family:%
name you gave it
font-family:%
name you gave it
'body%copy',%'gill%sans%MT',%arial,%sans-serif;
@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');}
@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;}
@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;}
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,{
WHERE DO I FIND
WEBFONTS?
CONVERT, BUY OR LEASE?
CONVERT, BUY OR LEASE?conversion — YOUR FONTretailers — YOUR FONTweb font service bureaus — THEIR FONT
webpage
font-file
your server @font-face
YOUR FONT
User's Computer
WFSB server
webpage
font-file
your server
@font-face, <link> JavaScript
THEIR FONT
User's Computer
CONVERT?➡Any Font
➡You control quality
➡You control the code
➡Sub-setting
@!
EULAEnd User License Agreement
IPIntellectual Property
LOOKING FOR…
➡ EULA? Are you breaking the law?
➡Server load?
➡Screen Quality?
@!
$@!✓ One Time Price
✓ Desktop Use
✓ Unlimited Domains
✓ Unlimited Page Views
✓ Many are free
BUY?
LOOKING FOR…
✓ Webfont linking in EULA
✓Compression
✓ Formats
✓ Price Structure
$@!
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
$@!
LEASE?➡ No license worries
➡ No cross browser worries
➡ Reduces server strain
➡ Quality Fonts
⎋@!
✓Available Fonts or Font Families
✓How Fonts are Added
✓Local Use
✓Bandwidth Usage
✓Price Structure
LOOKING FOR… ⎋@!
⎋@!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
⎋@!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
HOW DO I CHOOSE
WEBFONTS?
choose forREPERTOIRE…
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
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
choose forOPTIMIZATION…
choose forCOMPATIBILITY…
choose forLEGIBILITY…
Looking Glass
Looking GlassWeight & Thickness Strokes & Serifs
Diavlo
Tahoma
choose forLEGIBILITY…
Slab Serif
choose for
Looking Glass
READABILITY…
letter spacing
counter width
letter width
x-heightTahoma
choose for REPERTOIRESTYLESOPTIMIZATIONCOMPATIBILITYLEGIBILITYREADIBLITY
VOICE!!!
typography::type
voice::speech
AA A A AAA A A A
AA A A �
A
A
AA A A AA
AA A A AA
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
IF I SAY…“I’m going to kill you”
“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
HOW DO I MAKE WEB
TYPOGRAPHY SEXY?
use CONTRAST…
High Color Contrast
use CONTRAST…
Low Color Contrast
use CONTRAST…
Mixed Color Contrast
use CONTRAST…
Stylecontrast
use CONTRAST…
widthContrast
use CONTRAST…
TypefaceContrast
use CONTRAST…
multiContrast
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.
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
use SCALE…
LARGEsmall
use TEXTURE…
Drop Shadow
use TEXTURE…
Emboss or Bevel
use CONSISTENT VARIATION…
MAKE IT SEXY…
