Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated

1,961 views

Published on

Thomas Phinney introduces web fonts, covers font selection and combination, and also includes:
• How and why mobile devices and iOS have killed off web safe fonts
• Best practices for picking and combining individual typefaces
• On-screen text rendering differences
• Creative inspiration for designing with web fonts in Adobe® Photoshop®

Published in: Design, Technology, Art & Photos
  • Be the first to comment

Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated

  1. 1. Presented by Thomas Phinney
  2. 2. Agenda1.  Web Fonts Background2.  Choosing Single Fonts3.  Combining Fonts4.  Q&A
  3. 3. Since the dawnof the internet,web designwas shackledto a fewcommon fonts:
  4. 4. Comic SansImpactArial BlackArial / Helvetica"TrebuchetVerdanaCourier/Courier NewTimes (New) RomanGeorgia!
  5. 5. Web Safe?Not any more.
  6. 6. Bad Old Days:Desktop Fonts?•  PostScript Type 1 (Win & Mac)•  Mac TrueType•  TTF (OpenType TT)•  OTF (OpenType PS)
  7. 7. Bad Old Days:Web Fonts?•  Hacks!•  TrueDoc PFR vs EOT•  sIFR (Flash)•  Cufón
  8. 8. The Revolution:CSS @ 10•  28 Aug 2007•  Håkon Wium Lie
  9. 9. The Revolution:Safari•  Feb-Mar 2008•  First browser support for TTF
  10. 10. The Revolution:EOT Opens Up•  Microsoft pubs spec•  Submitted to W3C
  11. 11. The Revolution:WOFF•  By Kew, Leming & Blokland•  First spec in 2009•  WOFF vs EOT
  12. 12. The Revolution:SVG?•  SVG: unpopular & limited
  13. 13. New WorldOrder:Real Fonts
  14. 14. [pic of 1920s car here]
  15. 15. New WorldOrder: Real Fonts•  Standards-based•  Replace hacks & stopgaps•  From web server•  Downloaded to viewer’s browser•  Same rendering as other fonts•  Regular font files (+ wrapper)
  16. 16. Real FontsAre BetterWhy?
  17. 17. Real Fontsare better
  18. 18. Real Fontsare better
  19. 19. Real Fontsare better
  20. 20. Real Fontsare better
  21. 21. Real Fontsare better
  22. 22. How Web FontsAre Used•  @font-face CSS tag•  CSS 2.0•  CSS 2.1•  CSS 3.0
  23. 23. How Web FontsAre Used@font-face CSS tag > font-family@font-face {font-family:Glurbish;src: url("http://www.myserver.com/somefont-reg.ttf");}
  24. 24. Three Benefits of“real” Web Fonts•  Choice•  Not images•  Standards / Not hacksWhat: TTF, OTF, & wrapped variants
  25. 25. •  99%+ of web surfers•  Desktop browsers for years•  Internet Explorer 4+•  Latest mobileBrowser supportfor @font-face
  26. 26. Challenges usingWeb Fonts•  Most fonts not licensed for web•  Many font formats required•  EOT•  TTF•  OTF•  (SVG)•  WOFF•  Browsers constantly changing
  27. 27. Two ways tointegrate web fonts•  Self-hosting•  Web font service
  28. 28. How web fontsare used•  @font-face CSS > font-family•  First appeared in CSS 2.0•  Disappeared in 2.1•  Reappeared in 3.0
  29. 29. How web fontsare used•  @font-face CSS > font-family@font-face {font-family:Glurbish;src: url(http://www.myserver.com/somefont-reg.ttf);}
  30. 30. Benefits ofSelf-hosting•  No outside dependencies•  Complete control•  Purchase only fonts you need•  Possibly cheaper
  31. 31. Benefits ofweb font services•  Handles browser-specific issues•  Browser changes•  Easiest way to use web fonts•  Hides complexity•  Keeps it legal•  Fonts served by cloud-basedservice•  All-you-can use font buffet
  32. 32. Hiding @font-face?•  CSS import > font-family(@font-face behind the scenes)@import url("http://fnt.webink.com/wfs/webink.css?project=7DF4B488-23AA-4486-85A3-8C32740CC8EF&fonts=1E8E113D-54A5-D738-0372-AEA99C1621A3:family=TitleFont,A69132F3-0661-6EF9-A2A8-6D43F9997F5E:family=H2Font");•  Why proprietary?
  33. 33. JavaScript?•  Extra powers!•  Fails if JavaScript turned off(7%?)
  34. 34. ChoosingFontsfor theWeb
  35. 35. 12 BestPractices1.  Selecting Single Fonts•  6 best practices2.  Combining Multiple Fonts•  6 best practices3.  Q & A
  36. 36. Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identity4.  Compatible tone/mood5.  Use legible fonts6.  Use quality fonts
  37. 37. Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identity4.  Compatible tone/mood5.  Use legible fonts6.  Use quality fonts
  38. 38. Using aFallback StackLike the old web fonts:.Body {font-family: MyriadPro, "Lucida Sans", "LucidaGrande", Verdana, Arial, sans-serif;}
  39. 39. Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identity4.  Compatible tone/mood5.  Use legible fonts6.  Use quality fonts
  40. 40. Get LegitimateLicensing•  Under licensing for webis the most commonfont lawsuit
  41. 41. Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identity4.  Compatible tone/mood5.  Use legible fonts6.  Use quality fonts
  42. 42. Match ExistingVisual Identity•  Thousands of web fonts available•  Expert advice for “closest” fonts•  Ask web font service provider•  Ask on Typophile.com•  Suitcase Fusion’s QuickMatch
  43. 43. Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identity4.  Compatible tone/mood5.  Use legible fonts6.  Use quality fonts
  44. 44. Let’s say that youare designing for ahigh-classrestaurant
  45. 45. Tone/MoodExquisite!Dining!(Helvetica)
  46. 46. Tone/MoodExquisiteDining(Helvetica Ultra Light)
  47. 47. Tone/MoodExquisiteDining(Bookman Old Style)
  48. 48. Tone/MoodExquisiteDining(Chapparal Pro Light Italic)
  49. 49. Tone/MoodExqu!ite Dining (Zapfino)
  50. 50. Tone/MoodExquisite Dining(Brush Script)
  51. 51. Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identity4.  Compatible tone/mood5.  Use legible fonts6.  Use quality fonts
  52. 52. LegibilityFactors•  Letterforms, weight, size•  Varied viewing conditions•  Does it work at that size?•  Hinting, Windows, and otherdirty secrets
  53. 53. Letterformseaoc eaoc eaoc 6890 6890 6890
  54. 54. Letterformseaoc eaoc eaoc 6890 6890 6890
  55. 55. Letterforms &Legibility v sizeUnder normal conditions,lowercase or Mixed Caseis best.At very small sizes, ALL CAPS CAN BE MORE LEGIBLE thanlowercase
  56. 56. Best Practices:Single Fonts1.  Use @font-facew/fallback stack2.  Get legitimate licensing3.  Match existing visual identity4.  Compatible tone/mood5.  Use legible fonts6.  Use quality fonts
  57. 57. Font QualityConsiderations•  Character set•  Letter shaping issues•  Overshoots•  Thick vs thin•  Optical compensation at joins•  Consistency•  Round/straight transitions•  Point placement & extrema•  Spacing & Kerning•  Hinting—mostly see “legibility”•  Examples: Josefin Sans, Smart Frocks
  58. 58. Use QualityFonts•  Not all fonts are created equal!•  Quality of design•  Not a typographer?Consider a well-curatedfont library!
  59. 59. Font Quality?Checking Tools•  FontLab Studio•  Fontographer•  TypeTool•  FontForge•  Glyphs / Glyphs Mini•  OT Master•  RoboFont
  60. 60. Trial Tools forWeb Fonts
  61. 61. Trial Tools forWeb Fonts1.  FontDropper2.  Web Font Plug-in3.  QuickMatch
  62. 62. Best Practices:Multiple Fonts1.  Fewer typefaces are better2.  Pair contrasting typeclassifications3.  Variation within/betweenfamilies4.  Use each font in distinct roles5.  Don’t contrast spirit6.  Don’t go too far!
  63. 63. Fewer arebetter•  For most sites, maximumthree typefaces (plus logo)•  More styles vs. more typefaces•  More web fonts= slower page loads•  But fonts are smallish,much like images
  64. 64. Too ManyFonts•  Example via FontDropper
  65. 65. Font Pairing:Contrast/Similarity•  Similarity of structure or spirit•  Contrast in weight and/ordetail•  Too similar is a problem•  But so is conflicting spirits or moods
  66. 66. Gill Sans Headline+ Myriad Bullets•  Body text has insufficient contrastwith titling•  Not the same typeface, buttoo similar for comfort•  Same weight/width/slope•  Both sans serif•  Title is only 25% bigger
  67. 67. Gill Sans Bold+ Myriad•  Body text is still Myriad Regular•  More weight contrast•  More size contrast
  68. 68. Gill Sans Bold+ Cochin•  Body text now Cochin, smaller •  Contrasts: weight, classification andsize •  Classic: Pair a serif with a sans
  69. 69. Summing Up
  70. 70. Best Practices:Multiple Fonts1.  Fewer typefaces are better2.  Contrasting Classifications•  Example: Serif vs Sans3.  Use variation within families•  Enhance contrast within or betweentypefaces•  Use different sizes as a differentiator4.  Use each typeface in distinct roles5.  Don’t contrast “spirit”6.  Don’t go too far!•  Extreme style contrast
  71. 71. Resources &Linkshttp://www.webink.com/type-resources@WebINK@ThomasPhinney

×