The New Web Typography

2,146 views
2,043 views

Published on

Published in: Technology, Art & Photos
1 Comment
4 Likes
Statistics
Notes
  • http://www.fontmofo.com

    Over 13000 free fonts available for download now free of charge.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,146
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
48
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

The New Web Typography

  1. 1. THENEWWEBTYPOGRAPHYWHERE THE SEXY ISJASON CRANFORD TEAGUE @jasonspeaking.com | @jasonspeakingforumone.com | @forumone edUi | 14 September 2011
  2. 2. LETS GO 
  3. 3. WHAT IS SEXY?
  4. 4. folha de s. paulo newspaper
  5. 5. WEBTYPOGRAPHY=HTML + CSS = SEXY?
  6. 6. WEBBORINGTYPOGRAPHY=HTML + CSS = SEXY?
  7. 7. SO…Whats been the problem?
  8. 8. Q1HOW MANY FONTS ARE THERE?1,500,000150,00015,0001,500
  9. 9. 150KDIGITAL FONTS
  10. 10. Q2HOW MANY FONTS ARECOMMONLY USED ON THE WEB?1811105
  11. 11. Q2HOW MANY FONTS ARECOMMONLY USED ON THE WEB?1811105
  12. 12. Q2HOW MANY FONTS ARECOMMONLY USED ON THE WEB?1811105
  13. 13. Andale Mono11 Arial Arial Black Comic Sans MS Courier New Georgia Impact f Times New Roman! Trebuchet MSCORE WEB FONTS Verdana 
  14. 14. If Fonts Were Dogs… fuckyeahdementia.com
  15. 15. Andale Mono11 Arial Arial Black Comic Sans MS Courier New Georgia Impact f Times New Roman! Trebuchet MSCORE WEB FONTS Verdana 
  16. 16. 115 Andale Mono Arial Arial Black Comic Sans MS Courier New Georgia Impact f Times New Roman! Trebuchet MSCORE WEB FONTS Verdana 
  17. 17. Verdana GeorgiaTrebuchet MS Arial Times New Roman
  18. 18. ArialGeorgiaTimes New RomanTrebuchet MSVerdana
  19. 19. A A A A A A A A A A A A A A A A A A A A A A
  20. 20. and A Brand BBrand C Brand D Brand E Brand Xand F Brand G Brand H Brand Irand J Brand K Brand S Brand R Brand T
  21. 21. typography::typevoice::speech
  22. 22. SO…Where are the fonts on the web?
  23. 23. 182!fWEB SAFE FONTSWindows & Mac Fonts
  24. 24. 66!fWEB SAFE FONTSCommon Denominator
  25. 25. Websafe Fontsß 3 I Font Name Weight and Style OS Rank Sample1 Academy Engraved LET 3-Likely2 Agency FB bold 4-Less Likely3 Algerian 4-Less Likely4 American Typewriter bold 2-Almost Certain5 Andale Mono 1-Certain6 Apple Chancery 2-Almost Certain7 Apple Symbols 2-Almost Certain8 Arial bold, italic, bold/italic 1-Certain
  26. 26. @ 2008Safari Supports TTF & OTF Formats
  27. 27. @ 2008 2009All Browsers Support Webfonts
  28. 28. @ 2008 2009 2010The Year of Web Typography
  29. 29. @ 2008 2009 20102011Web Typography is Sexy
  30. 30. 40K@WEBFONTS
  31. 31. WHERE DOWEBFONTS COMEFROM?@ @ $ @ ⎋ convert buy lease
  32. 32. @THENEWWEBTYPOGRAPHYWEBTYPEBASICS
  33. 33. LETS GO 
  34. 34. WHAT IS AWEBFONT?
  35. 35. WEBFONTor web font e space notice th
  36. 36. WEBFONTFont file downloaded from a webserver and used by the browser torender HTML text.
  37. 37. WEBFONTS Your your Your Computer font font-fileServerserver file
  38. 38. YOUR FONT web page Users Computer yourserver @font-face font-file
  39. 39. 5@WEBFONT FILE FORMATS
  40. 40. BROWSER WEBFONT EOT ✔4TTF/OTF ✔ 3.5 ✔ 3.1 ✔ 10 SVG ✔ 3.1 ✔3 ✔ 10 WOFF ✔9 ✔ 3.6 ? ✔6 ✔ 11
  41. 41. MOBILE WEBFONT EOT TTF/OTF ✔ 4.2 ✔ 2.2 ✔6 SVG ✔ 3.1 WOFF
  42. 42. WEBFONTS .eot file font-file .ttf/.otf font-file file Your yourServerserver Your Computer font-file .svg file .wo font-file file
  43. 43. BUILDING AFONTSTACKAdding a webfont
  44. 44. Star generic understudyfont-family:%gill%sans%MT,%arial,%sans-serif;
  45. 45. Websafe generic core webfont-family:%gill%sans%MT,%arial,%sans-serif;
  46. 46. /fonts myfont-webfont.eot myfont-webfont.otf myfont-webfont.svg myfont-webfont.woff
  47. 47. name you give it@font-face%{ font-family:%Diavlo; src:%url(fonts/Diavlo_BOOK_II_37.otf); }path to font file
  48. 48. name you give it@font-face%{ font-family:%body%copy; src:%url(fonts/Diavlo_BOOK_II_37.otf); }path to font file
  49. 49. name you give it ?# fixes IE@font-face%{ font-family:%body%copy; src:%url(myfont-webfont.eot); src:%url(myfont-webfont.eot?#iefix)% %%%%%%%%%%format(embedded-opentype),% % %url(myfont-webfont.woff)%format(woff),% % %url(myfont-webfont.ttf)%%format(truetype), % %url(myfont-webfont.svg#webfontFqDaNIX6)% %%%%%%%%%%format(svg); }
  50. 50. name you gave it font-family:%diavlo,%gill%sans%MT,%arial,%sans-serif;
  51. 51. name you gave it font-family:% body%copy,%gill%sans%MT,%arial,%sans-serif;
  52. 52. @font-face%{ font-family:%body%copy%bold; src:%url(myfont-bold-bold-webfont.eot);% src:%url(myfont-bold-webfont.eot?#iefix)% %%%%%%%%format(embedded-opentype),% % %url(myfont-bold-webfont.woff)%format(woff),% % %url(myfont-bold-webfont.ttf)%%format(truetype), % %url(myfont-bold-webfont.svg#webfontFqDaNIX6)% %%%%%%%%format(svg); }
  53. 53. @font-face%{ font-family:%body%copy; src:%url(myfont-bold-webfont.eot);% src:%url(myfont-bold-webfont.eot?#iefix)% %%%%%%%%format(embedded-opentype),% % %url(myfont-bold-webfont.woff)%format(woff),% % %url(myfont-bold-webfont.ttf)%%format(truetype), % %url(myfont-bold-webfont.svg#webfontFqDaNIX6)% %%%%%%%%format(svg); font-weight:%bold; font-style:%normal; }
  54. 54. @font-face%{ font-family:%body%copy; src:%url(myfont-webfont.eot);% src:%url(myfont-webfont.eot?#iefix)% %%%%%%%%format(embedded-opentype),% % %url(myfont-webfont.woff)%format(woff),% % %url(myfont-webfont.ttf)%%format(truetype), font-weight:%bold; font-style:%normal; }
  55. 55. @font%face,{ font%family:,body,copy; src:,url(myfont%webfont.eot);, src:,url(myfont%webfont.eot?#iefix), ,,,,,,,,format(embedded%opentype),, , ,url(myfont%webfont.woff),format(woff),, , ,url(myfont%webfont.ttf),,format(truetype), font%weight:,normal; font%style:,normal; }@font%face,{ font%family:,body,copy; src:,url(myfont%bold%webfont.eot);, src:,url(myfont%bold%webfont.eot?#iefix), ,,,,,,,,format(embedded%opentype),, , ,url(myfont%bold%webfont.woff),format(woff),, , ,url(myfont%bold%webfont.ttf),,format(truetype), font%weight:,bold; font%style:,normal; }@font%face,{ font%family:,body,copy; src:,url(myfont%italic%webfont.eot);, src:,url(myfont%italic%webfont.eot?#iefix), ,,,,,,,,format(embedded%opentype),, , ,url(myfont%italic%webfont.woff),format(woff),, , ,url(myfont%italic%webfont.ttf),,format(truetype), font%weight:,normal; font%style:,italic; }
  56. 56. WHERE DO I FINDWEBFONTS?
  57. 57. CONVERT, BUY ORLEASE?
  58. 58. CONVERT, BUY ORLEASE?conversion — YOUR FONTretailers — YOUR FONTweb font service bureaus — THEIR FONT
  59. 59. YOUR FONT web page Users Computer yourserver @font-face font-file
  60. 60. THEIR FONT web your pageserver Users Computer @font-face, <link> JavaScriptWFSBserver font-file
  61. 61. CONVERT? @➡Any Font➡You control quality➡You control the code➡Sub-setting
  62. 62. EULAEnd User License Agreement
  63. 63. IPIntellectual Property
  64. 64. LOOKING FOR… @➡ EULA? Are you breaking the law?➡Server load?➡Screen Quality?
  65. 65. BUY? @ $✓ One Time Price✓ Desktop Use✓ Unlimited Domains✓ Unlimited Page Views✓ Many are free
  66. 66. LOOKING FOR… @ $✓ Webfont linking in EULA✓Compression✓ Formats✓ Price Structure
  67. 67. RETAILERS @ $RETAILER FontSquirrell FontSpring MyFonts Kernest FontShopWebfonts 660 1800+ 100+ 37,296 2543 families families families fonts famalies Subset ✔ ✔ ✔ eot, otf, ttf, svg & Formats woff eot, ttf, svg & woff eot & woff eot, ttf, svg & woff eot, ttf, svg & woff Price Free $80-860 Free-$100 $10-$160 free–$15 /ws /ws /font /font URL fontsquirrell.com fontspring.com fontshop.com myfonts.com kernest.com
  68. 68. LEASE? @ ⎋➡ No license worries➡ No cross browser worries➡ Reduces server strain➡ Quality Fonts
  69. 69. LOOKING FOR… @ ⎋✓Available Fonts or Font Families✓How Fonts are Added✓Local Use✓Bandwidth Usage✓Price Structure
  70. 70. @WEBFONT SERVICE BUREAUS ⎋ WFSB Google Web Fonts fonts.com WebInk FontDeck WebType Webfonts 150+ 10,000+ 2283 735 580+ families fonts fonts families families <js> or Embed <link> @font-face <link> <link> @font-face Local ✔ ✔ ✔ Subset ✔ ✔ ✔ ✔ Bandwidth Unlimited 25K–12.5M 1–80GB 1M 250K–2.5M pageviews/month month pageviews/month pageviews/month Billing Free Free–$500 99¢–$59.99 $2.50–19.99 $40–400 unlimited/month 4ws/month font/year font/yeat URL google.com/webfonts webfonts.fonts.com webink.com fontdeck.com webtype.com
  71. 71. @WEBFONT SERVICE BUREAUS ⎋ WFSB FontsLive Typekit Kernest Typotheque Typonine Webfonts 499 4000 2503 40 20 fonts fonts fonts families families <js> or <link> or Embed <js> <link> <link> @font-face @font-face Local ✔ ✔ ✔ ✔ Subset ✔ ✔ ✔ ✔ Bandwidth 250K–12.5M 25K–1M Unlimited Unlimited 500MB pageviews/month pageviews/month /month free Billing $40–$2,000 Free–$99.99 Free–$15 $100–900 €2 unlimited/year /year /font/year/ws /family additional GB/month URL fontslive.com typekit.com kernest.com typotheque.com typonine.com
  72. 72. HOW DO I CHOOSEWEBFONTS?
  73. 73. choose for REPERTOIRE…
  74. 74. choose for STYLES…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&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.
  75. 75. choose for STYLES…BaskervilleOld Face 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.
  76. 76. choose for OPTIMIZATION…
  77. 77. choose for COMPATIBILITY…
  78. 78. choose for LEGIBILITY… Diavlo Looking Glass Weight & Thickness Strokes & Serifs Tahoma Looking Glass
  79. 79. choose for LEGIBILITY…Slab Serif
  80. 80. choose for READABILITY… letter spacing letter width Tahoma Looking Glass x-height counter width
  81. 81. choose for REPERTOIRE STYLES OPTIMIZATION COMPATIBILITY LEGIBILITY READIBLITY
  82. 82. VOICE!!!
  83. 83. typography::typevoice::speech
  84. 84. A A A A A A A A A A A A A A A A A A A A A A
  85. 85. and A Brand BBrand C Brand D Brand E Brand Xand F Brand G Brand H Brand Irand J Brand K Brand S Brand R Brand T
  86. 86. IF I SAY…“I’m going to kill you”
  87. 87. “I’m going to kill you” Suave = Cooper Black“I’m going to kill you” Robotic = Synchro LET“I’m going to kill you” Insane = Sybil Green “I’m going to kill you” Pirate = UglyQua
  88. 88. HOW DO I MAKE WEBTYPOGRAPHY SEXY?
  89. 89. use CONTRAST…High Color Contrast
  90. 90. use CONTRAST…Low Color Contrast
  91. 91. use CONTRAST…Mixed Color Contrast
  92. 92. use CONTRAST… Stylecontrast
  93. 93. use CONTRAST… widthContrast
  94. 94. use CONTRAST… TypefaceContrast
  95. 95. use CONTRAST… multiContrast
  96. 96. use SPACE… Looking-Glass house One thing was certain, that the white kitten had had nothing to do with it:--it was the black kittens fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it couldnt have had any hand in the mischief.
  97. 97. use SPACE Looking-Glass house One thing was certain, that the white kitten had had nothing to do with it:--it was the black kittens fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it couldnt have had any
  98. 98. use SCALE… LARGE small
  99. 99. use TEXTURE… Drop Shadow
  100. 100. use TEXTURE…Emboss or Bevel
  101. 101. use CONSISTENT VARIATION…
  102. 102. MAKE IT SEXY…
  103. 103. forumone.com
  104. 104. fluidwebtype.info
  105. 105. THENEWWEBTYPOGRAPHY QUESTIONS @ jasonspeaking.com | me@jasonspeaking.com | @jasonspeaking
  106. 106. THANKS!www.jasonspeaking.comme@jasonspeaking.com@jasonspeaking

×