Webfonts: The Hype about Type

3,595 views

Published on

So far designers were limited to the fonts available on the user's machines. All of a sudden New possibilities seem to open up.

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

No Downloads
Views
Total views
3,595
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
30
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Webfonts: The Hype about Type

  1. 1. Webfonts The Hype about Type April 6th 2010 1 Memi Beltrame: Webfonts – The Hype about Type
  2. 2. How can designers make use of the rich variety of fonts on websites? 2 Memi Beltrame: Webfonts – The Hype about Type
  3. 3. So far designers were limited to the fonts available on the user's machines. 3 Memi Beltrame: Webfonts – The Hype about Type
  4. 4. This means only fonts distributed with the OS. font-family: Georgia, "Times New Roman", serif; 4 Memi Beltrame: Webfonts – The Hype about Type
  5. 5. Helvetica vs. Arial on Macintosh on Windows 5 Memi Beltrame: Webfonts – The Hype about Type
  6. 6. Alternative: Download the font from the server! 6 Memi Beltrame: Webfonts – The Hype about Type
  7. 7. Alternative: Download the font from the server! CSS 2 @font-face { src: local("Alabama Italic"), url(http://fonts.org/alabama-italic) format("truetype"); } 7 Memi Beltrame: Webfonts – The Hype about Type
  8. 8. Alternative: Download the font from server! CSS 2 Dropped in CSS 2.1 @font-face { src: local("Alabama Italic"), url(http://fonts.org/alabama-italic) format("truetype"); } 8 Memi Beltrame: Webfonts – The Hype about Type
  9. 9. 2 Problems • DRM • Browsers 9 Memi Beltrame: Webfonts – The Hype about Type
  10. 10. DRM 10 Memi Beltrame: Webfonts – The Hype about Type
  11. 11. DRM Designers rely on good fonts 11 Memi Beltrame: Webfonts – The Hype about Type
  12. 12. DRM Designers rely on good fonts These have variations & dîàçrìtïcs 12 Memi Beltrame: Webfonts – The Hype about Type
  13. 13. DRM Designers rely on good fonts These have variations & dîàçrìtïcs Good fonts come from type foundries 13 Memi Beltrame: Webfonts – The Hype about Type
  14. 14. DRM Designers rely on good fonts These have variations & dîàçrìtïcs Good fonts come from type foundries These want money for their use 14 Memi Beltrame: Webfonts – The Hype about Type
  15. 15. DRM Designers rely on good fonts These have variations & dîàçrìtïcs Good fonts come from type foundries These want money for their use DRM 15 Memi Beltrame: Webfonts – The Hype about Type
  16. 16. DRM Solutions 1. Web Font Services 16 Memi Beltrame: Webfonts – The Hype about Type
  17. 17. DRM Solutions 1. Web Font Services Foundries: Linotype Monotype 17 Memi Beltrame: Webfonts – The Hype about Type
  18. 18. DRM Solutions 1. Web Font Services Font-Service: Foundries: Licence to Typekit Linotype Typotheque Monotype Fontdeck 18 Memi Beltrame: Webfonts – The Hype about Type
  19. 19. DRM Solutions 1. Web Font Services Font-Service: Foundries: Licence to Typekit Linotype Typotheque Monotype Fontdeck Licence to you Domain 1 Domain 2 19 Memi Beltrame: Webfonts – The Hype about Type
  20. 20. Typekit - Sign up 20 Memi Beltrame: Webfonts – The Hype about Type
  21. 21. Typekit - Sign up - Choose type of account 21 Memi Beltrame: Webfonts – The Hype about Type
  22. 22. Typekit - Sign up - Choose type of account - Choose font(s) 22 Memi Beltrame: Webfonts – The Hype about Type
  23. 23. Typekit - Sign up - Choose type of account - Choose font(s) Unique identifer - Embed markup <script type="text/javascript" src="http://use.typekit.com/cyq6gmy.js"> </script> <script type="text/javascript"> try{Typekit.load();}catch(e){} </script> 23 Memi Beltrame: Webfonts – The Hype about Type
  24. 24. DRM Solutions 2. Open Fonts 24 Memi Beltrame: Webfonts – The Hype about Type
  25. 25. DRM Solutions 2. Open Fonts http://openfontlibrary.org/ 25 Memi Beltrame: Webfonts – The Hype about Type
  26. 26. DRM Solutions 2. Open Fonts Open Font Library: - Ensures open licencing (public domain, SIL Open Font Licence) 26 Memi Beltrame: Webfonts – The Hype about Type
  27. 27. DRM Solutions 2. Open Fonts Open Font Library: - Ensures open licencing (public domain, SIL Open Font Licence) - Ensures a certain standard in fonts 27 Memi Beltrame: Webfonts – The Hype about Type
  28. 28. DRM Solutions 2. Open Fonts Open Font Library: - Ensures open licencing (public domain, SIL Open Font Licence) - Ensures a certain standard in fonts Is no guarantee for professional fonts 28 Memi Beltrame: Webfonts – The Hype about Type
  29. 29. Browsers 29 Memi Beltrame: Webfonts – The Hype about Type
  30. 30. Browsers Internet Explorer only understands EOT 30 Memi Beltrame: Webfonts – The Hype about Type
  31. 31. Browsers Internet Explorer only understands EOT No TTF, OTF, SVG, WOFF (new!) 31 Memi Beltrame: Webfonts – The Hype about Type
  32. 32. Browsers Internet Explorer only understands EOT No TTF, OTF, SVG, WOFF (new!) @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('Graublau Web Regular'), local('Graublau Web'), url('GraublauWeb.otf') format('opentype'); } YES IT'S A HACK! 32 Memi Beltrame: Webfonts – The Hype about Type
  33. 33. Browsers Formats for Non-IE Browsers 33 Memi Beltrame: Webfonts – The Hype about Type
  34. 34. Browsers The Format Names: SVG – Scalable Vector Graphics TTF - True Type Fonts OTF – Open Type Format WOFF - Web Open Font Format 34 Memi Beltrame: Webfonts – The Hype about Type
  35. 35. Browsers For an in-depth analysis cf http://liip.to/fontEngineComparison 35 Memi Beltrame: Webfonts – The Hype about Type
  36. 36. Browsers Problems with ttf: - Mozilla support is new - Chrome disables it by default 36 Memi Beltrame: Webfonts – The Hype about Type
  37. 37. Browsers Problems with otf: - Mozilla support is new - No Chrome support - doesn't render nicely on Windows 37 Memi Beltrame: Webfonts – The Hype about Type
  38. 38. Browsers Problems with svg: - Mozilla does not support it, at least not very well 38 Memi Beltrame: Webfonts – The Hype about Type
  39. 39. Browsers SVG : W3C recommendation Implementation: Source: http://de.wikipedia.org/wiki/Svg 39 Memi Beltrame: Webfonts – The Hype about Type
  40. 40. WOFF WOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF 40 Memi Beltrame: Webfonts – The Hype about Type
  41. 41. WOFF WOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly 41 Memi Beltrame: Webfonts – The Hype about Type
  42. 42. WOFF WOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly - FF 3.6 frst browser shipping WOFF 42 Memi Beltrame: Webfonts – The Hype about Type
  43. 43. WOFF WOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly - FF 3.6 frst browser shipping WOFF - MS 'considers' support in IE 9 43 Memi Beltrame: Webfonts – The Hype about Type
  44. 44. WOFF WOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly - FF 3.6 frst browser shipping WOFF - MS 'considers' support in IE 9 - is backed by type foundries 44 Memi Beltrame: Webfonts – The Hype about Type
  45. 45. WOFF Includes optional metadata 45 Memi Beltrame: Webfonts – The Hype about Type
  46. 46. WOFF Includes optional metadata Vendors can tag their fonts with information related to font usage. 46 Memi Beltrame: Webfonts – The Hype about Type
  47. 47. WOFF Includes optional metadata Vendors can tag their fonts with information related to font usage. Font usage can be monitored but not completely restricted 47 Memi Beltrame: Webfonts – The Hype about Type
  48. 48. WOFF Firefox: - default same-origin restriction 48 Memi Beltrame: Webfonts – The Hype about Type
  49. 49. WOFF Firefox: - default same-origin restriction - only loads WOFF from the same domain 49 Memi Beltrame: Webfonts – The Hype about Type
  50. 50. WOFF Firefox: - default same-origin restriction - only loads WOFF from the same domain - makes font-vendors happy! 50 Memi Beltrame: Webfonts – The Hype about Type
  51. 51. So why this sudden font hype? 51 Memi Beltrame: Webfonts – The Hype about Type
  52. 52. So why this sudden font hype? Implementation of the @font-face directive gained signifcant speed. 52 Memi Beltrame: Webfonts – The Hype about Type
  53. 53. So why this sudden font hype? Font-services make designers and type foundries happy 53 Memi Beltrame: Webfonts – The Hype about Type
  54. 54. So why this sudden font hype? WOFF may become the new standard for fonts on the web. With Microsoft on board. 54 Memi Beltrame: Webfonts – The Hype about Type
  55. 55. Read more: http://delicious.com/plonk/webfonts 55 Memi Beltrame: Webfonts – The Hype about Type
  56. 56. Thank you! memibeltrame.ch twitter.com/bratwurstkomet More presentations: slideshare.net/memibeltrame liip.ch 56 Memi Beltrame: Webfonts – The Hype about Type

×