Presented by 
Jim Kidwell
Your Web
Font is Crap
How to Choose and
Use a Better One
http://extens.is/webv
The Web
can be an ugly place
http://extens.is/webv
http://extens.is/webv
http://extens.is/webv
http://extens.is/webv
http://extens.is/webv
But it doesn’t need
to be that way
http://extens.is/webv
How to prevent suckage
1.  Define your audience
2.  Use real web fonts
3.  Examine your fonts carefu...
http://extens.is/webv
Who is your
intended audience?
http://extens.is/webv
Maybe…
Comic Sans = Science!
http://extens.is/webv
Perhaps for
primary schools
http://extens.is/webv
Defining Audience
is Critical
http://extens.is/webv
Still relying on
“web safe” fonts
http://extens.is/webv
Comic Sans
Impact
Arial Black
Arial / Helvetica"
Trebuchet
Verdana
Courier/Courier New
Times (New) R...
Comic Sans
Impact
Arial Black
Arial / Helvetica"
Trebuchet
Verdana
Courier/Courier New
Times (New) Roman
Georgia!
Comic Sans
Impact
Arial Black
Arial / Helvetica"
Trebuchet
Verdana
Courier/Courier New
Times (New) Roman
Georgia!
http://extens.is/webv
Real web fonts
•  Come from a server
•  Provides brand consistency
•  Allow easily updated text
•  C...
http://extens.is/webv
It’s not just you.
Let’s talk fruit
http://extens.is/webv
Using web fonts now?
Good.
http://extens.is/webv
Examine your fonts
for quality
http://extens.is/webv
Good fonts compensate for the
tricks our eyes play
•  Point placement
•  Spacing
•  Kerning
•  Overs...
http://extens.is/webv
Character Spacing & Kerning
When it’s bad, spacing between characters is uneven
http://extens.is/webv
Character Spacing & Kerning
When it’s good, spacing is even
Overshoot
Stroke Intersections
Stroke Intersections
http://extens.is/webv
Hinting
•  Best utilize OS & display
•  Turn on/off best pixels
•  Hand-hinted, Auto or Nothing
Hinting – GDI - Greyscale
http://blog.webink.com/why-fonts-suck-windows-hinting/
Hinting - ClearType
http://blog.webink.com/why-fonts-suck-windows-hinting/
http://extens.is/webv
Good Fonts Include
•  Full basic character set
•  Extended characters for additional languages
•  Li...
http://extens.is/webv
Testing your font selection
1.  Implement properly
2.  Turn on OpenType features
3.  Test font in ta...
http://extens.is/webv
Implementation
Best Practices
http://extens.is/webv
Bigger Body Text
•  Legible ≠ Comfortable!
•  Most web text unnecessarily small
•  Average 9–12 px
•...
http://extens.is/webv
Limit & Control Line Length
•  Impacts reading comfort
•  Aim for 55–75 characters/line
•  Type size...
http://extens.is/webv
Use OpenType features in CSS
•  Contextual Alternates
•  Ligatures
•  Contextual Ligatures
•  Kernin...
http://extens.is/webv
Use OpenType features in CSS
•  OpenType is font file type
•  OpenType features ≠ file type
•  Not a...
http://extens.is/webv
Use OpenType features in CSS
body {
-moz-font-feature-settings:"calt", "liga", "clig", "kern";
-moz-...
http://extens.is/webv
Contextual Alternates
body {
-moz-font-feature-settings:"calt", "liga", "clig", "kern";
-moz-font-fe...
http://extens.is/webv
Contextual Alternates
http://blog.webink.com/opentype-features-css/
http://extens.is/webv
Ligatures
body {
-moz-font-feature-settings:"calt", "liga", "clig", "kern";
-moz-font-feature-settin...
http://extens.is/webv
Ligatures
http://blog.webink.com/opentype-features-css/
http://extens.is/webv
Contextual Ligatures
body {
-moz-font-feature-settings:"calt", "liga", "clig", "kern";
-moz-font-fea...
http://extens.is/webv
Contextual Ligatures
http://blog.webink.com/opentype-features-css/
http://extens.is/webv
Kerning
body {
-moz-font-feature-settings:"calt", "liga", "clig", "kern";
-moz-font-feature-settings...
http://extens.is/webv
Kerning
http://blog.webink.com/opentype-features-css/
http://extens.is/webv
Use OpenType features in CSS
body {
-moz-font-feature-settings:"calt", "liga", "clig", "kern";
-moz-...
http://extens.is/webv
More OpenType feature codes
•  Oldstyle figures: onum
•  Proportional figures: pnum
•  Small caps fr...
http://extens.is/webv
Contact, Resources, Q&A
Jim Kidwell, Extensis
www.extensis.com
@jimkidwell

Slides & More Resources:...
Your web font is crap - webvisions pdx 2014
Your web font is crap - webvisions pdx 2014
Your web font is crap - webvisions pdx 2014
Your web font is crap - webvisions pdx 2014
Your web font is crap - webvisions pdx 2014
Your web font is crap - webvisions pdx 2014
Your web font is crap - webvisions pdx 2014
Upcoming SlideShare
Loading in …5
×

Your web font is crap - webvisions pdx 2014

687
-1

Published on

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.

Published in: Design, Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
687
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Your web font is crap - webvisions pdx 2014

  1. 1. Presented by Jim Kidwell Your Web Font is Crap How to Choose and Use a Better One
  2. 2. http://extens.is/webv The Web can be an ugly place
  3. 3. http://extens.is/webv
  4. 4. http://extens.is/webv
  5. 5. http://extens.is/webv
  6. 6. http://extens.is/webv
  7. 7. http://extens.is/webv But it doesn’t need to be that way
  8. 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. 9. http://extens.is/webv Who is your intended audience?
  10. 10. http://extens.is/webv Maybe… Comic Sans = Science!
  11. 11. http://extens.is/webv Perhaps for primary schools
  12. 12. http://extens.is/webv Defining Audience is Critical
  13. 13. http://extens.is/webv Still relying on “web safe” fonts
  14. 14. http://extens.is/webv Comic Sans Impact Arial Black Arial / Helvetica" Trebuchet Verdana Courier/Courier New Times (New) Roman Georgia!
  15. 15. Comic Sans Impact Arial Black Arial / Helvetica" Trebuchet Verdana Courier/Courier New Times (New) Roman Georgia!
  16. 16. Comic Sans Impact Arial Black Arial / Helvetica" Trebuchet Verdana Courier/Courier New Times (New) Roman Georgia!
  17. 17. 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
  18. 18. http://extens.is/webv It’s not just you. Let’s talk fruit
  19. 19. http://extens.is/webv Using web fonts now? Good.
  20. 20. http://extens.is/webv Examine your fonts for quality
  21. 21. 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
  22. 22. http://extens.is/webv Character Spacing & Kerning When it’s bad, spacing between characters is uneven
  23. 23. http://extens.is/webv Character Spacing & Kerning When it’s good, spacing is even
  24. 24. Overshoot
  25. 25. Stroke Intersections
  26. 26. Stroke Intersections
  27. 27. http://extens.is/webv Hinting •  Best utilize OS & display •  Turn on/off best pixels •  Hand-hinted, Auto or Nothing
  28. 28. Hinting – GDI - Greyscale http://blog.webink.com/why-fonts-suck-windows-hinting/
  29. 29. Hinting - ClearType http://blog.webink.com/why-fonts-suck-windows-hinting/
  30. 30. http://extens.is/webv Good Fonts Include •  Full basic character set •  Extended characters for additional languages •  Ligatures •  Contextual alternates •  Small Caps
  31. 31. http://extens.is/webv Testing your font selection 1.  Implement properly 2.  Turn on OpenType features 3.  Test font in targeted browser/OS combinations
  32. 32. http://extens.is/webv Implementation Best Practices
  33. 33. 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
  34. 34. 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;
  35. 35. 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/
  36. 36. 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/
  37. 37. 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/
  38. 38. 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/
  39. 39. http://extens.is/webv Contextual Alternates http://blog.webink.com/opentype-features-css/
  40. 40. 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/
  41. 41. http://extens.is/webv Ligatures http://blog.webink.com/opentype-features-css/
  42. 42. 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/
  43. 43. http://extens.is/webv Contextual Ligatures http://blog.webink.com/opentype-features-css/
  44. 44. 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/
  45. 45. http://extens.is/webv Kerning http://blog.webink.com/opentype-features-css/
  46. 46. 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/
  47. 47. 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
  48. 48. 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

×