Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CCA Web Fonts Talk - 2012.10.01

Sean McBride
October 01, 2012

CCA Web Fonts Talk - 2012.10.01

This is a talk I gave at California College of the Arts on 2012.10.01 to a class of design students. I was invited by Kimberly Cullen. We covered some current examples of web fonts in use, the history of typography on the web, how web fonts work, and how type on the web is different than in print. We also did some live examples using several different font services.

Sean McBride

October 01, 2012
Tweet

More Decks by Sean McBride

Other Decks in Design

Transcript

  1. a RENAISSANCE in WEB TYPOGRAPHY Tuesday, October 2, 12

  2. SEAN McBRIDE Engineer & Web Developer User Experience Web Developer

    Tuesday, October 2, 12
  3. ? Tuesday, October 2, 12

  4. Tuesday, October 2, 12

  5. Tuesday, October 2, 12

  6. Tuesday, October 2, 12

  7. Tuesday, October 2, 12

  8. Tuesday, October 2, 12

  9. Tuesday, October 2, 12

  10. Tuesday, October 2, 12

  11. Tuesday, October 2, 12

  12. Tuesday, October 2, 12

  13. Tuesday, October 2, 12

  14. Tuesday, October 2, 12

  15. But it wasn’t ALWAYS this way... Tuesday, October 2, 12

  16. 600 years of typography Tuesday, October 2, 12

  17. thousands of fonts Tuesday, October 2, 12

  18. 1993: no fonts Tuesday, October 2, 12

  19. 2008: 18 fonts Tuesday, October 2, 12

  20. Tuesday, October 2, 12

  21. Tuesday, October 2, 12

  22. Tuesday, October 2, 12

  23. Tuesday, October 2, 12

  24. Tuesday, October 2, 12

  25. Is there a BETTER way? Tuesday, October 2, 12

  26. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } Tuesday, October

    2, 12
  27. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } Tuesday, October

    2, 12
  28. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } Tuesday, October

    2, 12
  29. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); font-weight: 400; font-style:

    normal; } Tuesday, October 2, 12
  30. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); font-weight: 400; font-style:

    normal; } @font-face { font-family: 'Awesome Font'; src: url('awesome-font-bold.woff'); font-weight: 700; font-style: normal; } Tuesday, October 2, 12
  31. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 {

    font-family: 'Awesome Font', 'Georgia', serif; } Tuesday, October 2, 12
  32. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 {

    font-family: 'Awesome Font', 'Georgia', serif; } Tuesday, October 2, 12
  33. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 {

    font-family: 'Awesome Font', 'Georgia', serif; } Tuesday, October 2, 12
  34. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 {

    font-family: 'Awesome Font', 'Georgia', serif; } Tuesday, October 2, 12
  35. Works in modern browsers today! Tuesday, October 2, 12

  36. GREAT! End of story? Tuesday, October 2, 12

  37. Tuesday, October 2, 12

  38. Tuesday, October 2, 12

  39. How is type on the web DIFFERENT than type in

    print? Tuesday, October 2, 12
  40. Licensing Desktop Web Tuesday, October 2, 12

  41. Formats Ag EOT Ag SVG Ag OTF/TTF Ag WOFF Tuesday,

    October 2, 12
  42. EOT SVG OTF/TTF WOFF IE 5 – IE 9 IE

    9 – Chrome 0.3 Chrome 4 Chrome 5 – Firefox 3.5 Firefox 3.5 Firefox 3.6 – Opera 9 Opera 10 Opera 11.01 – Safari 3.1 Safari 3.1 Safari 5.1 – iOS 1 iOS 4.2 iOS 5 – 3.1 2.2 Chrome Tuesday, October 2, 12
  43. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } Tuesday, October

    2, 12
  44. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.eot'); /* IE 5-8

    */ src: local(''), /* sneaky trick for IE */ url('awesome-font.woff') format('woff'), /* FF 3.6+, Chrome 5+, IE9 */ url('awesome-font.ttf') format('truetype'), /* Opera, Safari, iOS4.2+ */ url('awesome-font.svg#font') format('svg'); /* iOS <4.1 */ } Tuesday, October 2, 12
  45. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.eot'); /* IE9 Compat

    Modes */ src: url('awesome-font.eot?iefix') format('eot'), /* IE6-IE8 */ url('awesome-font.woff') format('woff'), /* Modern Browsers */ url('awesome-font.ttf') format('truetype'), /* Safari, Android, iOS */ url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */ } Tuesday, October 2, 12
  46. @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf')

    format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } Tuesday, October 2, 12
  47. @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf')

    format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } <script src="http://use.typekit.com/xxxxxxx.js"></script> <script>try{Typekit.load();}catch(e){}</script> Tuesday, October 2, 12
  48. Rendering Tuesday, October 2, 12

  49. Tuesday, October 2, 12

  50. Tuesday, October 2, 12

  51. Tuesday, October 2, 12

  52. CoreText DirectWrite GDI + ClearType GDI + Standard Tuesday, October

    2, 12
  53. Tuesday, October 2, 12

  54. Page Size ??? Kb Tuesday, October 2, 12

  55. Tuesday, October 2, 12

  56. Rendering Speed ??? seconds Tuesday, October 2, 12

  57. Fallback fonts Aa Aa Tuesday, October 2, 12

  58. Tuesday, October 2, 12

  59. Tuesday, October 2, 12

  60. Always Connected Tuesday, October 2, 12

  61. Let’s see it in an EXAMPLE Tuesday, October 2, 12

  62. Tuesday, October 2, 12

  63. Tuesday, October 2, 12

  64. Tuesday, October 2, 12

  65. seanmcb.com/sxsw2012 typekit.com/gallery blog.typekit.com/category/sites-we-like typekit.com edgefonts.com Tuesday, October 2, 12

  66. Questions? Tuesday, October 2, 12

  67. @smcbride sean@typekit.com Tuesday, October 2, 12