Fluid Web Typography - SXSWi 2010

  • Page: 125 |
  • File: PDF |
  • View: 53 |
  • Download: 0
J
Jason CranfordTeague

Join date: 19/07/2018

Fluid Web Typography - SXSWi 2010

Infomation Document:

Post Date: 19/07/2018, 03:45
File Size: 20.37 MB
?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. 2008 2009 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 <script type="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 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 <link   href="http://kernest.com/www-speaking-in-styles-com.css"   media="screen"  rel="stylesheet"  type="text/css"  /> 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 <link  rel="stylesheet"   href="http://wf.typotheque.com/WF-­?011405-­?000505"   type="text/css"  /> 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 <link  rel="stylesheet"   href="http://f.fontdeck.com/s/css/ngV3OuKdakbpyw/ www.jasonspeaking.com/130.css"   type="text/css"  /> 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
- Show More -