This document summarizes a workshop on web typography presented by Jim Kidwell and Thomas Phinney. It begins with biographies of the presenters and an agenda for the workshop. The first section provides a history of web fonts, starting with the limited "web safe" fonts of the early internet and the introduction of technologies like @font-face, EOT, and WOFF that enabled the use of true type fonts on the web. Subsequent sections discuss best practices for choosing, setting, and using web fonts, including topics like font licensing, legibility, pairing different fonts, and CSS features. The document provides an overview of the workshop's content and discussions.

1. Jim Kidwell & Thomas Phinney
Web
Typography
Workshop

2. About Us
Jim Kidwell
• 10+ years at Extensis
• Author, speaker
• Font nerd
Thomas Phinney
• Extensis, Adobe, indie
• Author, speaker, type design
• Font geek since 1995

3. About You?
• Name
• @font-face knowledge?
• Used web fonts on site(s)?
• Print background?
• Web designers?
• Web developers?
• Front end? Back end?

4. Agenda
1. Introduction & History
2. Choosing Fonts
3. Setting Type
4. CSS3 & OpenType Features
5. Try Sample Sites
6. Q&A

5. Agenda
1. Introduction & History
2. Choosing Fonts
3. Setting Type
4. CSS3 & OpenType Features
5. Try Sample Sites
6. Q&A

6. Introduction
& History

7. At the dawn of the
internet, web design
was shackled to a
few common fonts:

8. Comic Sans
Impact
Arial Black
Arial / Helvetica"
Trebuchet
Verdana
Courier/Courier New
Times (New) Roman
Georgia!

9. Comic Sans
Impact
Arial Black
Arial / Helvetica"
Trebuchet
Verdana
Courier/Courier New
Times (New) Roman
Georgia!

10. Comic Sans
Impact
Arial Black
Arial / Helvetica"
Trebuchet
Verdana
Courier/Courier New
Times (New) Roman
Georgia!

12. Web Safe?

13. Web Safe?
Not any more.

14. Bad Old Days:
Desktop Fonts?
• PostScript Type 1 (Win & Mac)
• Mac TrueType
• TTF (OpenType TT)
• OTF (OpenType PS)

15. Bad Old Days:
Web Fonts?
• Hacks!
• TrueDoc PFR vs EOT
• sIFR
• Cufón

16. The Revolution:
CSS @ 10
• 28 Aug 2007
• Håkon Wium Lie

17. The Revolution:
Safari
• Feb-Mar 2008
• First browser support for TTF

18. The Revolution:
EOT Opens Up
• Microsoft pubs spec
• Submitted to W3C

19. The Revolution:
WOFF
• By Kew, Leming & Blokland
• Developed 2009-2011
• WOFF vs EOT

20. The Revolution:
SVG?
• SVG: unpopular & limited

21. New World
Order:
Real Fonts

22. [pic of 1920s car here]

23. New World
Order: Real Fonts
• Standards-based
• Replaces various hacks &
stopgaps
• From web server
• Downloaded to viewer’s browser
• Same rendering as other fonts
• Regular font files (+ wrapper)

24. Real Fonts
Are Better

25. Real Fonts
Are Better
Why?

26. Real Fonts
are better

27. Real Fonts
are better

28. Real Fonts
are better

29. Real Fonts
are better

30. Real Fonts
are better

31. How Web Fonts
Are Used
• @font-face CSS tag
• CSS 2.0
• CSS 2.1
• CSS 3.0

32. 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");
}

33. Three Benefits of
“real” Web Fonts
• Choice
• Not images
• Standards / Not hacks
• TTF, OTF, and wrapped variants

34. • 99%+ of web surfers
• Desktop for last few years
• Internet Explorer 4+
• Latest mobile
Browser support
for @font-face

35. Challenges using
Web Fonts
• Fonts not licensed for web
• Many font formats required
• EOT
• TTF
• OTF
• (SVG)
• WOFF
• Browsers constantly changing

36. Two ways to
integrate web fonts
• Self-hosting
• Web font service

37. How web fonts
are used
• @font-face CSS > font-family
• First appeared in CSS 2.0
• Disappeared in 2.1
• Reappeared in 3.0

