fluid web typography - sxswi 2010

125
Jason Cranford Teague SXSW 2010 Austin, TX | 13 March 2010 fluidwebtypography

Upload: jason-cranfordteague

Post on 17-Aug-2014

13.744 views

Category:

Design


0 download

DESCRIPTION

Presented at SXSWi 2010 For almost 15 years, Web designers have had a list of 10 "Core Web fonts" to choose from. Many ask, "Why can't I just download a font file from my Web server the same way I can an image?" Well, actually, you can. The verbiage for font linking is a little different than images, but the syntax for Webfont linking has been around for over 10 years as a part of the CSS standard. Web typography expert Jason Cranford Teague shows you how to apply the principles of fluid typography, to choose, find and use Webfonts and create your unique typographic voice. Come and find out why 2010 is going to be the year of Web typography.

TRANSCRIPT

Page 1: Fluid Web Typography - SXSWi 2010

Jason Cranford Teague

SXSW 2010Austin, TX | 13 March 2010

fluidwebtypography

Page 2: Fluid Web Typography - SXSWi 2010

What do these 3 Things

have in common?

Page 3: Fluid Web Typography - SXSWi 2010

Flying Cars

Page 4: Fluid Web Typography - SXSWi 2010

Trips to Jupiter

Page 5: Fluid Web Typography - SXSWi 2010

Downloadable Webfonts

Page 6: Fluid Web Typography - SXSWi 2010

20103 things I was

supposed to have.

Page 7: Fluid Web Typography - SXSWi 2010

2008

Page 8: Fluid Web Typography - SXSWi 2010

2009

Page 9: Fluid Web Typography - SXSWi 2010

2010The Year of

Web Typography

Page 10: Fluid Web Typography - SXSWi 2010

3 Things to Know About

Jason Cranford Teague

Page 11: Fluid Web Typography - SXSWi 2010

DesignerMarriott

Page 12: Fluid Web Typography - SXSWi 2010

Author12+ Books

Page 13: Fluid Web Typography - SXSWi 2010

DC MetroCranford Teague

Page 14: Fluid Web Typography - SXSWi 2010

@jasonspeakingjasonspeaking.com

Page 15: Fluid Web Typography - SXSWi 2010

3 Things to Learn About

Web Typography

Page 16: Fluid Web Typography - SXSWi 2010

USEwebfonts

Page 17: Fluid Web Typography - SXSWi 2010

FINDwebfonts

Page 18: Fluid Web Typography - SXSWi 2010

web type

GET THE BOOK

by

is the

only comprehensive guide to

modern Web Typography

available. Learn how to find

more typefaces, improve

legibility, and increase the visual

appeal of your Web designs all

in one compact volume

available from New Riders.

Fluid Web Typography

JASON CRANFORD TEAGUE

RECENTLY ON FWT…

WELCOME TO FLUID WEB TYPE!Welcome to Fluid Web Type, a new web site devoted to chronicling the

rapidly changing world of Web Typography. Welcome Gifts To celebrate

the site launch, I'm pleased to announce: Through February 1st, you can

win a copy of Fluid Web Typography through Webdesigner Depot. All you

have to do is add a...

Read More

USING SIFROne of the reasons that designers often site for wanting to use Flash is that,

unlike HTML, they can embed any font they want in their design. SiFR

SUBSCRIBE TO FWT

Your email:

Enter email address...

Subscribe

Unsubscribe

ON FWT

Main

Contact

CHOOSEwebfonts

Page 19: Fluid Web Typography - SXSWi 2010

Why does typography matter?

What is Web typography?

Page 20: Fluid Web Typography - SXSWi 2010

@fluidwebtypefluidwebtype.info/sxsw

Page 21: Fluid Web Typography - SXSWi 2010

WHYTypography Matters

Page 22: Fluid Web Typography - SXSWi 2010

typography::type

voice::speech

Page 23: Fluid Web Typography - SXSWi 2010

If I say…“I’m going to kill you”

Page 24: Fluid Web Typography - SXSWi 2010

“I’m going to kill you”

“I’m going to kill you”

“I’m going to kill you”

“I’m going to kill you”

UglyQua

Sybil Green

Synchro LET

Cooper Black

Page 25: Fluid Web Typography - SXSWi 2010

Brand XBrand D

Brand IBrand H

Brand EBrand BBrand M

Brand F Brand NBrand C

Brand A

Brand GBrand KBrand J Brand Q

Page 26: Fluid Web Typography - SXSWi 2010
Page 27: Fluid Web Typography - SXSWi 2010
Page 28: Fluid Web Typography - SXSWi 2010

Fontor

Typeface

Page 29: Fluid Web Typography - SXSWi 2010

WHAT Web Typography is

Page 30: Fluid Web Typography - SXSWi 2010

NTTEXT IN IMAGE

Page 31: Fluid Web Typography - SXSWi 2010

NTTEXT IN FLASH

Page 32: Fluid Web Typography - SXSWi 2010

Web Typography =HTML + CSS

Page 33: Fluid Web Typography - SXSWi 2010

Web Typography =Limited Font Choices

Page 34: Fluid Web Typography - SXSWi 2010

design is about

overcoming

Limitations

Page 35: Fluid Web Typography - SXSWi 2010

“Type design is an act of plagiarism in itself—you basically recreate the flesh of the same skeleton.”

Alejandro Lo Celso Saraviapampatype.com

Page 36: Fluid Web Typography - SXSWi 2010

AA A A A

Page 37: Fluid Web Typography - SXSWi 2010

What if everybody looked the same…

…and everybody was UGLY?

Page 38: Fluid Web Typography - SXSWi 2010

helvetica,  arial,  sans-­‐serif;font-­‐family:  

Page 39: Fluid Web Typography - SXSWi 2010

yahoo.com

Page 40: Fluid Web Typography - SXSWi 2010

aol.com

Page 41: Fluid Web Typography - SXSWi 2010

msn.com

Page 42: Fluid Web Typography - SXSWi 2010

Web Typography =UGLY!!!!!

Page 43: Fluid Web Typography - SXSWi 2010

Why I WriteBy DORIANNE LAUX on 2.08.10

I have recently begun to think of writing as what Susan Sontag calls “awisdom project” in her forward to Another Beauty, a collection ofautobiographical essays by the great Polish poet Adam Zagajewski.

“…autobiography is an occasion to purge oneself of vanity,while advancing the project of self understanding—call it thewisdom project—which is never completed, however long thelife.”

I am still hard at work on this project of the self. The solitary self, as wellas the self in relation to the world and the unknown universe we swirlaround in, uncertain of our purpose or future. When I wrote the poemsthat would become my first book, I didn’t think of it as a book, but ratheras a need to understand the basic questions that all human beings ask:Who am I? Why am I here? Where am I going? What is beauty? Why isthere suffering? Where is truth? These questions would arise in me in theform of poems, and in making the poems into a collection, I tried toarrange them in a shape, find a path for them to travel to make clearerthose questions. I write to know the questions.

