Your SlideShare is downloading. ×
Your web font is crap - webvisions pdx 2014
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Your web font is crap - webvisions pdx 2014

428
views

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 …

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
428
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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?
  • 10. http://extens.is/webv Maybe… Comic Sans = Science!
  • 11. http://extens.is/webv Perhaps for primary schools
  • 12. http://extens.is/webv Defining Audience is Critical
  • 13. http://extens.is/webv Still relying on “web safe” fonts
  • 14. http://extens.is/webv Comic Sans Impact Arial Black Arial / Helvetica" Trebuchet Verdana Courier/Courier New Times (New) Roman Georgia!
  • 15. Comic Sans Impact Arial Black Arial / Helvetica" Trebuchet Verdana Courier/Courier New Times (New) Roman Georgia!
  • 16. Comic Sans Impact Arial Black Arial / Helvetica" Trebuchet Verdana Courier/Courier New Times (New) Roman Georgia!
  • 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. http://extens.is/webv It’s not just you. Let’s talk fruit
  • 19. http://extens.is/webv Using web fonts now? Good.
  • 20. http://extens.is/webv Examine your fonts for quality
  • 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. http://extens.is/webv Character Spacing & Kerning When it’s bad, spacing between characters is uneven
  • 23. http://extens.is/webv Character Spacing & Kerning When it’s good, spacing is even
  • 24. Overshoot
  • 25. Stroke Intersections
  • 26. Stroke Intersections
  • 27. http://extens.is/webv Hinting •  Best utilize OS & display •  Turn on/off best pixels •  Hand-hinted, Auto or Nothing
  • 28. Hinting – GDI - Greyscale http://blog.webink.com/why-fonts-suck-windows-hinting/
  • 29. Hinting - ClearType http://blog.webink.com/why-fonts-suck-windows-hinting/
  • 30. http://extens.is/webv Good Fonts Include •  Full basic character set •  Extended characters for additional languages •  Ligatures •  Contextual alternates •  Small Caps
  • 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. http://extens.is/webv Implementation Best Practices
  • 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. 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. 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. 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. 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. 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. http://extens.is/webv Contextual Alternates http://blog.webink.com/opentype-features-css/
  • 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. http://extens.is/webv Ligatures http://blog.webink.com/opentype-features-css/
  • 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. http://extens.is/webv Contextual Ligatures http://blog.webink.com/opentype-features-css/
  • 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. http://extens.is/webv Kerning http://blog.webink.com/opentype-features-css/
  • 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. 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. 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