Are you certain that your choice and implementation of fonts on the web is living up to your expectations? Shared at WebVisions Portland 2014, Jim Kidwell goes through what makes good use of fonts on the web.

1. Presented by
Jim Kidwell
Your Web
Font is Crap
How to Choose and
Use a Better One

2. http://extens.is/webv
The Web
can be an ugly place

3. http://extens.is/webv

4. http://extens.is/webv

5. http://extens.is/webv

6. http://extens.is/webv

7. http://extens.is/webv
But it doesn’t need
to be that way

8. http://extens.is/webv
How to prevent suckage
1. Define your audience
2. Use real web fonts
3. Examine your fonts carefully
4. Implement it properly
5. Test the features

9. http://extens.is/webv
Who is your
intended audience?

13. http://extens.is/webv
Maybe…
Comic Sans = Science!

14. http://extens.is/webv
Perhaps for
primary schools

15. http://extens.is/webv
Defining Audience
is Critical

16. http://extens.is/webv
Still relying on
“web safe” fonts

17. http://extens.is/webv
Comic Sans
Impact
Arial Black
Arial / Helvetica"
Trebuchet
Verdana
Courier/Courier New
Times (New) Roman
Georgia!

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

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

20. http://extens.is/webv
Real web fonts
• Come from a server
• Provides brand consistency
• Allow easily updated text
• Can be made responsive with media queries

21. http://extens.is/webv
It’s not just you.
Let’s talk fruit

26. http://extens.is/webv
Using web fonts now?
Good.

27. http://extens.is/webv
Examine your fonts
for quality

28. http://extens.is/webv
Good fonts compensate for the
tricks our eyes play
• Point placement
• Spacing
• Kerning
• Overshoot
• Stroke interactions
• Straight to curve
transitions
• Round vs. straight
• Caps vs. lowercase
• Even weight
• Stretching
• Midline position
• Perfect circles
https://www.commarts.com/columns/know-font-sucks.html

29. http://extens.is/webv
Character Spacing & Kerning
When it’s bad, spacing between characters is uneven

30. http://extens.is/webv
Character Spacing & Kerning
When it’s good, spacing is even

31. Overshoot

32. Stroke Intersections

33. Stroke Intersections

34. http://extens.is/webv
Hinting
• Best utilize OS & display
• Turn on/off best pixels
• Hand-hinted, Auto or Nothing

35. Hinting – GDI - Greyscale
http://blog.webink.com/why-fonts-suck-windows-hinting/

36. Hinting - ClearType
http://blog.webink.com/why-fonts-suck-windows-hinting/

37. http://extens.is/webv
Good Fonts Include
• Full basic character set
• Extended characters for additional languages
• Ligatures
• Contextual alternates
• Small Caps

38. http://extens.is/webv
Testing your font selection
1. Implement properly
2. Turn on OpenType features
3. Test font in targeted browser/OS combinations

39. http://extens.is/webv
Implementation
Best Practices

40. http://extens.is/webv
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
• Minimum legible varies

41. http://extens.is/webv
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;

42. http://extens.is/webv
Use OpenType features in CSS
• Contextual Alternates
• Ligatures
• Contextual Ligatures
• Kerning
• OptimizeLegibility (Older Browser Support)
http://blog.webink.com/opentype-features-css/

43. http://extens.is/webv
Use OpenType features in CSS
• OpenType is font file type
• OpenType features ≠ file type
• Not all features are in all fonts
http://blog.webink.com/opentype-features-css/

44. http://extens.is/webv
Use 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";
text-rendering:optimizeLegibility;
}
http://blog.webink.com/opentype-features-css/

45. http://extens.is/webv
Contextual Alternates
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";
text-rendering:optimizeLegibility;
}
http://blog.webink.com/opentype-features-css/

46. http://extens.is/webv
Contextual Alternates
http://blog.webink.com/opentype-features-css/

47. http://extens.is/webv
Ligatures
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";
text-rendering:optimizeLegibility;
}
http://blog.webink.com/opentype-features-css/

48. http://extens.is/webv
Ligatures
http://blog.webink.com/opentype-features-css/

49. http://extens.is/webv
Contextual Ligatures
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";
text-rendering:optimizeLegibility;
}
http://blog.webink.com/opentype-features-css/

50. http://extens.is/webv
Contextual Ligatures
http://blog.webink.com/opentype-features-css/

51. http://extens.is/webv
Kerning
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";
text-rendering:optimizeLegibility;
}
http://blog.webink.com/opentype-features-css/

52. http://extens.is/webv
Kerning
http://blog.webink.com/opentype-features-css/

53. http://extens.is/webv
Use 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";
text-rendering:optimizeLegibility;
}
http://blog.webink.com/opentype-features-css/

54. http://extens.is/webv
More OpenType feature codes
• Oldstyle figures: onum
• Proportional figures: pnum
• Small caps from caps: s2sc
• Small caps from lowercase: smcp
• Discretionary/historical ligs: dlig, hlig
• Stylistic Sets: #2, #14: ss02, ss14

55. http://extens.is/webv
Contact, Resources, Q&A
Jim Kidwell, Extensis
www.extensis.com
@jimkidwell
Slides & More Resources:
http://www.extensis.com/web-fonts/webvisions