Poem after poem, book after book, the ante is upped. I think this could bewhy it takes so long between books. The poet is working harder each timeto go deeper, farther, layering on or stripping away to find the exact coloror texture, the core or the root, the frail light or the watery dark. I write towork things out. I write to concentrate, to feel a sense of purpose rise upin me. I enjoy the struggle of making a new object to present to the world,a gift made from scratch—whole, unique, edible as bread. And I want thatgift to travel well, packed into an old boat on calm water or hidden insidea greased body diving into a blue pool, a sleek arrow that leaves afeathered silence and wonder in its wake. I like moving, word by word,toward a sense of discovery, toward an awareness of self—a curious,energetic, intelligent, sacred, baffling, depthful, heartful self. I work tofind my subject, something I can sink my teeth into. I live for that flaringup of language, when the words actually carry me, envelope me, grip me.And all the above is why I read poetry, to hear the truth, spoken harshlyor whispered into my ear, to see more clearly the world’s beauty andsadness, to be lifted up and torn down, to be remade, by language, tobecome larger, swollen with life.

I write to add my voice to the sum of voices, to be part of the choir. I writeto be one sequin among the shimmering others, hanging by a thread fromthe evening gown of the world. I write to remember. I write to forgetmyself, to be so completely immersed in the will of the poem that when Ilook up from the page I can still smell the smoke from the house burningin my brain. I write to destroy the blank page, unravel the ink, use up whatI’ve been given and give it away. I write to make the trees shiver at thesliver of sun slipping down the axe blade’s silver lip. I write to hurt myselfagain, to dip my fingertip into the encrusted pool of the wound. I write tobecome someone else, that better, smarter self that lives inside mydumbstruck twin. I write to invite the voices in, to watch the angelwrestle, to feel the devil gather on its haunches and rise. I write to hearmyself breathing. I write to be doing something while I wait to be called tomy appointment with death. I write to be done writing. I write becausewriting is fun.

Editor’s Note: This short essay is from RedThread, Gold Thread: The Poet’s Voice ananthology edited by Alan Cohen. It is a book ofessays by poets on how they came to poetryand why they practice their art. Funds fromthe book are going toward the continuation ofthe annual Power of Poetry Festival held inLogan, Ohio since 2002. You can buy the bookhere.

topics: columnists

1 COMMENT

Jessie Carty said on 2.09.10 at 12:20pm:

Terrific essay, I love the quote and how Dorianne expounds off of that.

Thanks for sharing

POST A COMMENT

Name

Email   Required, will not be published

URL

http://

Comment   Textile permitted

The editors reserve the right to delete comments that areoff-topic, inflammatory, or anonymous.

search

Dorianne Laux is the author of fourbooks of poetry and co-author of The

Poet’s Companion: A Guide to the

Pleasures of Writing Poetry. She hasbeen the recipient of the Oregon BookAward and was short-listed for theLenore Marshall Poetry Prize. She lives

in Raleigh, North Carolina where she teaches poetry at NorthCarolina State University. For more, go to DorianneLaux.com.

Facts About the Moon

Buy from POWELLS

Buy from INDIEBOUND

In her powerful fourth collection,Dorianne Laux once again strikes firefrom neighborhood moments: a quietstreet at dusk, a pool hall, a bare tree.Focusing on the grace of working

people, she captures the pain and beauty of women in all

their variety, caught in the “lunar pull” of our time. more »

Dorianne Laux reads Facts About theMoon

Home / Audio / Video / Columns /

Newsletter / About / Subscribe / Contact

Photo Credits / Author Login

Design by Mandy Brown / A Working Library

audio video columns

newsletter about subscribe

poemsoutloud.net

Page 44: Fluid Web Typography - SXSWi 2010

summerautumn

©acidsmile (unless otherwise stated)

the views expressed throughout this site are my own and do not necessarily reflect those of my employer

When life serves you lemons make lemonade goes the saying and these dayslife does taste like home made lemonade. Some times overly sour, sometimesoverly sweet. On occasion sour but with the grains of sugar crunchy betweenyour teeth. Some things are going extremely well, others very badly and insome cases I have no clue what is going on. Days merge into nights, weekschange and suddenly it’s the end of February and I’m wondering where twomonths of my life have gone and what have I done with them. Existentialquestions aside, everything since the 6th of Jan when I went back to workseems like a blur. Very stressful, too much work, too many variables.Normally I thrive…...

tsimitakis Watch this video: http://slide.com/t/5/5/iRdYgA7YzOlGΣκληρόβίντεογιατηΓάζαfrom web, Mon, Mar 01, 2010 - 15:03:25from web, Mon, Mar 01, 2010 - 15:03:25

tgeorgakopoulos http://twitpic.com/16178x - ΤζάστινΠλιάτσικας(@The_Stranger_gr μεπρόλαβες) #pliatsikasfrom from TwitPicTwitPic, Mon, Mar 01, 2010 - 15:02:46, Mon, Mar 01, 2010 - 15:02:46

djzinc that chat roulette thing is rawfrom web, Mon, Mar 01, 2010 - 15:02:25from web, Mon, Mar 01, 2010 - 15:02:25

2010 - #p52 - loose thoughts - ramblings

1 Comment | leave a comment | read the whole entry24/Feb/2010

@sophiaw happy monday / monthto you too!

Mon, Mar 01, 2010 - 14:00:22, fromTweetDeck

17 February

12 February

27 January

Coming home tonight the last thing I wanted to do was cookand it was something I was dreading all the way home. I hadthe sort of day where a server goes down at 17.10, twentyminutes…

Today I took the opportunity to work from home, somethingthat I don’t do very often, but absolutely had to be done inorder to make some significant progress in what I am…

Over the last few weeks I have been thinking a lot aboutpaying for content. When in November Murdoch…

Rails programming

CSSxHTMLRails programmingJavascript

CSSxHTMLRails programmingJavascript

I have a dream that all my websites will one day existin a Web where they will not be judged by how theylook and behave in each browser, because all browserswill follow the same standards and display them thesame.

This is my hope. With this faith in Web Standards andAccessibility for all people and devices we will be ableto make a better Web. With this faith we will be ableto transform the jangling discords of the browsers to abeautiful symphony of design, functionality andcontent. With this faith we will be able to work better,to play better, to struggle less, knowing that alldevices will treat our work equally & with respect.

Your Email:

Subject: Hello!

Message:

about this site || sitemap

search the site submit

or use the advanced search

acidsmile.co.uk

Page 45: Fluid Web Typography - SXSWi 2010

per piece

per piece

per piece

per piece

per piece

