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®

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

15. New World
Order:
Real Fonts

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)

18. Real Fonts
Are Better
Why?

19. Real Fonts
are better

20. Real Fonts
are better

21. Real Fonts
are better

22. Real Fonts
are better

23. Real Fonts
are better

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%?)

36. Choosing
Fonts
for the
Web

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

47. Tone/Mood
Exquisite!
Dining!
(Helvetica)

48. Tone/Mood
Exquisite
Dining
(Helvetica Ultra Light)

49. Tone/Mood
Exquisite
Dining
(Bookman Old Style)

50. Tone/Mood
Exquisite
Dining
(Chapparal Pro Light Italic)

51. Tone/Mood
Exqu!ite Dining
(Zapfino)

52. Tone/Mood
Exquisite Dining
(Brush Script)

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

73. Resources &
Links
http://www.webink.com/type-
resources
@WebINK
@ThomasPhinney