38. How web fonts
are used
• @font-face CSS > font-family
@font-face {
font-family:Glurbish;
src: url(http://www.myserver.com/somefont-reg.ttf);
}

39. Benefits of
Self-hosting
• No outside dependencies
• Complete control
• Purchase only fonts you need
• Possibly cheaper

40. 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

41. 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?

42. JavaScript?
• Extra powers!
• Fails if JavaScript off (7%?)

43. Agenda
1. Introduction & History
2. Choosing Fonts
3. Setting Type
4. CSS3 & OpenType Features
5. Try Sample Sites
6. Q&A

44. Agenda
1. Introduction & History
2. Choosing Fonts
3. Setting Type
4. CSS3 & OpenType Features
5. Try Sample Sites
6. Q&A

45. Choosing
Fonts
for the
Web

46. 12 Best
Practices
Selecting Single Fonts
• 6 best practices
Combining Multiple Fonts
• 6 best practices

47. 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

48. 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

49. Using a Fallback
Stack
Same as with old web-safe
fonts:
.Body {
font-family: MyriadPro, "Lucida Sans", "Lucida
Grande", Verdana, Arial, sans-serif;
}

50. 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

51. Get Legitimate
Licensing
• Under-licensing for web now
most common font lawsuit

52. 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

53. Matching Existing
Visual Identity
• Thousands of fonts are available
as web fonts
• Expert advice for “closest” fonts
• Ask your web font service
provider
• Ask on Typophile.com
• Suitcase Fusion’s QuickMatch

54. 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

55. Let’s say that you
are designing for a
high-class
restaurant

56. Tone/Mood
Exquisite!
Dining!
Helvetica Bold

57. Tone/Mood
Exquisite
Dining
Helvetica Ultra Light

58. Tone/Mood
Exquisite
Dining
Bookman Old Style Bold

59. Tone/Mood
Exquisite
Dining
Chapparal Pro Light Italic

60. Tone/Mood
Exqu!ite Dining
Zapfino

61. Tone/Mood
Exquisite Dining
Brush Script

62. 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

63. Legibility
Factors
• Letterforms, weight, size
• Varied viewing conditions
• Does it work at that size?
• Hinting, Windows, and other
dirty secrets

64. Letterforms
eaoc eaoc eaoc
6890 6890 6890

65. Letterforms
eaoc eaoc eaoc
6890 6890 6890

66. Letterforms &
Legibility vs size
Under normal conditions,
lowercase or Mixed Case
is best.
At very small sizes, ALL CAPS CAN BE MORE LEGIBLE than
lowercase

67. 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

68. 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

69. Font Quality?
Checking/Editing
• FontLab Studio
• Fontographer
• TypeTool
• FontForge
• Glyphs / Glyphs Mini
• OT Master
• RoboFont

70. Use Quality
Fonts
• Not all fonts are created equal!
• Quality of design
• Not a typographer?
Consider a well-curated
font library!

71. 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

72. Tools for
Trying Web
Fonts

73. Tools for
Trying Web
Fonts
1. FontDropper
2. Web Font Plug-in
3. QuickMatch

74. 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!

75. 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

76. Too Many Fonts
• Example via FontDropper

77. 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

78. Gill Sans MT Headline +
Lucida Grande Body
• 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

79. Gill Sans Bold
Headline
• Body text is unchanged, but
still problematic
• More weight contrast
• More size difference
• Style still too similar

80. Gill Sans Bold
Headline
• Body text now Cochin, smaller
• Contrasts: weight, classification
and size
• Classic: Pair a serif with a sans

81. Summing Up

82. 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

83. Resources &
Links
• Go to this URL:
http://www.webink.com/
type-resources
• Includes link to
recordings of previous
webcasts!

84. Agenda
1. Introduction & History
2. Choosing Fonts
3. Setting Type
4. CSS3 & OpenType Features
5. Try Sample Sites
6. Q&A

85. Setting Type

86. 15 things
• 10 web typesetting best
practices
• 5 ways web type is not print

87. Web Typesetting
Best Practices
1. Effective Visual Hierarchy
2. Use Hyphenation /
Reconsider Justification
3. Limit & Control Line Length
4. More Line Spacing
5. Standard Paragraph Separation
6. Bigger Body Text
7. Keep Contrast
8. Care with All Caps
9. Underlining is for Amateurs
10. Activate Kerning & Ligatures
11. Bonus: Use Abstraction Layer

88. Web Typesetting
Best Practices
1. Effective Visual Hierarchy
2. Use Hyphenation /
Reconsider Justification
3. Limit & Control Line Length
4. More Line Spacing
5. Standard Paragraph Separation
6. Bigger Body Text
7. Keep Contrast
8. Care with All Caps
9. Underlining is for Amateurs
10. Activate Kerning & Ligatures
11. Bonus: Use Abstraction Layer

89. Effective Visual
Hierarchy
General
• http://webdesign.tutsplus.com/
articles/design-theory/
understanding-visual-hierarchy-
in-web-design/
Example site:
http://net.tutsplus.com/

90. Effective Visual
Hierarchy: Size
• More sizes = more clutter
• Use fewer levels of headings
• One or at most two, plus body
size, for most projects

91. Effective Visual
Hierarchy: Size
• More sizes = more clutter
• Use fewer levels of headings
• One or at most two, plus body
size, for most projects
• Consider Golden Ratio scale
• Each level ~1.6 x the size below it

92. Effective Visual
Hierarchy: Type
6 ways to distinguish/emphasize type

93. Effective Visual
Hierarchy: Type
6 ways to distinguish/emphasize type
• Size change

94. Effective Visual
Hierarchy: Type
6 ways to distinguish/emphasize type
• Same techniques as other elements
• Location, proximity, background, etc.

95. Effective Visual
Hierarchy: Type
6 ways to distinguish/emphasize type
• Weight & Width
extralight, light, regular, semibold bold,
black, condensed, semi-condensed,
regular, semi-extended, etc.

96. Effective Visual
Hierarchy: Type
6 ways to distinguish/emphasize type
• Italics

97. Effective Visual
Hierarchy: Type
6 ways to distinguish/emphasize type
• Color change

98. Effective Visual
Hierarchy: Type
6 ways to distinguish/emphasize type
• Different typeface altogether

99. Effective Visual
Hierarchy: Type
6 ways to distinguish/emphasize type
• Same techniques as other elements
• Location, proximity, background, etc.
• Size change
• Weight & Width
extralight, light, regular, semibold bold, black,
condensed, semi-condensed, regular, semi-
extended, etc.
• Italics
• Color change
• Different typeface altogether

100. Effective Visual
Hierarchy
Minimalism
• Restrict # Roles like # Sizes, but a
few more

101. Web Typesetting
Best Practices
1. Effective Visual Hierarchy
2. Use Hyphenation /
Reconsider Justification
3. Limit & Control Line Length
4. More Line Spacing
5. Standard Paragraph Separation
6. Bigger Body Text
7. Keep Contrast
8. Care with All Caps
9. Underlining is for Amateurs
10. Activate Kerning & Ligatures
11. Bonus: Use Abstraction Layer

102. Use Hyphenation
“Pretty much the only forms of
Western literature that don’t use
hyphenation are children’s books
and websites. Until now.”
— Richard Rutter

103. Hyphenation:
Why?
More even spacing w/justified
text (reduce/eliminate “rivers”)

104. Hyphenation:
Why?
• Even for non-justified
(“ragged”) text: more even
“rag” edge
• Tradition

105. Hyphenation:
some examples

106. Hyphenation:
How?
• CSS 3
• hyphens: auto
• -moz-hyphens: auto; (FF 6+)
• -webkit-hyphens: auto; (Safari 5.1+)
• -ms-hyphens: auto; (IE 10+)
• CSS3 has even more controls…

107. Reconsider
Justification
• Standard: “Full justification”
• Consider “Ragged right”
• Better default choice
• Interactions with line length
• Previous example

108. Web Typesetting
Best Practices
1. Effective Visual Hierarchy
2. Use Hyphenation /
Reconsider Justification
3. Limit & Control Line Length
4. More Line Spacing
5. Standard Paragraph Separation
6. Bigger Body Text
7. Keep Contrast
8. Care with All Caps
9. Underlining is for Amateurs
10. Activate Kerning & Ligatures
11. Bonus: Use Abstraction Layer

109. Limit & Control
Line Length
• Impacts reading comfort
• Aim for 55–75 characters/line
• Type size ×30 is a good start
• width: 30em;
• Or, use max
• max-width: 30em;

110. Line length
research?
• Shaikh & Chaparro (2004)
• 35, 55, 75, 95 cpl
• 35–75 similar speed
• 95 cpl = +6% speed

111. Line length
research?
• Shaikh & Chaparro (2004)
• 35, 55, 75, 95 cpl
• 35–75 similar speed
• 95 cpl = +6% speed
• 60% pref 35 or 95
• least fave? 45%=35, 55%=95

112. Web Typesetting
Best Practices
1. Effective Visual Hierarchy
2. Use Hyphenation /
Reconsider Justification
3. Limit & Control Line Length
4. More Line Spacing
5. Standard Paragraph Separation
6. Bigger Body Text
7. Keep Contrast
8. Care with All Caps
9. Underlining is for Amateurs
10. Activate Kerning & Ligatures
11. Bonus: Use Abstraction Layer

113. More Line
Spacing
• CSS “line-height”
a.k.a “Leading”

114. More Line
Spacing
• CSS “line-height”
a.k.a “Leading”
• Large x-height >
more line spacing

115. More Line
Spacing
• CSS “line-height”
a.k.a “Leading”
• Large x-height >
more line spacing
• Longer lines >
more line spacing

116. More On
Line Spacing:
http://www.w3schools.com/
cssref/playit.asp?
filename=playcss_line-height

117. More Line
Spacing
• “Normal” (default) ≠ 100%!
• Includes ~20% extra space
• Varies depending on font vertical
metrics
• Consider 140–170%
line-spacing

118. Web Typesetting
Best Practices
1. Effective Visual Hierarchy
2. Use Hyphenation /
Reconsider Justification
3. Limit & Control Line Length
4. More Line Spacing
5. Standard Paragraph Separation
6. Bigger Body Text
7. Keep Contrast
8. Care with All Caps
9. Underlining is for Amateurs
10. Activate Kerning & Ligatures
11. Bonus: Use Abstraction Layer

119. Standard Paragraph
Separation
• Full line space is default

120. Standard Paragraph
Separation
• Full line space is default
• When first line indent?
• When both?
• When eliminate?

121. Standard Paragraph
Separation
• Full line space is default
• When first line indent?
• When both?
• When eliminate?
• When indent entire block?

122. Web Typesetting
Best Practices
1. Effective Visual Hierarchy
2. Use Hyphenation /
Reconsider Justification
3. Limit & Control Line Length
4. More Line Spacing
5. Standard Paragraph Separation
6. Bigger Body Text
7. Keep Contrast
8. Care with All Caps
9. Underlining is for Amateurs
10. Activate Kerning & Ligatures
11. Bonus: Use Abstraction Layer

123. Bigger Body
Text
• Legible ≠ Comfortable!

124. Bigger Body
Text
• Legible ≠ Comfortable!
• Most web text unnecessarily
small
• Average 9–12 px
• Suggested default: 14–16 px
• Ideal size varies by font

125. Bigger Body
Text
• Legible ≠ Comfortable!
• Most web text unnecessarily
small
• Average 9–12 px
• Suggested default: 14–16 px
• Ideal size varies by font
• Different x-height

126. Bigger Body
Text
• Legible ≠ Comfortable!
• Most web text unnecessarily
small
• Average 9–12 px
• Suggested default: 14–16 px
• Ideal size varies by font
• Different x-height
• Different minimum legible
(example)

127. Web Typesetting
Best Practices
1. Effective Visual Hierarchy
2. Use Hyphenation /
Reconsider Justification
3. Limit & Control Line Length
4. More Line Spacing
5. Standard Paragraph Separation
6. Bigger Body Text
7. Keep Contrast
8. Care with All Caps
9. Underlining is for Amateurs
10. Activate Kerning & Ligatures
11. Bonus: Use Abstraction Layer

128. Keep Contrast
What do I mean by contrast?

129. [EXAMPLE SLIDE]
Ed Smith Nahhe Nomie Osamu Ikeda Amanda Paull
Mike Marsden
Nathalie
Dumont
Romeo Fahl Jeff Williams
Davin Kluttz Jeremy Bowers Jim Kidwell Marisela Alzuhn
Chris Tew Jim O’Connor Chad Slater Bill Schwanitz
Chris Meyer Richard Bamford Carli Edvalson Don Johnson
Nic Marson John Stalnaker Chris Stevens Renee Schlacter
Andy Nelsen Bernardine Lim Mark Murphy Jonah Perez
Erica Stupfel Clint Daeuble Junko Suzuki Richard Fattic

130. Keep Contrast
• Background color vs.
text color
• Looking good vs.
being readable?

131. Keep Contrast
• Background color vs.
text color
• Looking good vs.
being readable?
• Legible vs. comfortable

132. Keep Contrast
• Background color vs.
text color
• Looking good vs.
being readable?
• Legible vs. comfortable
• Viewing conditions vary

133. Keep Contrast
• Background color vs.
text color
• Looking good vs.
being readable?
• Legible vs. comfortable
• Viewing conditions vary
• User cannot easily override!

134. Web Typesetting
Best Practices
1. Effective Visual Hierarchy
2. Use Hyphenation /
Reconsider Justification
3. Limit & Control Line Length
4. More Line Spacing
5. Standard Paragraph Separation
6. Bigger Body Text
7. Keep Contrast
8. Care with All Caps
9. Underlining is for Amateurs
10. Activate Kerning & Ligatures
11. Bonus: Use Abstraction Layer

135. CARE WITH
ALL CAPS
• Bigger than lowercase
• Good for very small sizes & poor
conditions

136. CARE WITH
ALL CAPS
Bigger than lowercase
• Good for very small sizes & poor
conditions
Caps decrease shape differences
• Bad for distinguishing letters and
extended reading

137. CARE WITH
ALL CAPS
Bigger than lowercase
Caps decrease shape differences
Use carefully, in moderation!

138. CAPS FINE IN
HEADING
BUT ALL CAPS ARE TOO MUCH
IN A FULL SENTENCE LIKE
THIS.
• CAPS HELP THIS TINY TEXT
• NAV ELEMENTS?

139. Some typefaces
suck in caps
`ÉáàÄç fvÜ|Ñà YÉÇàá
fVecg Ybagf

140. Web Typesetting
Best Practices
1. Effective Visual Hierarchy
2. Use Hyphenation /
Reconsider Justification
3. Limit & Control Line Length
4. More Line Spacing
5. Standard Paragraph Separation
6. Bigger Body Text
7. Keep Contrast
8. Care with All Caps
9. Underlining is for Amateurs
10. Activate Kerning & Ligatures
11. Bonus: Use Abstraction Layer

141. Underlining is
for amateurs
Except: acceptable for URLs
• But consider color instead!

142. Underlining is
for amateurs
Acceptable for URLs
• But consider color instead!
Just plain icky for everything else
• Use italics or bold for emphasis
• Make sure your body typeface has
real italics/bold!
• Book titles should be in italics

143. Web Typesetting
Best Practices
1. Effective Visual Hierarchy
2. Use Hyphenation /
Reconsider Justification
3. Limit & Control Line Length
4. More Line Spacing
5. Standard Paragraph Separation
6. Bigger Body Text
7. Keep Contrast
8. Care with All Caps
9. Underlining is for Amateurs
10. Activate Kerning & Ligatures
11. Bonus: Use Abstraction Layer

144. Kerning
• Spacing adjustment between
specific letter pairs
• Info built into font

145. Kerning
Toe WAVERY
with kerning
Toe WAVERY
without kerning

146. Kerning
Toe WAVERY
with kerning
Toe WAVERY
without kerning

147. Ligatures

148. Ligatures
The official files often fly in.…"
The official files often fly in.…

149. Ligatures
The official files often fly in.…"
The official files often fly in.…
Glyphs that link together!
Ffi fi fl ft

150. Kerning &
Ligatures
text-rendering:
optimizeLegibility
• Turns on kerning and ligatures
• Supported in Firefox 4+

151. Enable kerning
& ligatures
body {
-moz-font-feature-settings:"liga", "kern";
-moz-font-feature-settings:"liga=1, kern=1";
-ms-font-feature-settings:"liga", "kern";
-o-font-feature-settings:"liga", "kern";
-webkit-font-feature-settings:"liga", "kern";
font-feature-settings:"liga", "kern";
text-rendering:optimizeLegibility;
}

152. Web Typesetting
Best Practices
1. Effective Visual Hierarchy
2. Use Hyphenation /
Reconsider Justification
3. Limit & Control Line Length
4. More Line Spacing
5. Standard Paragraph Separation
6. Bigger Body Text
7. Keep Contrast
8. Care with All Caps
9. Underlining is for Amateurs
10. Activate Kerning & Ligatures
11. Bonus: Use Abstraction Layer

153. Use Abstraction
Layer
example

154. 15 things
• 10 web typesetting
best practices
• 5 ways web type is not print

155. 5 Ways Web
is not Print
• Layout is fluid

156. 5 Ways Web
is not Print
• Layout is fluid
• Color is free (and overused)
• Both text and background colors

157. 5 Ways Web
is not Print
• Layout is fluid
• Color is free (and overused)
• Both text and background colors
• Different available fonts

158. 5 Ways Web
is not Print
• Layout is fluid
• Color is free (and overused)
• Both text and background colors
• Different available fonts
• Font fallback @ the end user

159. 5 Ways Web
is not Print
• Layout is fluid
• Color is free (and overused)
• Both text and background colors
• Different available fonts
• Font fallback @ the end user
• Resolution stinks
• Typically ~80–120 ppi
• Source of many issues

160. Summing Up

161. Keep it attractive
But make it legible

162. Keep it attractive
But make it legible
&

163. Agenda
1. Introduction & History
2. Choosing Fonts
3. Setting Type
4. CSS3 & OpenType Features
5. Try Sample Sites
6. Q&A

164. OpenType
browser support
Firefox 4+ (syntax change in 14)
Chrome:
• 15/16+ Win
• 22+ Mac
Internet Explorer 10+
Safari & Opera: not yet

165. OpenType
feature codes
• Standard stuff: liga (ligatures), kern, calt
(contextual alternates), clig (contextual
ligatures)
• Oldstyle/proportional numbers:
onum, pnum
• Fractions: frac
• Superscript/subscript: sups, subs, sinf
• Small caps from caps: c2sc
• Small caps from lowercase: smcp
• Discretionary/historical ligs: dlig, hlig
• Stylistic Set #2, #14: ss02, ss14

166. OpenType
features in CSS
body {
-moz-font-feature-settings:"calt", "liga", "clig", "kern";
-moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1";
-ms-font-feature-settings:"calt", "liga", "clig", "kern";
-o-font-feature-settings:"calt", "liga", "clig", "kern";
-webkit-font-feature-settings:"calt", "liga", "clig", "kern";
font-feature-settings:"calt", "liga", "clig", "kern";
}

167. DEMO

168. Resources &
Links
http://www.webink.com/type-
resources
http://mzl.la/ff4-ot
@WebINK
@ThomasPhinney

169. Agenda
1. Introduction & History
2. Choosing Fonts
3. Setting Type
4. CSS3 & OpenType Features
5. Try Sample Sites
6. Q&A

170. Test sites
WordPress sites
http://workshop1.webink.com
… workshop40.webink.com
Username: workshop
Password: fontguru!
Let’s count off

171. Agenda
1. Introduction & History
2. Choosing Fonts
3. Setting Type
4. CSS3 & OpenType Features
5. Try Sample Sites
6. Q&A

172. Connect
@jimkidwell
@ThomasPhinney
@webink
@extensis
blog.webink.com
blog.extensis.com

173. Q&A + Resources
• The Elements of Typographic Style
—Robert Bringhurst
• Getting it Right With Type
—Victoria Squire
• Branding with type—Rögener,
Pool, Packhäuser, Ginger
• http://www.webink.com/type-
resources