VoicesVoice morphing for your iPhone!

ConvertThe unit converter & calculator

plasma

ParabloxFeed your brain and test yourreflexes!

ClassicsEscape into some of the greateststories ever written

Where To?Make any iPhone function morelike a real GPS device

$199

99¢

99¢

Free

$299

• ContactContact • AboutAbout • BlogBlog SubscribeSubscribeTwitterTwitter

taptaptap.com

Page 46: Fluid Web Typography - SXSWi 2010

Workflow andcollaboration.Content management solutions that don't feel templated.CONTENT MANAGEMENT SYSTEMSDRUPAL CMSALFRESCO WCM

The right tools for the job

Proven tools for engaging experiences.

We leverage many different technologies, frameworks and methodologies to solve problems for

our clients.

Work at Play is continually improving and expanding our knowledge base, processes and

understanding of the latest trends and best practices.

We are passionate in the pursuit of discovering what's possible and what we can bring to our

clients and our agency partners.

Solutions driven.

No matter how big and messy the problems are, we endeavour to ensure we've got the tools to

provide the right solutions.

TOOLBOX

SOCIAL MEDIA STRATEGY

SOCIAL NETWORKINGAPPLICATIONS

FACEBOOK APPLICATIONDEVELOPMENT

TWITTER APPLICATIONDEVELOPMENT

IPHONE APPLICATIONS

CONTENT MANAGEMENTSYSTEMS

ALFRESCO WCM

DRUPAL CONTENTMANAGEMENT SYSTEM

TOOLBOX

SEE OUR WORK

Knowledge trustedWork at Play's CMSexpertise.

VISIT DEQQ

Work at Play launchesthe Deqq iPhoneApplication.

START HERE

Fortune 500companies useDrupal. Is it the rightCMS for you?

workatplay.com

Page 47: Fluid Web Typography - SXSWi 2010

An open invitation

TO PARTYEveryone & anyone is welcome.

Open bar ’til the flotilla of kegs are kicked.

Music provided by DJ Richard Gear.

RSVP on Facebook or Upcoming.

Become a sponsor Become a sponsor Become a sponsor Become a sponsor

Web People + Reckless AbandonT W O G R E A T T A S T E S T H A T T A S T E G R E A T T O G E T H E R

More than the presentations and panels, it is our fellow comrades that are the heart and soul ofSXSW. So we’re more than happy to provide the venue to wrangle them all together. Join us as wecelebrate the communal spirit of SXSW and kick off the conference with our favorite people. Wemake only one promise: you’ll learn little and remember nothing.

S P O N S O R E D B Y

BEER PONGTOURNAMENT

No party would be complete without some form of competition. Thisyear, attendees will face off in the most ancient of organized

S X S W 2 0 1 0 E D I T I O NB

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

B

BB P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

P

PPE

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

EE M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

M

MME

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

E

EE A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

A

AAR

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

R

RR C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

C

CCFOLLOW @NCLUD

FOLLOW @NCLUD

FOLLOW @NCLUDFOLLOW @NCLUDF O R U P D A T

F O R U P D A T

E

E

S

S

F O R U P D A TF O R U P D A T EE SSM O N D A Y

March 15T W E N T Y T E N

Festivities begins at 7:30 PM

Emo’s603 Red River St.

Austin, TX

Emo’s

sxsw.beercamp.com

Page 48: Fluid Web Typography - SXSWi 2010

Web Fontsor

Webfonts?

Page 49: Fluid Web Typography - SXSWi 2010

USINGWebfonts

Page 50: Fluid Web Typography - SXSWi 2010

How many fonts are there?

>100 Thousand

Page 51: Fluid Web Typography - SXSWi 2010

How many fonts are used on the Web?

<5 Fonts

Page 52: Fluid Web Typography - SXSWi 2010

Generic Font Families

Core Web Fonts

Web Safe Fonts

Webfonts

Page 53: Fluid Web Typography - SXSWi 2010

font-­‐family:  

primary

diavlo,  garamond,  georgia,  serif;

understudy understudy understudywebfont web-safe core web generic

Page 54: Fluid Web Typography - SXSWi 2010

Generic Font Family5 Families

Page 55: Fluid Web Typography - SXSWi 2010

Sans-serifSerif

Monospace

CursiveFantasy

Arial

Times

Courier

Zapfino

Curlz MT

Page 56: Fluid Web Typography - SXSWi 2010

sans-­‐serif;font-­‐family:  

Page 57: Fluid Web Typography - SXSWi 2010

Core Web Fonts10 Fonts

Page 58: Fluid Web Typography - SXSWi 2010

Core Fonts For the Web

Microsoft

Page 59: Fluid Web Typography - SXSWi 2010

EULAEnd User License

Agreement

Page 60: Fluid Web Typography - SXSWi 2010

Andale MonoArial

Arial BlackComic Sans MSCourier NewGeorgiaImpact

Times New RomanTrebuchet MS

Verdana

Page 61: Fluid Web Typography - SXSWi 2010

ArialGeorgia

Times New RomanTrebuchet MS

Verdana

Page 62: Fluid Web Typography - SXSWi 2010

arial,  sans-­‐serif;font-­‐family:  

Page 63: Fluid Web Typography - SXSWi 2010

Web Safe Fonts~190 Fonts

Page 64: Fluid Web Typography - SXSWi 2010

PreinstalledOS or

Common Software

Page 65: Fluid Web Typography - SXSWi 2010

~130 FontsWindows

Page 66: Fluid Web Typography - SXSWi 2010

~125 FontsMac

Page 67: Fluid Web Typography - SXSWi 2010

59 FontsMac & Windows

Page 68: Fluid Web Typography - SXSWi 2010

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

fluidwebtype.info/web-safe-fonts

Page 69: Fluid Web Typography - SXSWi 2010

← Increase Your Font Stacks with Font Matrix

