Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
4 likes2,140 views
The document, presented by Thomas Phinney, outlines the evolution and importance of web fonts in design, emphasizing the transition from limited desktop fonts to modern, standards-based web fonts supported by CSS and various font formats. Key topics include best practices for selecting and combining fonts, legal considerations for licensing, and the benefits and challenges of using web fonts, such as self-hosting versus web font services. The presentation concludes with guidelines for effective font pairing and maintaining legibility and quality in web typography.
![[pic of 1920s car here]](https://image.slidesharecdn.com/webfonts1-choosingfonts-130603165845-phpapp01/85/Web-Safe-Fonts-are-Dead-Series-Part-1-Web-Typography-Reincarnated-16-320.jpg)
Web Safe Fonts are Dead Series | Part 1: Web Typography Reincarnated
- 1. Presented by Thomas Phinney
- 2. Agenda 1. Web Fonts Background 2. Choosing Single Fonts 3. Combining Fonts 4. Q&A
- 4. Since the dawn of the internet, web design was shackled to a few common fonts:
- 5. Comic Sans Impact Arial Black Arial / Helvetica" Trebuchet Verdana Courier/Courier New Times (New) Roman Georgia!
- 7. Web Safe? Not any more.
- 8. Bad Old Days: Desktop Fonts? • PostScript Type 1 (Win & Mac) • Mac TrueType • TTF (OpenType TT) • OTF (OpenType PS)
- 9. Bad Old Days: Web Fonts? • Hacks! • TrueDoc PFR vs EOT • sIFR (Flash) • Cufón
- 10. The Revolution: CSS @ 10 • 28 Aug 2007 • Håkon Wium Lie
- 11. The Revolution: Safari • Feb-Mar 2008 • First browser support for TTF
- 12. The Revolution: EOT Opens Up • Microsoft pubs spec • Submitted to W3C
- 13. The Revolution: WOFF • By Kew, Leming & Blokland • First spec in 2009 • WOFF vs EOT
- 14. The Revolution: SVG? • SVG: unpopular & limited
- 16. [pic of 1920s car here]
- 17. New World Order: Real Fonts • Standards-based • Replace hacks & stopgaps • From web server • Downloaded to viewer’s browser • Same rendering as other fonts • Regular font files (+ wrapper)
- 24. How Web Fonts Are Used • @font-face CSS tag • CSS 2.0 • CSS 2.1 • CSS 3.0
- 25. How Web Fonts Are Used @font-face CSS tag > font-family @font-face { font-family:Glurbish; src: url("http://www.myserver.com/ somefont-reg.ttf"); }
- 26. Three Benefits of “real” Web Fonts • Choice • Not images • Standards / Not hacks What: TTF, OTF, & wrapped variants
- 27. • 99%+ of web surfers • Desktop browsers for years • Internet Explorer 4+ • Latest mobile Browser support for @font-face
- 28. Challenges using Web Fonts • Most fonts not licensed for web • Many font formats required • EOT • TTF • OTF • (SVG) • WOFF • Browsers constantly changing
- 29. Two ways to integrate web fonts • Self-hosting • Web font service
- 30. How web fonts are used • @font-face CSS > font-family • First appeared in CSS 2.0 • Disappeared in 2.1 • Reappeared in 3.0
- 31. How web fonts are used • @font-face CSS > font-family @font-face { font-family:Glurbish; src: url(http://www.myserver.com/somefont-reg.ttf); }
- 32. Benefits of Self-hosting • No outside dependencies • Complete control • Purchase only fonts you need • Possibly cheaper
- 33. Benefits of web font services • Handles browser-specific issues • Browser changes • Easiest way to use web fonts • Hides complexity • Keeps it legal • Fonts served by cloud-based service • All-you-can use font buffet
- 34. 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=1E 8E113D-54A5-D738-0372- AEA99C1621A3:family=TitleFont,A69132F3-0661-6EF9- A2A8-6D43F9997F5E:family=H2Font"); • Why proprietary?
- 35. JavaScript? • Extra powers! • Fails if JavaScript turned off (7%?)
- 37. 12 Best Practices 1. Selecting Single Fonts • 6 best practices 2. Combining Multiple Fonts • 6 best practices 3. Q & A
- 38. Best Practices: Single Fonts 1. Use @font-face w/fallback stack 2. Get legitimate licensing 3. Match existing visual identity 4. Compatible tone/mood 5. Use legible fonts 6. Use quality fonts
- 39. Best Practices: Single Fonts 1. Use @font-face w/fallback stack 2. Get legitimate licensing 3. Match existing visual identity 4. Compatible tone/mood 5. Use legible fonts 6. Use quality fonts
- 40. Using a Fallback Stack Like the old web fonts: .Body { font-family: MyriadPro, "Lucida Sans", "Lucida Grande", Verdana, Arial, sans-serif; }
- 41. Best Practices: Single Fonts 1. Use @font-face w/fallback stack 2. Get legitimate licensing 3. Match existing visual identity 4. Compatible tone/mood 5. Use legible fonts 6. Use quality fonts
- 42. Get Legitimate Licensing • Under licensing for web is the most common font lawsuit
- 43. Best Practices: Single Fonts 1. Use @font-face w/fallback stack 2. Get legitimate licensing 3. Match existing visual identity 4. Compatible tone/mood 5. Use legible fonts 6. Use quality fonts
- 44. Match Existing Visual Identity • Thousands of web fonts available • Expert advice for “closest” fonts • Ask web font service provider • Ask on Typophile.com • Suitcase Fusion’s QuickMatch
- 45. Best Practices: Single Fonts 1. Use @font-face w/fallback stack 2. Get legitimate licensing 3. Match existing visual identity 4. Compatible tone/mood 5. Use legible fonts 6. Use quality fonts
- 46. Let’s say that you are designing for a high-class restaurant
- 50. Tone/Mood Exquisite Dining (Chapparal Pro Light Italic)
- 53. Best Practices: Single Fonts 1. Use @font-face w/fallback stack 2. Get legitimate licensing 3. Match existing visual identity 4. Compatible tone/mood 5. Use legible fonts 6. Use quality fonts
- 54. Legibility Factors • Letterforms, weight, size • Varied viewing conditions • Does it work at that size? • Hinting, Windows, and other dirty secrets
- 55. Letterforms eaoc eaoc eaoc 6890 6890 6890
- 56. Letterforms eaoc eaoc eaoc 6890 6890 6890
- 57. Letterforms & Legibility v size Under normal conditions, lowercase or Mixed Case is best. At very small sizes, ALL CAPS CAN BE MORE LEGIBLE than lowercase
- 58. Best Practices: Single Fonts 1. Use @font-face w/fallback stack 2. Get legitimate licensing 3. Match existing visual identity 4. Compatible tone/mood 5. Use legible fonts 6. Use quality fonts
- 59. Font Quality Considerations • 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
- 60. Use Quality Fonts • Not all fonts are created equal! • Quality of design • Not a typographer? Consider a well-curated font library!
- 61. Font Quality? Checking Tools • FontLab Studio • Fontographer • TypeTool • FontForge • Glyphs / Glyphs Mini • OT Master • RoboFont
- 62. Trial Tools for Web Fonts
- 63. Trial Tools for Web Fonts 1. FontDropper 2. Web Font Plug-in 3. QuickMatch
- 64. Best Practices: Multiple Fonts 1. Fewer typefaces are better 2. Pair contrasting type classifications 3. Variation within/between families 4. Use each font in distinct roles 5. Don’t contrast spirit 6. Don’t go too far!
- 65. Fewer are better • For most sites, maximum three typefaces (plus logo) • More styles vs. more typefaces • More web fonts = slower page loads • But fonts are smallish, much like images
- 66. Too Many Fonts • Example via FontDropper
- 67. Font Pairing: Contrast/Similarity • Similarity of structure or spirit • Contrast in weight and/or detail • Too similar is a problem • But so is conflicting spirits or moods
- 68. Gill Sans Headline + Myriad Bullets • Body text has insufficient contrast with titling • Not the same typeface, but too similar for comfort • Same weight/width/slope • Both sans serif • Title is only 25% bigger
- 69. Gill Sans Bold + Myriad • Body text is still Myriad Regular • More weight contrast • More size contrast
- 70. Gill Sans Bold + Cochin • Body text now Cochin, smaller • Contrasts: weight, classification and size • Classic: Pair a serif with a sans
- 71. Summing Up
- 72. Best Practices: Multiple Fonts 1. Fewer typefaces are better 2. Contrasting Classifications • Example: Serif vs Sans 3. Use variation within families • Enhance contrast within or between typefaces • Use different sizes as a differentiator 4. Use each typeface in distinct roles 5. Don’t contrast “spirit” 6. Don’t go too far! • Extreme style contrast