Fluid Web Typography - next10


Published on

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

Published in: Design, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Fluid Web Typography - next10

  1. 1. 2010 The Year of Web Typography Jason Cranford Teague fluidwebtypography.com Next10 Berlin, DE | 11 May 2010
  2. 2. What do these 3 Things have in common?
  3. 3. Flying Cars
  4. 4. Trips to Jupiter
  5. 5. Downloadable Fonts
  6. 6. 2010 3 things I was supposed to have.
  7. 7. 2008
  8. 8. 2009
  9. 9. 2010 The Year of Web Typography
  10. 10. 3 Things About Jason Cranford Teague
  11. 11. Designer Marriott
  12. 12. Author 12+ Books
  13. 13. DC Metro Cranford Teague
  14. 14. jasonspeaking.com @jasonspeaking
  15. 15. 3 Things About Web Typography
  16. 16. USE webfonts
  17. 17. FIND webfonts
  18. 18. 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
  19. 19. Why does typography matter? What is Web typography?
  20. 20. @fluidwebtype fluidwebtype.info/next
  21. 21. WHY Typography Matters
  22. 22. typography::type voice::speech
  23. 23. If I say… “I’m going to kill you”
  24. 24. “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
  25. 25. and A Brand BBrand d C Brand D Brand E and F BrandX Brand Brand X G Brand H Brand I rand J Brand K Bran d S Brand R Brand T
  26. 26. WHAT Web Typography Is
  27. 27. NT TEXT IN IMAGE
  28. 28. NT TEXT IN FLASH
  29. 29. Web Typography = HTML + CSS
  30. 30. Web Typography = Limited Font Choices
  31. 31. design is about overcoming Limitations
  32. 32. “Type design is an act of plagiarism in itself—you basically recreate the flesh of the same skeleton.” Alejandro Lo Celso Saravia pampatype.com
  33. 33. A A A A A
  34. 34. What if everybody looked the same… …and everybody was UGLY?
  35. 35. yahoo.com
  36. 36. aol.com
  37. 37. msn.com
  38. 38. Web Typography = UGLY!!!!!
  39. 39. 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 poemsoutloud.com that would become my first book, I didn’t think of it as a book, but rather 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 Facts About the Moon there suffering? Where is truth? These questions would arise in me in the 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
  40. 40. 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 ΣκληρόβίντεογιατηΓάζα acidsmile.co.uk 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 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
  41. 41. 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
  42. 42. 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
  43. 43. USING Webfonts
  44. 44. How many fonts are there? >100 Thousand
  45. 45. How many fonts are used on the Web? <5 Fonts
  46. 46. (Pre)Installed OS, Software, or Downloaded
  47. 47. Web Safe Fonts ~190 Fonts
  48. 48. Windows ~130 Fonts
  49. 49. Mac ~125 Fonts
  50. 50. Mac & Windows 59 Fonts
  51. 51. 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 Web Safe Fonts 6 Apple Chancery 2-Almost Certain 7 Apple Symbols 2-Almost Certain 8 Arial bold, italic, bold/italic 1-Certain
  52. 52. !"#$%&'()')(*#+',-*./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 Matrix of Fonts 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
  53. 53. Webfonts Any font?
  54. 54. exljbris.com
  55. 55. File Formats Embedded Open Type(.eot) EOT Lite (.eot)
  56. 56. File Formats True Type (.ttf) Open Type (.otf)
  57. 57. File Formats Scalable Vector Graphics (.SVG)
  58. 58. File Formats Web Open Font Format (.woff)
  59. 59. Browser Font Support EOT/EOT LITE ✔ TTF/OTF ✔ ✔ ✔ ✔ SVG ✔ ✔ ✔ Coming Coming Coming WOFF Soon? ✔ ? Soon! Soon!
  60. 60. EOT Lite or WOFF ???
  61. 61. EULA End User License Agreement
  62. 62. IP Intellectual Property
  63. 63. Exljbris
  64. 64. Emigre
  65. 65. Chank
  66. 66. FINDING Webfonts
  67. 67. Licensed Fonts You Control
  68. 68. What to look for… Webfont linking in EULA Compression Formats Price Structure
  69. 69. What to look for… Optimized???
  70. 70. 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 Font Squirrel 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
  71. 71. 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 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
  72. 72. Licensed Fonts FontSquirrel FontFont LinoType Webfonts 560+ 100+ 600+ fonts families families Sub-setting ✔ EOT, OTF, TTF, Formats SVG, & WOFF EOTLite & WOFF EOT Price Free $80-860 Scale family/WS font/WS
  73. 73. Webfont Service Bureaus Easy License & Deployment
  74. 74. What to look for… Compression Local Use Bandwidth Usage Price Structure
  75. 75. What to look for… Speed???
  76. 76. Limits of Webfont Services… Do not control the CSS Code Do not control font files Price often a yearly license Browser support varies
  77. 77. Typekit
  78. 78. 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. Ascender Fonts 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
  79. 79. Webfont Service Bureaus Typekit Kernest Typotheque Ascender # Fonts 800+ 600+ 40+ 200+ families fonts families fonts Sub-setting ✔ ✔ ✔ Local Use ✔ ✔ Bandwidth 5-500GB Unlimited 500MB 1-18GB /month /month /month Price $25-250 $1-75 $100-900 $10-105 /year Subscription /font/year/WS /family /font/year
  80. 80. Webfont Service Bureaus Font.com Fontdeck # Fonts 2000+ 40+ fonts families Sub-setting Local Use ✔ Bandwidth ??? Unlimited Price ??? ~$10 /year Subscription /font/year
  81. 81. CHOOSING Webfonts
  82. 82. Choose for style… Select fonts with bold, italic, and bold/ italic versions. Baskerville Cambria Lorem   ipsum   dolor   sit   amet,   consectetuer   Lorem ipsum dolor sit amet, consectetuer Old Face adipiscing elit.   Nunc   ed   ligula. ellentesque   adipiscing  elit. Nunc ssed ligula.   PPellentesque non felis   vel   lorem   tempor   ultricies.   Class   non   felis vel lorem tempor ultricies. Class aptent taciti   sociosqu   litora torquent per aptent  taciti sociosqu ad ad   litora   torquent   conubia nostra, per r a ,   p e i n c e p t o s   p e r   c o n u b i a   n o s t inceptosr   hymenaeos. Vestibulum ante ipsum primis ipsum   primis   hymenaeos.   Vestibulum   ante  in faucibus orci in   faucibus   orci   luctus   et   ultrices   posuere   luctus et ultrices posuere cubilia Curae; In hac habitasse platea In   hac   Aenean venenatis cubilia   Curae;   dictumst. habitasse   platea   dictumst.   Aenean  venenatis  hendrerit  tellus.   hendrerit tellus. Nunc posuere, nulla quis Nunc   posuere,   nulla   quis   sollicitudin   sollicitudin pretium, dui mi ultricies magna, id pretium,   dui  mi  ultricies  magna,  id  placerat   placerat lorem. lorem.
  83. 83. 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
  84. 84. 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
  85. 85. 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
  86. 86. 2010 The Year of Web Typography
  87. 87. QUESTIONS jasonspeaking.com | @jasonspeaking fluidwebtype.info/next
  88. 88. www.fluidwebtype.com