!"#$%&'()')(*#+',-*./0.'1%#2'!"3'"*.'4%*.(1+'(50$"#%*6+7+#08+9'!%3$(+()#':))%30'"*.';.(,0'<$0"#%=0'>-%#0

Mac OS Windows OS Office WindowsOfficeMac Adobe Creative Suite

OS XTiger

OS XLeopard

WindowsXP SP2

WindowsVista

Office2003

Office2007

Office2004

Acrobat7

IllustratorCS2

InDesignCS2

CS2extras

CS3install

CS3disk

Adobe Caslon Pro x x x

Adobe Garamond Pro x x x

Adobe Jenson Pro x

Agency FB x x

Agency FB Bold x x

American Typewriter x x

Andale Mono x x x x x x

Apple Chancery x x

Arial x x x x x x

Arial Black x x x x x x

Arial Narrow x x x x x

Arial Rounded MT Bold x x x x x

Arial Unicode MS x x x

Arno Pro x

Baskerville x x

Baskerville Old Face x x x

Bauhaus 93 x x x

Bell Gothic Std x

Bell MT x x x

Berlin Sans FB x x

Bernard MT Condensed x x x

Bernhard Modern Std x x

Bickham Script Pro x x

Big Caslon x x

Blackadder ITC x x

Bodoni MT x x

Bodoni MT Black x x

Bodoni MT Condensed x x

Bodoni MT PosterCompressed

x x

Book Antiqua x x x

Bookman Old Style x x x

Bradley Hand ITC x x

Braggadocio x

Britannic Bold x x x

Broadway x x

Brush Script MT x x x

Brush Script MTItalic

x x

Caflisch Script Pro x x

!"#$%&$ x x

Californian FB x x

Calisto MT x x x

!"#$%&" x x

!"#$"%" x x

Castellar x x

Centaur x x

Century Gothic x x x

Century Old StyleStd

x

Century Schoolbook x x x

Chalkboard x x

Chaparral Pro x x

Charlemagne Std x x

Chiller x x

Cochin x x

Colonna MT x x x

Comic Sans MS x x x x x x

!"#$"%&$ x x

!"#$%&#%'& x x

Cooper Black x x x

media.24ways.org/2007/17/fontmatrix.html

Page 70: Fluid Web Typography - SXSWi 2010

tahoma,  arial,  sans-­‐serif;font-­‐family:  

Page 71: Fluid Web Typography - SXSWi 2010

WebfontsAny font?

Page 73: Fluid Web Typography - SXSWi 2010

font-­‐family:  'body  copy';src:  url('fonts/Diavlo_BOOK_II_37.otf');font-­‐style:  normal;font-­‐weight:  normal;font-­‐stretch:  normal;font-­‐variant:  normal;}

name you give it

@font-­‐face  {

path to font file

font properties

Page 74: Fluid Web Typography - SXSWi 2010

'body  copy',  tahoma,  arial,  sans-­‐serif;font-­‐family:  

name you gave it

Page 75: Fluid Web Typography - SXSWi 2010

Embedded Open Type(.eot)

File Formats

Page 76: Fluid Web Typography - SXSWi 2010

EOT Lite (.eot)File Formats

Page 77: Fluid Web Typography - SXSWi 2010

True Type (.ttf)Open Type (.otf)

File Formats

Page 78: Fluid Web Typography - SXSWi 2010

Scalable Vector Graphics (.SVG)

File Formats

Page 79: Fluid Web Typography - SXSWi 2010

Web Open Font Format (.woff)

File Formats

Page 80: Fluid Web Typography - SXSWi 2010

EOT Lite or WOFF???

Page 81: Fluid Web Typography - SXSWi 2010

font-­‐family:  'body  copy';src:  url('fonts/Diavlo_BOOK.eot');

@font-­‐face  {

EOT for IE

Local Name

WOFF

SVG

OTF/TTF

src:  local('diavlo  regular'),          local('diavlo-­‐regular'),          url('fonts/Diavlo_BOOK.woff')                    format('woff');          url('fonts/Diavlo_BOOK.svg#diavlo-­‐regular')                    format('svg');          url('fonts/Diavlo_BOOK.otf')                    format('opentype');}

Page 82: Fluid Web Typography - SXSWi 2010
Page 83: Fluid Web Typography - SXSWi 2010

EULAEnd User License

Agreement

Page 84: Fluid Web Typography - SXSWi 2010

IPIntellectual Property

Page 86: Fluid Web Typography - SXSWi 2010

emigre.com

Page 87: Fluid Web Typography - SXSWi 2010

Fonts Blog Help CART (0)FAVORITES (0)HISTORY

Copyright © 2009 FontShop USA | Proud sponsor of ATypI | Shop Region: USA & Canada

Founded by Erik Spiekermann andNeville Brody in 1989, FontShopis the original independentretailer of digital type. We offermore than 100,000 fonts fromdozens of expert-selectedfoundries, including our housebrand: FontFont.

FontFeed.comFontStruct.comFontBook.comTypeNavigatorFontFont Microsites

Get FontShop News

Enter email address

FontShop NewsNew and NotableTypographic TidbitsTypography 101: What’s thedifference between Std and Pro?New Foundry: Hubert JochamNew Fonts: CastleType

The FontFeedThe Best of FontFonts on the We...Designpreis Deutschland 2010 La...FIFTY|1: The New FontFont Relea...FontCast #9 — TypeTogetherThe 1879 Spencerian Compendium...

New FontsVerse Sans OTVerse Serif OTVoice OTVoice Serif OTGoudy Trajan Pack OTCarisma Package OTCarisma Inline OT

BestsellersSuomi Hand Script OTFF DIN OTEstilo RegularKlavika Basic OTOlicana Smooth OTFF DIN ProEstilo Script

Font ServicesCustom TypeHandFont

HelpType ResearchFont InstallationEducationLicense AgreementsMUL InformationFAQGlossaryOpenType

About UsMeet the StaffWhy FontShop?

Contact & Follow

Email

Facebook

Flickr

Twitter

Late edition towebfonts showcasehttp://ow.ly/16BVGZ— http://liftux.comuses FF Dagnyhttp://j.mp/8KvDieeven on their tastycontact form

Log InEnglishCelebrating 20 years!

We welcome four new foundries toFontShop.com: Hubert Jocham, CastleType, HvD Fonts, and ReType. Seethem all.

A font to benefit victims of theHaiti earthquake.

The FontFeed is a daily dispatch of recommendedfonts, typography techniques, and inspirationalexamples of digital type at work in the real world.

Important developments, from new products tonew website features - anything that affects theway you use FontShop.com

Search for fonts...

Get StartedBrowse & buy fonts ▶Browse by Category,Foundry, or Designer. Orlet our research team dothe work for you.

Discover new type ▶Our blog is updatedfrequently with fresh fontsand recommendations, theNewsletter brings thelatest to your email inbox,or discover type in printwith FontBook.

Get smart ▶Expert advice on formats,installation, or licensing isjust a click or Call away.

Voice Embryo Goudy Trajan

Browse Fonts

CategoryFoundryDesignerRandomGallery

Top Fonts

New FontsBestsellersStaff Picks

Your Fonts

HistoryFavorites

fontfont.com

Page 88: Fluid Web Typography - SXSWi 2010

My account / Login

My shopping cart

My favorites

Font Finder Font Products Font Services Font Lounge News Support Company

Site Map Contact Imprint/Legal Terms of Use Monotype Imaging

Copyright © 2010 Linotype GmbH. All rights reserved.We reserve the right of errors and changes.

Top of pagePage last edited: 2010-02-16

presented in: Linotype Authentic™ Sans Bold

We serve all your Font and Type needs at Linotype.com

Try, purchase and download complete font families, value packs and single font weights from US$ 26.00. Weoffer you more than 12,000 original, high-quality fonts from classic to cool in OpenType, TrueType andPostScript. – Try them out!

Font Finder (Shop)

Looking for a special font?Explore the various ways to findthe font that fit your needs.more ...

Foundries and Libraries

Browse through our comprehensiveproduct catalog.more ...

Font of the Week

A literal labor of love, created byDaniel Pelavin – Save 20%!more ...

News

The new FontExplorer X productline – high-level professional fontmanagement for you.more ...

Award

Malabar received the 2010 GermanDesign Prize. Award ceremony on12th February 2010.more ...

Font Services

Take a look at our comprehensiveservices, tailored to your needs.more ...

Search for Fonts

Advanced search ...

Text Fontsfor books andmagazines

Script Fontscalligraphy,handwriting fonts

Handwriting/Grungefonts with apersonal touch

Corporate Fontsfonts forcorporate design

Celebration Fontsevents from birthdayto Halloween

Blackletter Fontsgothic, celtic fonts

Comic Fontskids and fun fonts

Western Fontsinspired bythe Wild West

Cool Fontsmodern, technical look

Screen Fontsoptimized for smallsizes

Symbol Fontspi fonts forany occasion

Linotype Top Sellers

1. Neue Helvetica®

2. Helvetica®

3. Avenir®

4. Optima®

5. Rotis® Sans Serif

Complete Font Charts …

Type News

New Font Releases

Font News

Platinum Collections

Fonts in Focus

Subscribe to ournewsletter or viewthe current issue.

Make the most outof your website –become an Affiliate!

Linotype offers allkinds of webshopping andlicensingadvantages.

BA Graphics

linotype.com

Page 90: Fluid Web Typography - SXSWi 2010

sIFR & Cufón?

What about

Page 91: Fluid Web Typography - SXSWi 2010

FINDINGWebfonts

Page 92: Fluid Web Typography - SXSWi 2010

Licensed FontsYou Control

Page 93: Fluid Web Typography - SXSWi 2010

What to look for…

Webfont linking in EULA

Subsetting

Formats

Cost

Page 94: Fluid Web Typography - SXSWi 2010

What to look for…

Optimized???

Page 95: Fluid Web Typography - SXSWi 2010

ONLY THE BESTCOMMERCIAL-USE FREE FONTSFree fonts have met their match. We know how hard it is to find

quality freeware that is licensed for commercial work. We've done

the hard work, hand-selecting these typefaces and presenting them

in an easy-to-use format. Here are some of our favorites:

Find Fonts

| View | Download TTFPT Sans | 8 Styles | TrueType | Paratype

| View | Download OTF (offsite)Museo Slab | 2 Styles | OpenType | Exljbris

| View | Download OTF (offsite)Museo Sans | 2 Styles | OpenType | Exljbris

| View | Download OTF (offsite)Calluna | 1 Style | OpenType | Exljbris

View | Download TTFAller | 7 Styles | TrueType | Dalton Maag Ltd | Expires: 9/1/10

| View | Download OTFQuicksand | 7 Styles | OpenType | Andrew Paglinawan

| View | Download TTFCantarell | 4 Styles | TrueType | Abattis

| View | Download OTFTitillium Text | 7 Styles | OpenType | Accademia di Belle Arti Urbino

| View | Download OTFChunkFive | 1 Style | OpenType | The League of Moveable Type

| View | Download TTFSansation | 3 Styles | TrueType | Bernd Montag

| View | Download OTF (offsite)MEgalopolis Extra | 1 Style | OpenType | SMeltery

Advertise Here

17172627913942

32426

435

1184762192111

629

Twitter | RSS Feed

FILTER

All Formats

@font-face

STYLE

BlackletterCalligraphicComicDingbatDisplayGrungeHanddrawnInitialsMonospacedNoveltyPixelRetroSans SerifScriptSerifSlab SerifStencilTypewriterTotal Families:

Font Foundries List

ABOUT

Font Squirrel is yourbest resource for FREE,hand-picked, high-quality, commercial-use fonts. Even if thatmeans we send youelsewhere to get them.

WEBFONTS!

Fontspring

FREE

MyFonts Free PageFontFont Free Fontsdafont.comFont River

DIY

Your Fonts (Handwriting)FontStruct (Modular)

OTHER

fontlover.comilovetypography.comFlickr Type PoolSmashing MagazinetypesitestypeneuNice Web Typetypegoodness

TOOLS

Font Squirrel RSS

Advertise Contact 3803859 downloads since Jan 09 | ©2009-2010 Font Squirrel. All rights reserved.

fontsquirrel.com

Page 96: Fluid Web Typography - SXSWi 2010

Fonts Blog Help CART (0)FAVORITES (0)HISTORY

Copyright © 2009 FontShop USA | Proud sponsor of ATypI | Shop Region: USA & Canada

Founded by Erik Spiekermann andNeville Brody in 1989, FontShopis the original independentretailer of digital type. We offermore than 100,000 fonts fromdozens of expert-selectedfoundries, including our housebrand: FontFont.

FontFeed.comFontStruct.comFontBook.comTypeNavigatorFontFont Microsites

Get FontShop News

Enter email address

FontShop NewsNew and NotableTypographic TidbitsTypography 101: What’s thedifference between Std and Pro?New Foundry: Hubert JochamNew Fonts: CastleType

The FontFeedThe Best of FontFonts on the We...Designpreis Deutschland 2010 La...FIFTY|1: The New FontFont Relea...FontCast #9 — TypeTogetherThe 1879 Spencerian Compendium...

New FontsVerse Sans OTVerse Serif OTVoice OTVoice Serif OTGoudy Trajan Pack OTCarisma Package OTCarisma Inline OT

BestsellersSuomi Hand Script OTFF DIN OTEstilo RegularKlavika Basic OTOlicana Smooth OTFF DIN ProEstilo Script

Font ServicesCustom TypeHandFont

HelpType ResearchFont InstallationEducationLicense AgreementsMUL InformationFAQGlossaryOpenType

About UsMeet the StaffWhy FontShop?

Contact & Follow

Email

Facebook

Flickr

Twitter

Late edition towebfonts showcasehttp://ow.ly/16BVGZ— http://liftux.comuses FF Dagnyhttp://j.mp/8KvDieeven on their tastycontact form

Log InEnglishCelebrating 20 years!

We welcome four new foundries toFontShop.com: Hubert Jocham, CastleType, HvD Fonts, and ReType. Seethem all.

A font to benefit victims of theHaiti earthquake.

The FontFeed is a daily dispatch of recommendedfonts, typography techniques, and inspirationalexamples of digital type at work in the real world.

Important developments, from new products tonew website features - anything that affects theway you use FontShop.com

Search for fonts...

Get StartedBrowse & buy fonts ▶Browse by Category,Foundry, or Designer. Orlet our research team dothe work for you.

Discover new type ▶Our blog is updatedfrequently with fresh fontsand recommendations, theNewsletter brings thelatest to your email inbox,or discover type in printwith FontBook.

Get smart ▶Expert advice on formats,installation, or licensing isjust a click or Call away.

Voice Embryo Goudy Trajan

Browse Fonts

CategoryFoundryDesignerRandomGallery

Top Fonts

New FontsBestsellersStaff Picks

Your Fonts

HistoryFavorites

fontfont.com/

Page 97: Fluid Web Typography - SXSWi 2010

My account / Login

My shopping cart

My favorites

Font Finder Font Products Font Services Font Lounge News Support Company

Site Map Contact Imprint/Legal Terms of Use Monotype Imaging

Copyright © 2010 Linotype GmbH. All rights reserved.We reserve the right of errors and changes.

Top of pagePage last edited: 2010-02-16

presented in: Linotype Authentic™ Sans Bold

We serve all your Font and Type needs at Linotype.com

Try, purchase and download complete font families, value packs and single font weights from US$ 26.00. Weoffer you more than 12,000 original, high-quality fonts from classic to cool in OpenType, TrueType andPostScript. – Try them out!

Font Finder (Shop)

Looking for a special font?Explore the various ways to findthe font that fit your needs.more ...

Foundries and Libraries

Browse through our comprehensiveproduct catalog.more ...

Font of the Week

A literal labor of love, created byDaniel Pelavin – Save 20%!more ...

News

The new FontExplorer X productline – high-level professional fontmanagement for you.more ...

Award

Malabar received the 2010 GermanDesign Prize. Award ceremony on12th February 2010.more ...

Font Services

Take a look at our comprehensiveservices, tailored to your needs.more ...

Search for Fonts

Advanced search ...

Text Fontsfor books andmagazines

Script Fontscalligraphy,handwriting fonts

Handwriting/Grungefonts with apersonal touch

Corporate Fontsfonts forcorporate design

Celebration Fontsevents from birthdayto Halloween

Blackletter Fontsgothic, celtic fonts

Comic Fontskids and fun fonts

Western Fontsinspired bythe Wild West

Cool Fontsmodern, technical look

Screen Fontsoptimized for smallsizes

Symbol Fontspi fonts forany occasion

Linotype Top Sellers

1. Neue Helvetica®

2. Helvetica®

3. Avenir®

4. Optima®

5. Rotis® Sans Serif

Complete Font Charts …

Type News

New Font Releases

Font News

Platinum Collections

Fonts in Focus

Subscribe to ournewsletter or viewthe current issue.

Make the most outof your website –become an Affiliate!

Linotype offers allkinds of webshopping andlicensingadvantages.

BA Graphics

linotype.com

Page 98: Fluid Web Typography - SXSWi 2010

Licensed Fonts

FontSquirrel FontFont LinoType

Webfonts

Sub-setting

Formats

Price

560+fonts

100+families

???+families

✔EOT, OTF, TTF, SVG, & WOFF EOTLite & WOFF EOT

Free $80-860family/page view

Scalefont/WS

Page 99: Fluid Web Typography - SXSWi 2010

Easy License & Deployment

Webfont Service Bureaus

Page 100: Fluid Web Typography - SXSWi 2010

Subsetting

Local Use

Bandwidth Usage

Price Structure

What to look for…

Page 101: Fluid Web Typography - SXSWi 2010

What to look for…

Speed???

Page 102: Fluid Web Typography - SXSWi 2010

Do not control font name

Do not control font files

Price often a yearly license

Browser support varies

Limits of Webfont Services…

Page 103: Fluid Web Typography - SXSWi 2010

typekit.com

Page 104: Fluid Web Typography - SXSWi 2010

<scripttype="text/javascript"  src="http://use.typekit.com/xcp7mcv.js">

</script>

<script  type="text/javascript">try{Typekit.load();}catch(e){}</script>

<style>h1  {    font-­‐family:  "coquette-­‐1","coquette-­‐2",fantasy;}</style>

font name 1 font name 2

Page 105: Fluid Web Typography - SXSWi 2010

KERNEST.COM / Web Fonts Delivered.

USE ON YOUR WEBSITE FOR - FREE

COMMERCIAL USE PERMITTED.

Email

Password

Password again

Join Kernest or Sign In

DOT COLON’S VEGUR-R

Last Seen at

Member of 1 Font Family:

Vegur

1 Contributor

Dot Colon

Review Freeware Terms

More Info: http://www.dotcolon.net/font/font.php?id=1

Tags

Favorite

Commercial Use

Downloadable

For Pixelparty

Free

Gill

Humanist Sans

Ilyaporopudas

Myriad

Sans

Sans Serif

Text

SIMILAR FONTS

Cantarell from Dave Crossland

Cantarell from Dave Crossland

Families Cantarell Family

Compare - Free - Commercial Use Permitted * Web Native *

!"#"$%&'()*&+(,%-"$*#(.#/0()'%12%&(3(4*#'5%

Aurulent Sans Regular from Stephen G Hartke

Families Aurulent Sans Family

Compare - Free - Commercial Use Permitted * Web Native *

M+ 1p Regular from M+ Fonts

M+ 1p Regular from M+ Fonts

Families M+ Outline Fonts Family and M+ 1p Family

Compare - Free - Commercial Use Permitted * Web Native *

Welcome to Kernest. I'm

Vegur-R from Dot Colon

size 80 px color black background white word spacing px letter spacing px line height 140 %

Vegur-R from Dot Colon * Compare

QUESTIONS, COMMENTS, BUG REPORTS, OR FONT SUGGESTIONS? TELL US.

STYLES: SERIF - SANS SERIF - SCRIPT Find by Style or Tag CHARACTER SETS - FAMILIES - FOUNDRIES - DESIGNERS - HOW IT WORKS

Kernest.com - Blog - Twitter.com/Kernest - Kernest.com Google Group - Copyright 2009 - 2010 Working Pathways, Inc. - Terms of Service - Privacy

Featured in Fluid Web Typography by Jason Cranford Teague

kernest.com

Page 106: Fluid Web Typography - SXSWi 2010

<link  href="http://kernest.com/www-speaking-in-styles-com.css"  media="screen"  rel="stylesheet"  type="text/css"  />

Page 107: Fluid Web Typography - SXSWi 2010

View all news Subscribe

Featured

News

Typotheque now supports WOFF inFirefox 3.6 (25 Jan 2010) Selection of websites using Typotheque

Web Font Service (23 Jan 2010) Open Manifesto (18 Jan 2010) Gore’s choice (07 Jan 2010) Typotheque Web Font System now

supports Chrome (23 Dec 2009) New articles: Methods of distribution (21

Dec 2009)

Fonts

A contemporary typeface familyspecifically designed for the demands ofnewspaper printing; it consists of fourprimary text weights (each in threegrades) and is optimized for use at smallsizes.

T-shirts

‘A piece of text that looks good butdoesn't say anything’, printed in typefaceIrma, using its OpenType features mixingpositive and negative spaces of letters.Printed on Organic Fine Jersey T-Shirtsfrom American Apparel.

Mailing list

Add yourself to our news email list. Weuse the list to help keep you informed ofthe new fonts, special limited offers, andmajor updates. We never sell your email.Read about our privacy policy. Would youlike to unsubscribe?

your e-mail here

Articles

The articles section is our attempt tocollect relevant published and previouslyunpublished texts, not directedexclusively to academic peers andstudents, but to a broader audience ofindividuals with an interest in designcriticism, typography and graphic design.

Books

We Want You To Love Type by JohannaBiľak / Alan ZárubaThis publication presents work of 44Czech and Slovak designers, and focuseson the process of creating innovativetypographic solutions that often useexperimental processes to venture intounknown territory.

Font collection

BrioniBrioni TextFedra ArabicFedra HindiFedra MonoFedra SansFedra Sans AltFedra Sans CondensedFedra Sans CondensedAltFedra Sans Display 1Fedra Sans Display 2Fedra Serif AFedra Serif BFedra Serif DisplayFedra Serif PhoneticGreta DisplayGreta Display NarrowGreta GrandeGreta Grande NarrowGreta TextGreta Text NarrowHistoryIrmaIrma SlabJigsawJigsaw StencilKlimaxNara

Fonts in use

Search

© 1999-2010

typotheque.com

Page 108: Fluid Web Typography - SXSWi 2010

<link  rel="stylesheet"  href="http://wf.typotheque.com/WF-­‐011405-­‐000505"  type="text/css"  />

Page 109: Fluid Web Typography - SXSWi 2010

!"##"$%&"'()*+,%"'%-$.((*/

012%&"'()*+,3-1*%!"'(4%2"5%$6'(%$.(1%'"%'**)%!"/%76869+/.:(;%&#641%"/%.<6=*4!"#$%&'()*+)+$,#%,-%+)'"./0*,#$),#%),''&++*10&2)3$)4+&+),)566)78"#$98,'&)+"04$*"#

$"):*;&)<"4)-&,0)$&=$>)?@*'@)',#)1&)+',0&%>)$-,#+0,$&%>)-&,%)"4$)0"4%),#%)A"":0&%2

6,<):""%1<&)$")*.,:&+>)B,;,6'-*/$),#%)!0,+@)@,'(+2

