Fluid Web Typography - SXSWi 2010

ﬂuidwebtypography Jason Cranford Teague SXSW 2010 Austin, TX | 13 March 2010

What do these 3 Things have in common?

Flying Cars

Trips to Jupiter

Downloadable Webfonts

2010 3 things I was supposed to have.

2010 The Year of Web Typography

3 Things to Know About Jason Cranford Teague

Designer Marriott

Author 12+ Books

DC Metro Cranford Teague

jasonspeaking.com @jasonspeaking

3 Things to Learn About Web Typography

USE webfonts

FIND webfonts

webtype CHOOSE webfonts GET THE BOOK RECENTLY ON FWT… Fluid Web Typography by WELCOME TO FLUID WEB TYPE! JASON CRANFORD TEAGUE is the only comprehensive guide to Welcome to Fluid Web Type, a new web site devoted to chronicling the SUBSCRIBE TO FWT modern Web Typography rapidly changing world of Web Typography. Welcome Gifts To celebrate Your email: available. Learn how to find the site launch, I'm pleased to announce: Through February 1st, you can more typefaces, improve Enter email address... legibility, and increase the visual win a copy of Fluid Web Typography through Webdesigner Depot. All you appeal of your Web designs all have to do is add a... in one compact volume Subscribe available from New Riders. Read More Unsubscribe USING SIFR ON FWT Main One of the reasons that designers often site for wanting to use Flash is that, Contact

Why does typography matter? What is Web typography?

@ﬂuidwebtype ﬂuidwebtype.info/sxsw

WHY Typography Matters

typography::type voice::speech

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

“I’m going to kill you” Cooper Black “I’m going to kill you” Synchro LET “I’m going to kill you” Sybil Green “I’m going to kill you” UglyQua

and A Brand BBrand d C Brand D Brand E and F Brand X Brand G Brand H Brand I rand J Brand K Bran

Font or Typeface

WHAT Web Typography is

NT TEXT IN IMAGE

NT TEXT IN FLASH

Web Typography = HTML + CSS

Web Typography = Limited Font Choices

design is about overcoming Limitations

“Type design is an act of plagiarism in itself—you basically recreate the ﬂesh of the same skeleton.” Alejandro Lo Celso Saravia pampatype.com

A A A A A

What if everybody looked the same… …and everybody was UGLY?

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

yahoo.com

aol.com

msn.com

Web Typography = UGLY!!!!!

audio video columns newsletter about subscribe search Why I Write By DORIANNE LAUX on 2.08.10 I have recently begun to think of writing as what Susan Sontag calls “a wisdom project” in her forward to Another Beauty, a collection of autobiographical essays by the great Polish poet Adam Zagajewski. Dorianne Laux is the author of four books of poetry and co-author of The Poet’s Companion: A Guide to the “…autobiography is an occasion to purge oneself of vanity, Pleasures of Writing Poetry. She has while advancing the project of self understanding—call it the been the recipient of the Oregon Book wisdom project—which is never completed, however long the Award and was short-listed for the life.” Lenore Marshall Poetry Prize. She lives in Raleigh, North Carolina where she teaches poetry at North I am still hard at work on this project of the self. The solitary self, as well Carolina State University. For more, go to DorianneLaux.com. as the self in relation to the world and the unknown universe we swirl around in, uncertain of our purpose or future. When I wrote the poems that would become my first book, I didn’t think of it as a book, but rather poemsoutloud.net as 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 is there suffering? Where is truth? These questions would arise in me in the Facts About the Moon Buy from POWELLS form of poems, and in making the poems into a collection, I tried to Buy from INDIEBOUND arrange them in a shape, find a path for them to travel to make clearer those questions. I write to know the questions. In her powerful fourth collection, Dorianne Laux once again strikes fire Poem after poem, book after book, the ante is upped. I think this could be from neighborhood moments: a quiet

