91
Jason Cranford Teague fluidwebtypography.com Next10 Berlin, DE | 11 May 2010 2010 The Year of Web Typography

Fluid Web Typography - next10

Embed Size (px)

DESCRIPTION

This is an updated version of my WebTypography session, shortened, less technical, and stressing more design considerations.

Citation preview

Page 1: Fluid Web Typography - next10

Jason Cranford Teaguefluidwebtypography.com

Next10Berlin, DE | 11 May 2010

2010The Year of Web Typography

Page 2: Fluid Web Typography - next10

What do these 3 Thingshave in common?

Page 3: Fluid Web Typography - next10

Flying Cars

Page 4: Fluid Web Typography - next10

Trips to Jupiter

Page 5: Fluid Web Typography - next10

Downloadable Fonts

Page 6: Fluid Web Typography - next10

20103 things I was supposed to have.

Page 7: Fluid Web Typography - next10

2008

Page 8: Fluid Web Typography - next10

2009

Page 9: Fluid Web Typography - next10

2010The Year of Web Typography

Page 10: Fluid Web Typography - next10

3 Things AboutJason Cranford Teague

Page 11: Fluid Web Typography - next10

DesignerMarriott

Page 12: Fluid Web Typography - next10

Author12+ Books

Page 13: Fluid Web Typography - next10

DC MetroCranford Teague

Page 14: Fluid Web Typography - next10

@jasonspeakingjasonspeaking.com

Page 15: Fluid Web Typography - next10

3 Things AboutWeb Typography

Page 16: Fluid Web Typography - next10

USEwebfonts

Page 17: Fluid Web Typography - next10

FINDwebfonts

Page 18: Fluid Web Typography - next10

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 - next10

Why does typography matter?

What is Web typography?

Page 20: Fluid Web Typography - next10

@fluidwebtypefluidwebtype.info/next

Page 21: Fluid Web Typography - next10

WHYTypography Matters

Page 22: Fluid Web Typography - next10

typography::typevoice::speech

Page 23: Fluid Web Typography - next10

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

Page 24: Fluid Web Typography - next10

“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 - next10

Brand XBrand D

Brand IBrand H

Brand EBrand BBrand M

Brand F Brand NBrand C

Brand A

Brand GBrand KBrand J Brand Q

Brand X

Brand RBrand TBrand S

Page 26: Fluid Web Typography - next10
Page 27: Fluid Web Typography - next10
Page 28: Fluid Web Typography - next10

WHATWeb Typography Is

Page 29: Fluid Web Typography - next10

NTTEXT IN IMAGE

Page 30: Fluid Web Typography - next10

NTTEXT IN FLASH

Page 31: Fluid Web Typography - next10

Web Typography =HTML + CSS

Page 32: Fluid Web Typography - next10

Web Typography =Limited Font Choices

Page 33: Fluid Web Typography - next10

design is about

overcoming

Limitations

Page 34: Fluid Web Typography - next10

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

Alejandro Lo Celso Saraviapampatype.com

Page 35: Fluid Web Typography - next10

AA A A A

Page 36: Fluid Web Typography - next10

What if everybody looked the same…

…and everybody was UGLY?

Page 37: Fluid Web Typography - next10

yahoo.com

Page 38: Fluid Web Typography - next10

aol.com

Page 39: Fluid Web Typography - next10

msn.com

Page 40: Fluid Web Typography - next10

Web Typography =UGLY!!!!!

Page 41: Fluid Web Typography - next10

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.com

Page 42: Fluid Web Typography - next10

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 43: Fluid Web Typography - next10

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 44: Fluid Web Typography - next10

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 45: Fluid Web Typography - next10

USINGWebfonts

Page 46: Fluid Web Typography - next10

How many fonts are there?

>100 Thousand

Page 47: Fluid Web Typography - next10

How many fonts are used on the Web?

<5 Fonts

Page 48: Fluid Web Typography - next10

(Pre)InstalledOS, Software, or Downloaded

Page 49: Fluid Web Typography - next10

Web Safe Fonts~190 Fonts

Page 50: Fluid Web Typography - next10

~130 FontsWindows