&/**%6')%*642!"#$%&'()*+)8-&&)$")$-<),#%)C4*'()$")+&$)4/2)D"4E00)1&)4/),#%)-4##*#:)*#),1"4$

FG)+&'"#%+H

-/2%6')%>52%.').8.)56#%!"'(45@""+&)*#%*;*%4,0)8"#$+)$")+4*$)<"4-)/-&'*+&)%&+*:#)-&C4*-&.&#$+>)"-)/4-'@,+&

."#&<9+,;*#:)14#%0&+2

?*/!*+(%!"/%:/"!*44."'6#4D"4)',#)$-<),#<)#4.1&-)"8)8"#$+)8"-)8-&&)"#)<"4-)0"',0).,'@*#&>)%&;&0"/.&#$

&#;*-"#.&#$)"-)+$,:*#:)+&-;&-2)!"#$%&'()%"&+#E$)-&C4*-&)B,;,6'-*/$),#%):*;&+)<"4

'"./0&$&)80&=*1*0*$<)*#)<"4-)+&$94/2

@5')/*)4%"!%!"'(4%*'16'+*)%!"/%8.*$.'=%"'A4+/**'!"#$%&'()@,+)@4#%-&%+)"8)/-"8&++*"#,00<)%&+*:#&%)8"#$+)8-".)%"I&#+)"8)8"#$