autumn summer @sophiaw happy monday / month to you too! Mon, Mar 01, 2010 - 14:00:22, from TweetDeck When life serves you lemons make lemonade goes the saying and these days tsimitakis Watch this video: http://slide.com/t/5/5/iRdYgA7YzOlG life does taste like home made lemonade. Some times overly sour, sometimes ΣκληρόβίντεογιατηΓάζα overly sweet. On occasion sour but with the grains of sugar crunchy between f r o m w e b , M o n , M a r 01, 2010 - 15: 03: 25 acidsmile.co.uk your teeth. Some things are going extremely well, others very badly and in some cases I have no clue what is going on. Days merge into nights, weeks tgeorgakopoulos http://twitpic.com/16178x - ΤζάστινΠλιάτσικας change and suddenly it’s the end of February and I’m wondering where two (@The_Stranger_gr μεπρόλαβες) #pliatsikas months of my life have gone and what have I done with them. Existential f r o m T w i t P i c , Mon, Mar 01, 2010 - 15:02:46 c, questions aside, everything since the 6th of Jan when I went back to work seems like a blur. Very stressful, too much work, too many variables. djzinc that chat roulette thing is raw Normally I thrive…... f r o m w e b , M o n , M a r 01, 2010 - 15: 02: 25 2010 - #p52 - loose thoughts - ramblings 24/Feb/2010

Voices $199 Voice morphing for your iPhone! per piece Convert 99¢ per piece The unit converter & calculator plasma taptaptap.com Parablox 99¢ per piece Feed your brain and test your reflexes! Classics Free

Workflow and collaboration. Content management solutions that don't feel templated. CONTENT MANAGEMENT SYSTEMS DRUPAL CMS ALFRESCO WCM workatplay.com TOOLBOX The right tools for the job

B E E R C AM P BEE B MPP SXSW 2010 EDITION FOLLOW @NCLUD Emo’st. FOLLOW @NCLUD MONDAY FOR UPDATES FOR UPDATES 3 Red Riv 60 er S March 15 Austin, TX T W E N T Y T E N BEERCAMP FOLLOW @NCLUD Festivities begins at 7:30 PM FOR UPDATES Emo’s sxsw.beercamp.com An open invitation Everyone & anyone is welcome. TO PARTY Open bar ’til the flotilla of kegs are kicked. Music provided by DJ Richard Gear.

Web Fonts or Webfonts?

USING Webfonts

How many fonts are there? >100 Thousand

How many fonts are used on the Web? <5 Fonts

Generic Font Families Core Web Fonts Web Safe Fonts Webfonts

webfont primary understudy understudy web-safe core web generic understudy font-‐family: diavlo, garamond, georgia, serif;

Generic Font Family 5 Families

Arial Sans-serif Times Serif Courier Monospace Zapﬁno Cursive Curlz MT Fantasy

font-‐family: sans-‐serif;

Core Web Fonts 10 Fonts

Microsoft Core Fonts For the Web

EULA End User License Agreement

Andale Mono Arial Arial Black Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS Verdana 

Arial Georgia Times New Roman Trebuchet MS Verdana

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

Web Safe Fonts ~190 Fonts

Preinstalled OS or Common Software

Windows ~130 Fonts

Mac ~125 Fonts

Mac & Windows 59 Fonts

Websafe Fontsß 3 I Font Name Weight and Style OS Rank Sample 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 ﬂuidwebtype.info/ 2-Almost Certain 7 Apple Symbols web-safe-fonts 2-Almost Certain 8 Arial bold, italic, bold/italic 1-Certain

