Fluid Web Typography - next10

  • 3,256 views
Uploaded on

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

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

More in: Design , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,256
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
123
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 2010 The Year of Web Typography Jason Cranford Teague fluidwebtypography.com Next10 Berlin, DE | 11 May 2010
  • 2. What do these 3 Things have in common?
  • 3. Flying Cars
  • 4. Trips to Jupiter
  • 5. Downloadable Fonts
  • 6. 2010 3 things I was supposed to have.
  • 7. 2008
  • 8. 2009
  • 9. 2010 The Year of Web Typography
  • 10. 3 Things About Jason Cranford Teague
  • 11. Designer Marriott
  • 12. Author 12+ Books
  • 13. DC Metro Cranford Teague
  • 14. jasonspeaking.com @jasonspeaking
  • 15. 3 Things About Web Typography
  • 16. USE webfonts
  • 17. FIND webfonts
  • 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. Why does typography matter? What is Web typography?
  • 20. @fluidwebtype fluidwebtype.info/next
  • 21. WHY Typography Matters
  • 22. typography::type voice::speech
  • 23. If I say… “I’m going to kill you”
  • 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. 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. WHAT Web Typography Is
  • 27. NT TEXT IN IMAGE
  • 28. NT TEXT IN FLASH
  • 29. Web Typography = HTML + CSS
  • 30. Web Typography = Limited Font Choices
  • 31. design is about overcoming Limitations
  • 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. A A A A A
  • 34. What if everybody looked the same… …and everybody was UGLY?
  • 35. yahoo.com
  • 36. aol.com
  • 37. msn.com
  • 38. Web Typography = UGLY!!!!!
  • 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. 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. 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. 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. USING Webfonts
  • 44. How many fonts are there? >100 Thousand
  • 45. How many fonts are used on the Web? <5 Fonts
  • 46. (Pre)Installed OS, Software, or Downloaded
  • 47. Web Safe Fonts ~190 Fonts
  • 48. Windows ~130 Fonts
  • 49. Mac ~125 Fonts
  • 50. Mac & Windows 59 Fonts
  • 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. !"#$%&'()')(*#+',-*./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. Webfonts Any font?
  • 54. exljbris.com
  • 55. File Formats Embedded Open Type(.eot) EOT Lite (.eot)
  • 56. File Formats True Type (.ttf) Open Type (.otf)
  • 57. File Formats Scalable Vector Graphics (.SVG)
  • 58. File Formats Web Open Font Format (.woff)
  • 59. Browser Font Support EOT/EOT LITE ✔ TTF/OTF ✔ ✔ ✔ ✔ SVG ✔ ✔ ✔ Coming Coming Coming WOFF Soon? ✔ ? Soon! Soon!
  • 60. EOT Lite or WOFF ???
  • 61. EULA End User License Agreement
  • 62. IP Intellectual Property
  • 63. Exljbris
  • 64. Emigre
  • 65. Chank
  • 66. FINDING Webfonts
  • 67. Licensed Fonts You Control
  • 68. What to look for… Webfont linking in EULA Compression Formats Price Structure
  • 69. What to look for… Optimized???
  • 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. 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. 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. Webfont Service Bureaus Easy License & Deployment
  • 74. What to look for… Compression Local Use Bandwidth Usage Price Structure
  • 75. What to look for… Speed???
  • 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. Typekit
  • 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. 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. Webfont Service Bureaus Font.com Fontdeck # Fonts 2000+ 40+ fonts families Sub-setting Local Use ✔ Bandwidth ??? Unlimited Price ??? ~$10 /year Subscription /font/year
  • 81. CHOOSING Webfonts
  • 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. 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. 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. 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. 2010 The Year of Web Typography
  • 87. QUESTIONS jasonspeaking.com | @jasonspeaking fluidwebtype.info/next
  • 88. www.fluidwebtype.com