8"4#%-*&+2)J00)8"#$+)"#)!"#$%&'()@,;&)1&&#)&#@,#'&%)8"-)"#9+'-&&#)4+&),#%)?&

,-&)'"#$*#4,00<)?"-(*#:)?*$@)8"4#%-*&+)$"),%%)."-&)8"#$+)$")$@&)',$,0":4&2

&64(%6')%B*#.6>#*!"#$%&'()+&-;&+)4/)8"#$)8*0&+)$@-"4:@)*$+)4#*C4&)?"-0%?*%&)'"#$&#$)%&0*;&-<

#&$?"-()K5LMN)$")&#+4-&)8"#$+),-&)%&0*;&-&%)$")<"4-)?&1+*$&)?*$@)*#'-&%*10&

+/&&%),#%)-&0*,1*0*$<2

C/*%2"5%6%!"'(%)*4.='*/338)<"4E-&),)$</&8,'&)%&+*:#&-)"-)/410*+@&->)/0&,+&)$,0()$")4+),1"4$).,(*#:)<"4-

8"#$+),;,*0,10&)"#)!"#$%&'()O)?&E%)0";&)$")@&,-)8-".)<"4H

&"'()*+,%D#"=!"#$%&'()*+)#&,-0<)-&,%<HPG)BJMQJRD)PGSG

T&E-&)'4--&#$0<)4#%&-:"*#:)$&+$*#:)*#),)/-*;,$&)1&$,2)J+)?&