!"#$%&'()')(*#+',-*./0.'1%#2'!"3'"*.'4%*.(1+'(50$"#%*6 +7+#08+9'!%3$(+()#':))%30'"*.';.(,0'<$0"#%=0'>-%#0 Office Mac OS Windows OS Office Windows Mac Adobe Creative Suite OS X OS X Windows Windows Office Office Office Acrobat Illustrator InDesign CS2 CS3 CS3 Tiger Leopard XP SP2 Vista 2003 2007 2004 7 CS2 CS2 extras install disk 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 x x x Arno Pro media.24ways.org/ Baskerville x x x 2007/17/fontmatrix.html Baskerville Old Face Bauhaus 93 x x x x x x Bell Gothic Std x Bell MT x x x

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

Webfonts Any font?

exljbris.com

name you give it path to font ﬁle @font-‐face { font-‐family: 'body copy'; src: url('fonts/Diavlo_BOOK_II_37.otf'); font-‐style: normal; font-‐weight: normal; font properties font-‐stretch: normal; font-‐variant: normal; }

name you gave it font-‐family: 'body copy', tahoma, arial, sans-‐serif;

File Formats Embedded Open Type(.eot)

File Formats EOT Lite (.eot)

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

File Formats Scalable Vector Graphics (.SVG)

File Formats Web Open Font Format (.woﬀ)

EOT Lite or WOFF ???

EOT for IE @font-‐face { font-‐family: 'body copy'; src: url('fonts/Diavlo_BOOK.eot'); src: local('diavlo regular'), Local Name local('diavlo-‐regular'), WOFF url('fonts/Diavlo_BOOK.woff') format('woff'); SVG url('fonts/Diavlo_BOOK.svg#diavlo-‐regular') format('svg'); OTF/TTF url('fonts/Diavlo_BOOK.otf') format('opentype'); }

EULA End User License Agreement

IP Intellectual Property

exljbris.com

emigre.com

Celebrating 20 years! English Log In Fonts Blog Help HISTORY FAVORITES (0) CART (0) Browse Fonts Search for fonts... Category Foundry Designer Get Started Browse & buy fonts ▶ Random Browse by Category, Gallery Foundry, or Designer. Or Top Fonts let our research team do the work for you. New Fonts Bestsellers Discover new type ▶ Staff Picks Our blog is updated frequently with fresh fonts Your Fonts and recommendations, the History Newsletter brings the latest to your email inbox, Favorites or discover type in print with FontBook. Get smart ▶ Expert advice on formats, installation, or licensing is just a click or Call away. We welcome four new foundries to FontShop.com: Hubert Jocham, Castle fontfont.com Type, HvD Fonts, and ReType. See them all. Voice Embryo Goudy Trajan A font to benefit victims of the The FontFeed is a daily dispatch of recommended

My account / Login My shopping cart presented in: Linotype Authentic™ Sans Bold My favorites Font Finder Font Products Font Services Font Lounge News Support Company Search for Fonts We serve all your Font and Type needs at Linotype.com Advanced search ... Linotype Top Sellers Try, purchase and download complete font families, value packs and single font weights from US$ 26.00. We offer you more than 12,000 original, high-quality fonts from classic to cool in OpenType, TrueType and 1. Neue Helvetica® Text Fonts PostScript. – Try them out! 2. Helvetica® for books and magazines Font Finder (Shop) Foundries and Libraries Font of the Week 3. Avenir® Script Fonts 4. Optima® calligraphy, 5. Rotis® Sans Serif handwriting fonts Complete Font Charts … Handwriting/Grunge fonts with a personal touch BA Graphics Looking for a special font? A literal labor of love, created by Type News Corporate Fonts Explore the various ways to find Browse through our comprehensive Daniel Pelavin – Save 20%! fonts for New Font Releases the font that fit your needs. product catalog. more ... corporate design more ... more ... Font News Celebration Fonts Platinum Collections events from birthday Fonts in Focus to Halloween News Award Font Services Blackletter Fonts gothic, celtic fonts Subscribe to our newsletter or view Comic Fonts the current issue. kids and fun fonts Western Fonts Make the most out inspired by of your website – the Wild West linotype.com become an Affiliate! Cool Fonts modern, technical look Linotype offers all Screen Fonts The new FontExplorer X product Malabar received the 2010 German Take a look at our comprehensive kinds of web optimized for small line – high-level professional font Design Prize. Award ceremony on services, tailored to your needs. shopping and sizes management for you. 12th February 2010. more ... licensing Symbol Fonts more ... more ... advantages. pi fonts for any occasion Site Map Contact Imprint/Legal Terms of Use Monotype Imaging

chank.com

What about sIFR & Cufón ?

FINDING Webfonts

Licensed Fonts You Control

What to look for… Webfont linking in EULA Subsetting Formats Cost

What to look for… Optimized???

Find Fonts ONLY THE BEST Twitter | RSS Feed FILTER COMMERCIAL- All Formats @font-face USE FREE FONTS STYLE Blackletter 17 Calligraphic 17 Comic 26 Dingbat 27 Free fonts have met their match. We know how hard it is to find Display 91 Grunge 39 quality freeware that is licensed for commercial work. We've done Handdrawn 42 Initials 3 the hard work, hand-selecting these typefaces and presenting them Monospaced 24 Novelty 26 in an easy-to-use format. Here are some of our favorites: Pixel 4 Retro 35 fontsquirrel.com Sans Serif 118 Script 47 Serif 62 Slab Serif 19 PT Sans | 8 Styles | TrueType | Paratype | View | Download TTF Stencil 21 Typewriter 11 Total Families: 629 Font Foundries List Museo Slab | 2 Styles | OpenType | Exljbris | View | Download OTF (offsite) ABOUT Font Squirrel is your

Celebrating 20 years! English Log In Fonts Blog Help HISTORY FAVORITES (0) CART (0) Browse Fonts Search for fonts... Category Foundry Designer Get Started Browse & buy fonts ▶ Random Browse by Category, Gallery Foundry, or Designer. Or Top Fonts let our research team do the work for you. New Fonts Bestsellers Discover new type ▶ Staff Picks Our blog is updated frequently with fresh fonts Your Fonts and recommendations, the History Newsletter brings the latest to your email inbox, Favorites or discover type in print with FontBook. Get smart ▶ Expert advice on formats, installation, or licensing is just a click or Call away. We welcome four new foundries to fontfont.com/ FontShop.com: Hubert Jocham, Castle Type, HvD Fonts, and ReType. See them all. Voice Embryo Goudy Trajan A font to benefit victims of the The FontFeed is a daily dispatch of recommended

My account / Login My shopping cart presented in: Linotype Authentic™ Sans Bold My favorites Font Finder Font Products Font Services Font Lounge News Support Company Search for Fonts We serve all your Font and Type needs at Linotype.com Advanced search ... Linotype Top Sellers Try, purchase and download complete font families, value packs and single font weights from US$ 26.00. We offer you more than 12,000 original, high-quality fonts from classic to cool in OpenType, TrueType and 1. Neue Helvetica® Text Fonts PostScript. – Try them out! 2. Helvetica® for books and magazines Font Finder (Shop) Foundries and Libraries Font of the Week 3. Avenir® Script Fonts 4. Optima® calligraphy, 5. Rotis® Sans Serif handwriting fonts Complete Font Charts … Handwriting/Grunge fonts with a personal touch BA Graphics Looking for a special font? A literal labor of love, created by Type News Corporate Fonts Explore the various ways to find Browse through our comprehensive Daniel Pelavin – Save 20%! fonts for New Font Releases the font that fit your needs. product catalog. more ... corporate design more ... more ... Font News Celebration Fonts Platinum Collections events from birthday Fonts in Focus to Halloween News Award Font Services Blackletter Fonts gothic, celtic fonts Subscribe to our newsletter or view Comic Fonts the current issue. kids and fun fonts Western Fonts Make the most out inspired by linotype.com of your website – the Wild West become an Affiliate! Cool Fonts modern, technical look Linotype offers all Screen Fonts The new FontExplorer X product Malabar received the 2010 German Take a look at our comprehensive kinds of web optimized for small line – high-level professional font Design Prize. Award ceremony on services, tailored to your needs. shopping and sizes management for you. 12th February 2010. more ... licensing Symbol Fonts more ... more ... advantages. pi fonts for any occasion Site Map Contact Imprint/Legal Terms of Use Monotype Imaging

Licensed Fonts FontSquirrel FontFont LinoType Webfonts 560+ 100+ ???+ fonts families families Sub-setting ✔ EOT, OTF, TTF, Formats SVG, & WOFF EOTLite & WOFF EOT Price Free $80-860 Scale family/page view font/WS

Webfont Service Bureaus Easy License & Deployment

What to look for… Subsetting Local Use Bandwidth Usage Price Structure

What to look for… Speed???

Limits of Webfont Services… Do not control font name Do not control font ﬁles Price often a yearly license Browser support varies

typekit.com

STYLES: SERIF - SANS SERIF - SCRIPT Find by Style or Tag CHARACTER SETS - FAMILIES - FOUNDRIES - DESIGNERS - HOW IT WORKS KERNEST.COM / Web Fonts Delivered. 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 % kernest.com Vegur-R from Dot Colon * Compare DOT COLON’S VEGUR-R USE ON YOUR WEBSITE FOR - FREE Last Seen at COMMERCIAL USE PERMITTED. Email

Search © 1999-2010 Featured Font collection Brioni Brioni Text Fedra Arabic Fedra Hindi Fedra Mono Fedra Sans Fedra Sans Alt Fedra Sans Condensed Fedra Sans Condensed Alt Fedra Sans Display 1 Fedra Sans Display 2 Fedra Serif A Fedra Serif B Fedra Serif Display Fedra Serif Phonetic Greta Display Greta Display Narrow Greta Grande Greta Grande Narrow Greta Text News Fonts T-shirts Greta Text Narrow Typotheque now supports WOFF in A contemporary typeface family ‘A piece of text that looks good but History Firefox 3.6 (25 Jan 2010) specifically designed for the demands of doesn't say anything’, printed in typeface Irma Selection of websites using Typotheque newspaper printing; it consists of four Irma, using its OpenType features mixing Irma Slab Web Font Service (23 Jan 2010) primary text weights (each in three positive and negative spaces of letters. Jigsaw Open Manifesto (18 Jan 2010) grades) and is optimized for use at small Printed on Organic Fine Jersey T-Shirts Jigsaw Stencil Gore’s choice (07 Jan 2010) sizes. from American Apparel. Klimax Nara Typotheque Web Font System now typotheque.com supports Chrome (23 Dec 2009) New articles: Methods of distribution (21 Fonts in use Dec 2009) View all news Subscribe Mailing list Articles Books Add yourself to our news email list. We The articles section is our attempt to We Want You To Love Type by Johanna use the list to help keep you informed of collect relevant published and previously Biľak / Alan Záruba the new fonts, special limited offers, and unpublished texts, not directed This publication presents work of 44 major updates. We never sell your email. exclusively to academic peers and Czech and Slovak designers, and focuses Read about our privacy policy. Would you students, but to a broader audience of on the process of creating innovative

6&$)4/),#),''"4#$ ) j":)*# &.')%!"'(4%>2 6$<0& L&+*:#&- !"4#%-< Search ) BECF%&GH-9%&GB%IGJB%0ED9K-E @5')/*)4%"!%=/*6(%(2:*!6+*4;%#*=6##2;%4.<:#2%6')%/*#.6>#2%4*/8*)L 012%&"'()*+,3 &"'()*+,%D#"= -1*%!"'(4%2"5%$6'(%$.(1%'"%'**)%!"/%76869+/.:(;%&#641%"/%.<6=*4 !"#$%&'()*+)#&,-0<)-&,%<H !"#$%&'()*+)+$,#%,-%+)'"./0*,#$),#%),''&++*10&2)3$)4+&+),)566)78"#$98,'&)+"04$*"# PG)BJMQJRD)PGSG $"):*;&)<"4)-&,0)$&=$>)?@*'@)',#)1&)+',0&%>)$-,#+0,$&%>)-&,%)"4$)0"4%),#%)A"":0&%2 6,<):""%1<&)$")*.,:&+>)B,;,6'-*/$),#%)!0,+@)@,'(+2 T&E-&)'4--&#$0<)4#%&-:"*#:)$&+$*#:)*#),)/-*;,$&)1&$,2)J+)?& +',0&)4/),#%),%%)$@&)8*#,0)/"0*+@>)?&E00)1&)&=$&#%*#:)*#;*$,$*"#+ &/**%6')%*642 $"),)?*%&-),4%*&#'&2)U")V"*#)$@&)0*+$)"8)$&+$&-+>)/0&,+&)&*$@&- !"#$%&'()*+)8-&&)$")$-<),#%)C4*'()$")+&$)4/2)D"4E00)1&)4/),#%)-4##*#:)*#),1"4$ +*:#)4/)"#)!"#$%&'(2'".)"-)8"00"?)"4-)U?*$$&-)+$-&,.),#%)<"4 FG)+&'"#%+H +@"40%)@&,-)8-".)4+)*#)$@&)#&=$)8&?)?&&(+2 -/2%6')%>52%.').8.)56#%!"'(4 ."#&<9+,;*#:)14#%0&+2 fontdeck.comß 5@""+&)*#%*;*%4,0)8"#$+)$")+4*$)<"4-)/-&'*+&)%&+*:#)-&C4*-&.&#$+>)"-)/4-'@,+& 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<)"#$" ?*/!*+(%!"/%:/"!*44."'6#4 ?&1+*$&+),'-"++)$@&)?"-0%2 D"4)',#)$-<),#<)#4.1&-)"8)8"#$+)8"-)8-&&)"#)<"4-)0"',0).,'@*#&>)%&;&0"/.&#$ &#;*-"#.&#$)"-)+$,:*#:)+&-;&-2)!"#$%&'()%"&+#E$)-&C4*-&)B,;,6'-*/$),#%):*;&+)<"4 XT@,$)*E.)-&,00<)&='*$&%),1"4$)*+)$@& '"./0&$&)80&=*1*0*$<)*#)<"4-)+&$94/2 "//"-$4#*$<)$")&.1-,'&)$@&)#&?)$&'@#"0":<),#% 8*#,00<222X