Page 51: Fluid Web Typography - next10

~125 FontsMac

Page 52: Fluid Web Typography - next10

59 FontsMac & Windows

Page 53: Fluid Web Typography - next10

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

Web Safe Fonts

Page 54: Fluid Web Typography - next10

← 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

Matrix of Fonts

Page 55: Fluid Web Typography - next10

WebfontsAny font?

Page 56: Fluid Web Typography - next10

exljbris.com

Page 57: Fluid Web Typography - next10

Embedded Open Type(.eot)EOT Lite (.eot)

File Formats

Page 58: Fluid Web Typography - next10

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

File Formats

Page 59: Fluid Web Typography - next10

Scalable Vector Graphics (.SVG)

File Formats

Page 60: Fluid Web Typography - next10

Web Open Font Format (.woff)

File Formats

Page 61: Fluid Web Typography - next10

Browser Font Support

EOT/EOT LITE

TTF/OTF

SVG

WOFF

✔ ✔ ✔ ✔

✔ ✔ ✔ComingSoon? ✔ ? Coming

Soon!Coming Soon!

Page 62: Fluid Web Typography - next10

EOT Lite or WOFF???

Page 63: Fluid Web Typography - next10
Page 64: Fluid Web Typography - next10

EULAEnd User License Agreement

Page 65: Fluid Web Typography - next10

IPIntellectual Property

Page 66: Fluid Web Typography - next10

Exljbris

Page 67: Fluid Web Typography - next10

Emigre

Page 68: Fluid Web Typography - next10

Chank

Page 69: Fluid Web Typography - next10

FINDINGWebfonts

Page 70: Fluid Web Typography - next10

Licensed FontsYou Control

Page 71: Fluid Web Typography - next10

What to look for…

Webfont linking in EULA

Compression

Formats

Price Structure

Page 72: Fluid Web Typography - next10

What to look for…

Optimized???

Page 73: Fluid Web Typography - next10

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.

Font Squirrel

Page 74: Fluid Web Typography - next10

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

Page 75: Fluid Web Typography - next10

Licensed Fonts

FontSquirrel FontFont LinoType

Webfonts

Sub-setting

Formats

Price

560+fonts

100+families

600+families

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

Free $80-860family/WS

Scalefont/WS

Page 76: Fluid Web Typography - next10

Easy License & Deployment

Webfont Service Bureaus

Page 77: Fluid Web Typography - next10

Compression

Local Use

Bandwidth Usage

Price Structure

What to look for…

Page 78: Fluid Web Typography - next10

What to look for…

Speed???

Page 79: Fluid Web Typography - next10

Do not control the CSS Code

Do not control font files

Price often a yearly license

Browser support varies

Limits of Webfont Services…

Page 80: Fluid Web Typography - next10

Typekit

Page 81: Fluid Web Typography - next10

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

Ascender Fonts

Page 82: Fluid Web Typography - next10

Webfont Service Bureaus

Typekit Kernest Typotheque Ascender

# Fonts

Sub-setting

Local Use

Bandwidth

Price

800+families

600+fonts

40+families

200+fonts

✔ ✔ ✔

✔ ✔

5-500GB/month

Unlimited 500MB/month

1-18GB/month

$25-250/year Subscription

$1-75/font/year/WS

$100-900/family

$10-105/font/year

Page 83: Fluid Web Typography - next10

Webfont Service Bureaus

Font.com Fontdeck

# Fonts

Sub-setting

Local Use

Bandwidth

Price

2000+fonts

40+families

??? Unlimited

??? /year Subscription

~$10/font/year

Page 84: Fluid Web Typography - next10

CHOOSINGWebfonts

Page 85: Fluid Web Typography - next10

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 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 86: Fluid Web Typography - next10

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 87: Fluid Web Typography - next10

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 88: Fluid Web Typography - next10

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 89: Fluid Web Typography - next10

2010The Year of Web Typography

Page 90: Fluid Web Typography - next10

fluidwebtype.info/next

QUESTIONS

jasonspeaking.com | @jasonspeaking

Page 91: Fluid Web Typography - next10

www.fluidwebtype.com