+',0&)4/),#%),%%)$@&)8*#,0)/"0*+@>)?&E00)1&)&=$&#%*#:)*#;*$,$*"#+

$"),)?*%&-),4%*&#'&2)U")V"*#)$@&)0*+$)"8)$&+$&-+>)/0&,+&)&*$@&-

+*:#)4/)"#)!"#$%&'(2'".)"-)8"00"?)"4-)U?*$$&-)+$-&,.),#%)<"4

+@"40%)@&,-)8-".)4+)*#)$@&)#&=$)8&?)?&&(+2

38)<"4),-&),)(2:*%)*4.='*/)"-)?"-()8"-),)8"#$)!"5')/2>)?&E%&+/&'*,00<)0";&)$")@&,-)8-".)<"42)W0&,+&)%-"/)4+),)0*#&),$

-*'@78"#$%&'(2'".)8"-)."-&)*#8"-.,$*"#)"#),)+/&'*,0)/-&;*&?

"8)!"#$%&'(>),#%)%&$,*0+)"#)@"?)$"):&$)<"4-)8"#$+)+,8&0<)"#$"

?&1+*$&+),'-"++)$@&)?"-0%2

XT@,$)*E.)-&,00<)&='*$&%),1"4$)*+)$@&

"//"-$4#*$<)$")&.1-,'&)$@&)#&?)$&'@#"0":<),#%

