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®
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
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
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
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
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
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
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
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
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