Your SlideShare is downloading. ×
Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,438

Published on

Thomas Phinney introduces web fonts, covers font selection and combination, and also includes: …

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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,438
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
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. Presented by Thomas Phinney
  • 2. Agenda1.  Web Fonts Background2.  Choosing Single Fonts3.  Combining Fonts4.  Q&A
  • 3. Since the dawnof the internet,web designwas shackledto a fewcommon fonts:
  • 4. Comic SansImpactArial BlackArial / Helvetica"TrebuchetVerdanaCourier/Courier NewTimes (New) RomanGeorgia!
  • 5. Web Safe?Not any more.
  • 6. Bad Old Days:Desktop Fonts?•  PostScript Type 1 (Win & Mac)•  Mac TrueType•  TTF (OpenType TT)•  OTF (OpenType PS)
  • 7. Bad Old Days:Web Fonts?•  Hacks!•  TrueDoc PFR vs EOT•  sIFR (Flash)•  Cufón
  • 8. The Revolution:CSS @ 10•  28 Aug 2007•  Håkon Wium Lie
  • 9. The Revolution:Safari•  Feb-Mar 2008•  First browser support for TTF
  • 10. The Revolution:EOT Opens Up•  Microsoft pubs spec•  Submitted to W3C
  • 11. The Revolution:WOFF•  By Kew, Leming & Blokland•  First spec in 2009•  WOFF vs EOT
  • 12. The Revolution:SVG?•  SVG: unpopular & limited
  • 13. New WorldOrder:Real Fonts
  • 14. [pic of 1920s car here]
  • 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. Real FontsAre BetterWhy?
  • 17. Real Fontsare better
  • 18. Real Fontsare better
  • 19. Real Fontsare better
  • 20. Real Fontsare better
  • 21. Real Fontsare better
  • 22. How Web FontsAre Used•  @font-face CSS tag•  CSS 2.0•  CSS 2.1•  CSS 3.0
  • 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. Three Benefits of“real” Web Fonts•  Choice•  Not images•  Standards / Not hacksWhat: TTF, OTF, & wrapped variants
  • 25. •  99%+ of web surfers•  Desktop browsers for years•  Internet Explorer 4+•  Latest mobileBrowser supportfor @font-face
  • 26. Challenges usingWeb Fonts•  Most fonts not licensed for web•  Many font formats required•  EOT•  TTF•  OTF•  (SVG)•  WOFF•  Browsers constantly changing
  • 27. Two ways tointegrate web fonts•  Self-hosting•  Web font service
  • 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. How web fontsare used•  @font-face CSS > font-family@font-face {font-family:Glurbish;src: url(http://www.myserver.com/somefont-reg.ttf);}
  • 30. Benefits ofSelf-hosting•  No outside dependencies•  Complete control•  Purchase only fonts you need•  Possibly cheaper
  • 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. 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. JavaScript?•  Extra powers!•  Fails if JavaScript turned off(7%?)
  • 34. ChoosingFontsfor theWeb
  • 35. 12 BestPractices1.  Selecting Single Fonts•  6 best practices2.  Combining Multiple Fonts•  6 best practices3.  Q & A
  • 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. 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. Using aFallback StackLike the old web fonts:.Body {font-family: MyriadPro, "Lucida Sans", "LucidaGrande", Verdana, Arial, sans-serif;}
  • 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. Get LegitimateLicensing•  Under licensing for webis the most commonfont lawsuit
  • 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. 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. 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. Let’s say that youare designing for ahigh-classrestaurant
  • 45. Tone/MoodExquisite!Dining!(Helvetica)
  • 46. Tone/MoodExquisiteDining(Helvetica Ultra Light)
  • 47. Tone/MoodExquisiteDining(Bookman Old Style)
  • 48. Tone/MoodExquisiteDining(Chapparal Pro Light Italic)
  • 49. Tone/MoodExqu!ite Dining (Zapfino)
  • 50. Tone/MoodExquisite Dining(Brush Script)
  • 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. LegibilityFactors•  Letterforms, weight, size•  Varied viewing conditions•  Does it work at that size?•  Hinting, Windows, and otherdirty secrets
  • 53. Letterformseaoc eaoc eaoc 6890 6890 6890
  • 54. Letterformseaoc eaoc eaoc 6890 6890 6890
  • 55. Letterforms &Legibility v sizeUnder normal conditions,lowercase or Mixed Caseis best.At very small sizes, ALL CAPS CAN BE MORE LEGIBLE thanlowercase
  • 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. 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. Use QualityFonts•  Not all fonts are created equal!•  Quality of design•  Not a typographer?Consider a well-curatedfont library!
  • 59. Font Quality?Checking Tools•  FontLab Studio•  Fontographer•  TypeTool•  FontForge•  Glyphs / Glyphs Mini•  OT Master•  RoboFont
  • 60. Trial Tools forWeb Fonts
  • 61. Trial Tools forWeb Fonts1.  FontDropper2.  Web Font Plug-in3.  QuickMatch
  • 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. 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. Too ManyFonts•  Example via FontDropper
  • 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. 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. Gill Sans Bold+ Myriad•  Body text is still Myriad Regular•  More weight contrast•  More size contrast
  • 68. Gill Sans Bold+ Cochin•  Body text now Cochin, smaller •  Contrasts: weight, classification andsize •  Classic: Pair a serif with a sans
  • 69. Summing Up
  • 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. Resources &Linkshttp://www.webink.com/type-resources@WebINK@ThomasPhinney

×