8*#,00<222XSY)MZ[\]^\R)PGG_

`T@,$)*E.)-&,00<)&='*$&%),1"4$)*+)$@&)"//"-$4#*$<)$")&.1-,'&

$@&)#&?)$&'@#"0":<),#%)8*#,00<)@,;&),)8-,.&?"-()8"-

%&+*:#*#:)+'-&&#)8"#$+)$@,$)?*00),'$4,00<):&$)4+&%)abc)3E.);&-<

"/$*.*+$*'),1"4$)$@,$2)^&',4+&)?@&#)?,+)$@&)0,+$)$*.&)<"4

@,%),)#&?).&%*4.)$")/0,<)?*$@de

9)!"#$%&$'()*+",'#&-)$(&.#/$.,.0)01#$(2)3.456(&%)3..7

U@&)*#,4:4-,0)!"#$%&'()/"+$G_)MZ[\]^\R)PGG_

T&0'".&)$")$@&)!"#$%&'()10":2)!"00"?)$@*+)8"-)#&?+)"8)."-&

8"4#%-*&+)V"*#*#:)!"#$%&'(>)#&?)8"#$+>),#%)4/%,$&+)$")$@&

+&-;*'&2

BECF%&GH-9%&GB%IGJB%0ED9K-E@5')/*)4%"!%=/*6(%(2:*!6+*4;%#*=6##2;%4.<:#2%6')%/*#.6>#2%4*/8*)L

!Jf+ )g )U4$"-*,0 )g )64//"-$

U&-.+)h)'"#%*$*"#+ )g )W-*;,'< )g )5"#$,'$)4+

!"#$%&'()*+)/-"4%0<)1-"4:@$)$")<"4)1<)M#*6/#*!(),#%)G<'.-K2

i)PGG_)!"#$%&'()jj5>)kGkG)6,.4&0)]"-+&)L-)6$&)SlG>)5"04.1*,)]L)PSGmF9YmPk>)Q6J

6$<0& L&+*:#&- !"4#%-< Search )

6&$)4/),#),''"4#$ ) j":)*#

&.')%!"'(4%>2

ßfontdeck.com

Page 111: Fluid Web Typography - SXSWi 2010

Search

Fonts byType StyleLanguageFoundryA-Z ListWeb Fonts

Font ListsMost Popular FontsNew ReleasesFonts on SaleOther Fonts

ResourcesNewslettersArticles

Font ServicesCustom FontsFont Licensing

SupportFont HelpMy AccountContact UsAbout Ascender CorpBecome an AffiliateFree E-Newsletter

Sign In 0 items $0.00 ViewMy Cart:

Webtype solves the 'web-safe' fontsdilemma using premium-quality text andheadline fonts.

Eliminate the hassles and expense of using Flash,JavaScript or image replacement techniques!

SupportedBrowsers

!"#$%&'()*+,"'-(./01&&(.,,(2013&%0&Clean, readable and will render properly

4&%(5-6%('1(7189%-(:1*0(20+8;Use real fonts, not graphics

<+&-(51(=>6,%>%8'Create CSS & deploy; works across all modernbrowsers

?+&'@(A%,"+B,%(C%09"/%Cloud-deployed, minimal latency

D"9%(:1*0(E%B&"'%(+(5-61#0+6$"/(?+/%,"F'

E-NewsletterFont HelpFree FontsUseful LinksSite Map

Privacy PolicyRefund PolicyTrademarksBecome an Affiliate

Ascenderfonts.com has the finest, high quality fonts available forinstant download. Brought to you by the font experts atAscender Corp, you will find a great selection of TrueType fontsand OpenType fonts from licensed type designers and foundries.

Web Design & Development by DevBridge© 2004-2010 Ascender Corporation

ascenderfonts.com

Page 112: Fluid Web Typography - SXSWi 2010

Webfont Service Bureaus

Typekit Kernest Typotheque Ascender Fontdeck

# Fonts

Sub-setting

Local Use

Bandwidth

Price

400+fonts

600+fonts

40+families

200+fonts

40+families

✔ ✔ ✔

✔ ✔

5-500GB/month

Unlimited 500MB/month

1-18GB/month

Unlimited

$25-250/year Subscription

$1-75/font/year/WS

$100-900/family

$10-105/font/year

~$10/font/year

Page 113: Fluid Web Typography - SXSWi 2010

CHOOSINGWebfonts

Page 114: Fluid Web Typography - SXSWi 2010

Choose fortypography::typevoice::speech

voice…

“I’m going to kill you”

“I’m going to kill you”

“I’m going to kill you”

“I’m going to kill you”

UglyQua

Sybil Green

Synchro LET

Cooper Black

Page 115: Fluid Web Typography - SXSWi 2010

Choose for compatibility…Always include webfont, Web safe, core web, and generic typefaces in your font stack.

Page 116: Fluid Web Typography - SXSWi 2010

web safe genericcore webwebfont

h1  {     font-­‐family  :  diavlo,  tahoma,  arial,  sans-­‐serif;  }  

p  {   font-­‐family  :    cambria,  georgia,  serif;  }

web safe genericcore web

Page 117: Fluid Web Typography - SXSWi 2010

Choose forSelect understudy fonts with similar widths and kerning to the primary font.

consistency…

Looking GlassLooking Glass

Diavlo

Verdana

Looking GlassTahoma

Page 118: Fluid Web Typography - SXSWi 2010

Choose for consistency…Test all fonts in all combinations.

Page 119: Fluid Web Typography - SXSWi 2010

Looking GlassLorem   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.

h1  {     font-­‐family  :  diavlo,  tahoma,  arial,  sans-­‐serif;  }  

p  {   font-­‐family  :    cambria,  georgia,  serif;  }

Page 120: Fluid Web Typography - SXSWi 2010

Choose forSelect fonts with bold, italic, and bold/italic versions.

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   conub ia   nos t ra ,   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.

style…

Cambria

Page 121: Fluid Web Typography - SXSWi 2010

Choose for legibility…Select fonts with consistent weight and thickness with simple, low contrast strokes and serifs.

Looking Glass

Looking Glass

Weight & Thickness

Strokes & Serifs

Diavlo

Tahoma

Page 122: Fluid Web Typography - SXSWi 2010

Choose for

Looking Glass

readability…Select fonts that are well balanced between letter spacing, counter width, letter width, & x-height.

letter spacing

counter width

letter width

x-heightTahoma

Page 123: Fluid Web Typography - SXSWi 2010

2010The Year of

Web Typography

Page 124: Fluid Web Typography - SXSWi 2010

fluidwebtype.info/sxsw

QUESTIONS

jasonspeaking.com | @jasonspeaking

Page 125: Fluid Web Typography - SXSWi 2010

www.fluidwebtype.com