@!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…

forumone.com

fluidwebtype.info

@!THENEWWEB TYPOGRAPHY

QUESTIONS

jasonspeaking.com | me@jasonspeaking.com | @jasonspeaking

@!www.jasonspeaking.comme@jasonspeaking.com@jasonspeaking

THANKS!