n My Cart: 0 items $0.00 View Search Fonts by Type Style D"9%(:1*0(E%B&"'%(+(5-61#0+6$"/(?+/%,"F' Language Foundry A-Z List Web Fonts Font Lists Most Popular Fonts New Releases Fonts on Sale Other Fonts Resources Newsletters Articles Font Services Webtype solves the 'web-safe' fonts dilemma using premium-quality text and Custom Fonts headline fonts. ascenderfonts.com Font Licensing Eliminate the hassles and expense of using Flash, JavaScript or image replacement techniques! !"#$%&'()*+,"'-(./01&&(.,,(2013&%0& Clean, readable and will render properly Supported Browsers 4&%(5-6%('1(7189%-(:1*0(20+8; Use real fonts, not graphics Support

Webfont Service Bureaus Typekit Kernest Typotheque Ascender Fontdeck # Fonts 400+ 600+ 40+ 200+ 40+ fonts fonts families fonts families Sub-setting ✔ ✔ ✔ Local Use ✔ ✔ Bandwidth 5-500GB Unlimited 500MB 1-18GB Unlimited /month /month /month Price $25-250 $1-75 $100-900 $10-105 ~$10 /year Subscription /font/year/WS /family /font/year /font/year

CHOOSING Webfonts

Choose for voice… typography::type voice::speech “I’m going to kill you” Cooper Black “I’m going to kill you” Synchro LET “I’m going to kill you” Sybil Green “I’m going to kill you” UglyQua

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

webfont web safe core web generic h1 { font-‐family : diavlo, tahoma, arial, sans-‐serif; } web safe core web generic p { font-‐family : cambria, georgia, serif; }

Choose for consistency… Select understudy fonts with similar widths and kerning to the primary font. Diavlo Looking Glass Verdana Looking Glass Tahoma Looking Glass

Choose for consistency… Test all fonts in all combinations.

h1 { font-‐family : diavlo, tahoma, arial, sans-‐serif; } p { font-‐family : cambria, georgia, serif; } Looking Glass 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.

Choose for style… Select fonts with bold, italic, and bold/ italic versions. 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 p e r c o n u b i a n o s t r a , p e r i n c e p t o s 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.

Choose for legibility… Select fonts with consistent weight and thickness with simple, low contrast strokes and serifs. Weight & Strokes & Thickness Serifs Diavlo Looking Glass Tahoma Looking Glass

Choose for readability… Select fonts that are well balanced between letter spacing, counter width, letter width, & x-height. letter spacing letter width Tahoma Looking Glass x-height counter width

2010 The Year of Web Typography

QUESTIONS jasonspeaking.com | @jasonspeaking ﬂuidwebtype.info/sxsw

www.ﬂuidwebtype.com

http://www.workatplay.com	555
http://www.jasonspeaking.com	166
http://www.disruptiveconversations.com	109
http://fluidwebtype.info	107
http://dev.wap2011.workatplay.com	40
http://www.slideshare.net	33
http://cgt256.wordpress.com	28
http://yulanstudio.com	26
http://workatplay.com	26
http://waps2011.ronnmac	25
http://www.mahigrafix.com	18
http://www.yulanstudio.com	6
http://www.beckycortino.com	5
http://elearning-20.blogspot.com	4
http://jasonspeaking.com	4
http://blog.2edu.pl	3
http://lanyrd.com	3
http://www.gotoinstantwebinar.com	1
http://www.donatgroup.com	1
http://www.soluservi.freeiz.com	1
http://www.techgig.com	1
http://heidiallen.id.au	1
http://bbdev-1.scad.edu	1
http://translate.googleusercontent.com	1

Fluid Web Typography - SXSWi 2010

by Jason CranfordTeague

Accessibility

Categories

Upload Details

Usage Rights

24 Embeds 1,165

Statistics