Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

2010: The Year of Web Typography - WebDirections

For almost 15 years, Web designers have had a list of 10 “Core Web fonts” to choose from. Many ask, “Why can’t I just download a font file from my Web server the same way I can an image?” Well, actually, you can. The verbiage for font linking is a little different than images, but the syntax for Webfont linking has been around for over 10 years as a part of the CSS standard. Web typography expert Jason Cranford Teague shows you how to apply the principles of fluid typography, to choose, find and use Webfonts and create your unique typographic voice. Come and find out why 2010 is going to be the year of Web typography.

  • Soyez le premier à commenter

2010: The Year of Web Typography - WebDirections

  1. 1.  2010 The Year of Web Typography Jason Cranford Teague jasonspeaking.com | @jasonspeaking Web Directions USA 28 July 2010
  2. 2.  @fluidwebtype fluidwebtype.info/web-directions
  3. 3. Q: What do these 3 Things have in common?
  4. 4. Flying Cars
  5. 5. Trips to Jupiter
  6. 6. Webfonts
  7. 7. A: 2010 3 things I was supposed to have.
  8. 8. 2008
  9. 9. 2008 2009
  10. 10.  2008 2009 2010 The Year of Web Typography
  11. 11.  What's New? Webfont Support Easy font conversion Web font service bureaus
  12. 12.  Web Typography Use Find Choose
  13. 13. A A A A A A A A A A A A A A A A A A A A A A
  14. 14. “Type design is an act of plagiarism in itself — you basically recreate the flesh of the same skeleton.” Alejandro Saravia pampatype.com
  15. 15.  What if everybody looked the same… …and everybody was UGLY?
  16. 16. typography::type voice::speech
  17. 17. If I say… “I’m going to kill you”
  18. 18. “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
  19. 19. and A Brand BBrand d C Brand D Brand E and FBrand X Brand Brand X G Brand H Brand I rand J Brand K Bran d S Brand R Brand T
  20. 20.
  21. 21.
  22. 22.
  23. 23. yahoo.com
  24. 24. aol.com
  25. 25. msn.com
  26. 26. Web Typography = HTML + CSS
  27. 27. Web Typography = Limited Font Choices
  28. 28. Web Typography = UGLY!!!!!
  29. 29. 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 Poems Out Loud 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
  30. 30. 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 ΣκληρόβίντεογιατηΓάζα Acid Smile 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
  31. 31. Voices $199 Voice morphing for your iPhone! per piece Convert 99¢ per piece The unit converter & calculator plasma TapTapTap Parablox 99¢ per piece Feed your brain and test your reflexes! Classics Free
  32. 32. Workflow and collaboration. Content management solutions that don't feel templated. CONTENT MANAGEMENT SYSTEMS DRUPAL CMS ALFRESCO WCM Work At Play TOOLBOX The right tools for the job
  33. 33. Webfonts or Web fonts?
  34. 34.  USING Webfonts
  35. 35. How many fonts are there? >100 Thousand
  36. 36. How many fonts are used on the Web? 5 Fonts
  37. 37. Andale Mono Arial Arial Black Comic Sans MS Courier New Georgia Impact Times New Roman Trebuchet MS Verdana 
  38. 38. Verdana Georgia Trebuchet MS Arial Times New Roman
  39. 39. Arial Georgia Times New Roman Trebuchet MS Verdana
  40. 40. (Pre)Installed OS Software
  41. 41. Web Safe Fonts ~190 Fonts
  42. 42. Web Safe Fonts Windows & Mac = 59 Fonts
  43. 43. 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 Web Safe Fonts 2-Almost Certain 7 Apple Symbols 2-Almost Certain 8 Arial bold, italic, bold/italic 1-Certain
  44. 44. !"#$%&'()')(*#+',-*./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
  45. 45. Webfonts Any font?
  46. 46. web-safe star understudy core web generic understudy font-­‐family:  verdana,  arial,  sans-­‐serif;
  47. 47. Diavlo
  48. 48. name you give it @font-­‐face  { ...  } font-­‐family:  'body  copy'; font-­‐family:  Diavlo; src:  local(Diavlo) src:  url('fonts/Diavlo_BOOK_II_37.otf'); local name          url('fonts/Diavlo_BOOK_II_37.otf'); } font-­‐style:  normal; font properties font-­‐weight:  normal; path to font file font-­‐stretch:  normal; font-­‐variant:  normal; }
  49. 49. name you gave it font-­‐family:  tahoma,  arial,  sans-­‐serif; 'body  copy',  verdana,  arial,  sans-­‐serif; diavlo,  verdana,  arial,  sans-­‐serif;
  50. 50. File Formats True Type (.ttf) Open Type (.otf)
  51. 51. File Formats Embedded Open Type(.eot) EOT Lite (.eot)
  52. 52. File Formats Scalable Vector Graphics (.svg)
  53. 53. File Formats Web Open Font Format (.woff)
  54. 54. Browser Font Support EOT/EOT LITE ✔ TTF/OTF ✔ ✔ ✔ ✔ SVG ✔ ✔ ✔ WOFF Coming Soon! ✔ ? Coming Soon! Coming Soon!
  55. 55. SVG or WOFF ???
  56. 56. EOT for IE @font-­‐face  { font-­‐family:  'body  copy'; src:  url('fonts/Diavlo_BOOK.eot'); src:  url('fonts/Diavlo_BOOK.otf'); } src:  local('☺'), Local Name WOFF          url('fonts/Diavlo_BOOK.woff')                    format('woff'); OTF/TTF          url('fonts/Diavlo_BOOK.otf')                    format('opentype'); SVG          url('fonts/Diavlo_BOOK.svg#diavlo-­‐regular')                    format('svg'); }
  57. 57.  Sub-setting = Compression
  58. 58. EULA End User License Agreement
  59. 59. IP Intellectual Property
  60. 60. Exljbris
  61. 61. Emigre
  62. 62. Chank
  63. 63. What about sIFR & Cufón
  64. 64.  FINDING Webfonts
  65. 65. Webfonts Sources Licensed Webfonts Webfont Service Bureaus
  66. 66. Licensed Fonts Under Your Control
  67. 67. 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 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
  68. 68. 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
  69. 69. 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 – Linotype 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
  70. 70. Purchase Advantages… ➡ One Time Purchase ➡ Desktop Use ➡ Unlimited Domains ➡ Unlimited Page Views
  71. 71. What to look for in License… ✓ Webfont linking in EULA ✓Compression ✓ Formats ✓ Price Structure
  72. 72. Licensed Fonts FontSquirrel FontFont FontSpring Webfonts 560+ 100+ 1800+ fonts families families Compression ✔ Formats EOT, OTF, TTF, SVG, & WOFF EOT & WOFF EOT, TTF, SVG, & WOFF Price Free $80–860 Free–$100 family/WS font
  73. 73. Webfont Service Bureaus Easy License & Deployment
  74. 74. Typekit
  75. 75. 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 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
  76. 76. Bureau Advantages… ➡ No license worries ➡ No cross browser worries ➡ Reduces server strain ➡ Quality Fonts
  77. 77. What to look for in a bureau… ✓Available Fonts or Font Families ✓How Fonts are Added ✓Local Use ✓Bandwidth Usage ✓Price Structure
  78. 78. Webfont Service Bureaus Typekit Kernest Typotheque # Fonts 500+ 600+ 40+ families fonts families @font-face <script> <link> <link> Local Use ✔ Bandwidth 5-500GB Unlimited 500MB /month /month Price $25-250 $1-75 $100-900 /year /font/year/WS /family
  79. 79. Webfont Service Bureaus Fontdeck WebType FontsLive # Fonts 250+ 200+ 300+ families fonts fonts @font-face <link> <link> <link> Local Use ✔ ✔ Bandwidth Unlimited 1–18GB 1-18GB month /month Price free-$12 free-$105 $10-105 /year/font /month/font /font/year
  80. 80. Webfont Service Bureaus Google Font API Fonts.com WebInk # Fonts 18 7500+ 2000+ families fonts fonts @font-face <link> <script> @font-face Local Use ✔ ✔ Bandwidth Unlimited 12.5K–12.5G 1-80GB pageviews/month /month Price Free free-$500 99¢-$19.99 /month /month
  81. 81.  CHOOSING Webfonts
  82. 82. webfont web safe core web generic h1  {     font-­‐family  :  diavlo,  verdana,  arial,  sans-­‐serif;  }   web safe core web generic p  {   font-­‐family  :    cambria,  georgia,  serif;  }
  83. 83. Choose for consistency… Select understudy fonts with similar widths and kerning to the primary font. Diavlo Looking Glass Verdana Looking Glass Tahoma Looking Glass
  84. 84. Choose for style availability… 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.
  85. 85. Choose for legibility… Select fonts with consistent weight and thickness with simple, low contrast strokes and serifs. Diavlo Looking Glass Weight & Thickness Strokes & Serifs Tahoma Looking Glass
  86. 86. 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
  87. 87. Choose for optimization… Select fonts that have been specifically optimized for screen viewing.
  88. 88. Choose for consistency style availability legibility readability optimization VOICE!!!
  89. 89. “Typographic gaffes will be readily visible; but that should make it even clearer when you're looking at a smart web page or a dumb one.” Chank Diesel chank.com
  90. 90.  2010 The Year of Web Typography
  91. 91. 2011 The NEW Web Typography… Where the Sexy is!
  92. 92. Web Typography Resources ✓Fluid Web Type ✓Nice Web Type ✓Clagnut ✓I Love Typography
  93. 93.  www.fluidwebtype.info
  94. 94.
  95. 95.  QUESTIONS fluidwebtype.info/web-directions jasonspeaking.com | @jasonspeaking

    Soyez le premier à commenter

    Identifiez-vous pour voir les commentaires

  • zeroants

    Mar. 21, 2013
  • shreysethi56

    Aug. 19, 2014

For almost 15 years, Web designers have had a list of 10 “Core Web fonts” to choose from. Many ask, “Why can’t I just download a font file from my Web server the same way I can an image?” Well, actually, you can. The verbiage for font linking is a little different than images, but the syntax for Webfont linking has been around for over 10 years as a part of the CSS standard. Web typography expert Jason Cranford Teague shows you how to apply the principles of fluid typography, to choose, find and use Webfonts and create your unique typographic voice. Come and find out why 2010 is going to be the year of Web typography.


Nombre de vues

4 336

Sur Slideshare


À partir des intégrations


Nombre d'intégrations









Mentions J'aime