Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Geek Meet: Web Typography and sIFR 3

29,006 views

Published on

A newer version of this talk is available at http://www.slideshare.net/novemberborn/web-typography-with-sifr-3-at-drupalcamp-copenhagen

Web typography and sIFR 3, a talk given on February 26 2009 during Geek Meet in Stockholm, Sweden.

Published in: Technology, Art & Photos, Design
  • Great little presentation, actually useful and has some handy tips for first-time sIFRers.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • typekit is on the way http://blog.typekit.com/2009/05/27/introducing-typekit
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Geek Meet: Web Typography and sIFR 3

  1. 1. Web Typography and sIFR 3 Licensed under Creative Commons Attribution-Share Alike Mark Wubben 2.5 supercollider.dk http://creativecommons.org/licenses/by-sa/2.5/dk/ Friday, February 27, 2009
  2. 2. Web Typography Alternatives sIFR Plan Friday, February 27, 2009
  3. 3. Friday, February 27, 2009
  4. 4. State of Web Typography Friday, February 27, 2009
  5. 5. 1997 IE 4 with proprietary EOT NS 4 with proprietary TrueDoc from Bitstream Friday, February 27, 2009
  6. 6. CSS Web Fonts Specified in CSS 2 Removed in CSS 2.1 Implemented in NS 4, IE 4+ Friday, February 27, 2009
  7. 7. Progress Is Being Made Friday, February 27, 2009
  8. 8. Developments Renewed browser support Discussion over spec & implementation Font Linking versus Font Embedding Friday, February 27, 2009
  9. 9. Font Linking Friday, February 27, 2009
  10. 10. @font-face { font-family: quot;Fontin-Regularquot;; src: url(quot;Fontin-Regular.otfquot;) format(quot;opentypequot;); } Friday, February 27, 2009
  11. 11. h1 { font-family: quot;Fontin-Regularquot;; } Friday, February 27, 2009
  12. 12. jontangerine.com/silo/typography/font-face/ Friday, February 27, 2009
  13. 13. Lessons Easy, natural Original font files Potentially large files Friday, February 27, 2009
  14. 14. Font Piracy? Friday, February 27, 2009
  15. 15. “The emerging @font-face tag (…) will hopefully lead to a secure technology that allows fonts to be used in web pages. But at this Text time, no such security measures exist, so the use of this tag with our fonts constitutes the illegal distribution of the font software… Friday, February 27, 2009
  16. 16. …This type of use is therefore specifically prohibited under our End-User License Agreement.” Text Hoefler & Frere-Jones Friday, February 27, 2009
  17. 17. Font Embedding Friday, February 27, 2009
  18. 18. Embedded Open Type Industry recognized format Released to W3C as open specification Domain locking, subsetting, compression Friday, February 27, 2009
  19. 19. Embedded Open Type Horrid Tools Probably easily broken Friday, February 27, 2009
  20. 20. @font-face { font-family: quot;Fontin-Regularquot;; src: url(quot;Fontin-Regular.eotquot;); } Friday, February 27, 2009
  21. 21. Friday, February 27, 2009
  22. 22. “it (gives) a way to LEGALLY use commercial fonts (those that allow embedding, anyway); directly posting the .TTF or .OTF Text file on your web server will violate your license for commercial fonts … Friday, February 27, 2009
  23. 23. …Linking to raw .TTF/.OTF files WILL, in fact, encourage font piracy, as vastly more commercial fonts will be placed (unadorned) Text online, where they can be easily pilfered.” Chris Wilson Friday, February 27, 2009
  24. 24. Friday, February 27, 2009
  25. 25. Alternatively, Text Replacement Friday, February 27, 2009
  26. 26. Images Friday, February 27, 2009
  27. 27. facelift.mawhorter.net Friday, February 27, 2009
  28. 28. Flash Friday, February 27, 2009
  29. 29. Custom Friday, February 27, 2009
  30. 30. cufon.shoqolate.com Friday, February 27, 2009
  31. 31. Custom Text Rendering (Cufón) Font translated to custom format No Flash Completely client-side Friday, February 27, 2009
  32. 32. Custom Text Rendering (Cufón) Not an image, but not text either Implementation relatively static Friday, February 27, 2009
  33. 33. Image Replacement Font remains on server No Flash! Friday, February 27, 2009
  34. 34. Image Replacement Server-side code Images are static No real text Friday, February 27, 2009
  35. 35. Flash Replacement Font only for Flash export No server-side code Actual text, dynamic Friday, February 27, 2009
  36. 36. Flash Replacement Flash… Links suck Flash text isn’t browser text Friday, February 27, 2009
  37. 37. Questions So Far? Friday, February 27, 2009
  38. 38. scalable Inman Flash Replacement Friday, February 27, 2009
  39. 39. abriefmessage.com Friday, February 27, 2009
  40. 40. labs.iamkoa.net Friday, February 27, 2009
  41. 41. jasonsantamaria.com Friday, February 27, 2009
  42. 42. Friday, February 27, 2009
  43. 43. Friday, February 27, 2009
  44. 44. seedconference.com Friday, February 27, 2009
  45. 45. sIFR?! Friday, February 27, 2009
  46. 46. Spring 2004, Shaun Inman Friday, February 27, 2009
  47. 47. Inman Flash Replacement Friday, February 27, 2009
  48. 48. Summer ’04, scalable IFR Friday, February 27, 2009
  49. 49. Spring ’05, sIFR 2.0 Friday, February 27, 2009
  50. 50. sIFR 3? Friday, February 27, 2009
  51. 51. HTML JavaScript? Flash? Browser? sIFR! Progressive Enhancement Friday, February 27, 2009
  52. 52. New Since 2.0 Friday, February 27, 2009
  53. 53. Site HTML? CSS JavaScript sIFR! Applying sIFR Friday, February 27, 2009
  54. 54. Site Friday, February 27, 2009
  55. 55. Friday, February 27, 2009
  56. 56. Friday, February 27, 2009
  57. 57. Site HTML? Friday, February 27, 2009
  58. 58. <head> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;sifr.cssquot;> <script type=quot;text/javascriptquot; src=quot;sifr.jsquot;> </script> </head> Friday, February 27, 2009
  59. 59. Site HTML? CSS Friday, February 27, 2009
  60. 60. .sIFR-active h1, { .sIFR-active h2, { .sIFR-active h3 { font-family: Verdana; visibility: hidden; } Friday, February 27, 2009
  61. 61. Site HTML? CSS Friday, February 27, 2009
  62. 62. Site HTML? CSS JavaScript Friday, February 27, 2009
  63. 63. var cochin = { src: 'cochin.swf' }; sIFR.activate(cochin); Friday, February 27, 2009
  64. 64. sIFR.replace(cochin, { selector: 'h1', css: '.sIFR-root { color: #000000; }' }); Friday, February 27, 2009
  65. 65. sIFR.replace(cochin, { selector: 'h2', css: '.sIFR-root { color: #484747; background-color: #FDDE3E; }', transparent: true }); Friday, February 27, 2009
  66. 66. Site HTML? CSS JavaScript sIFR! Friday, February 27, 2009
  67. 67. Behind the Scenes Friday, February 27, 2009
  68. 68. Friday, February 27, 2009
  69. 69. Friday, February 27, 2009
  70. 70. Friday, February 27, 2009
  71. 71. Friday, February 27, 2009
  72. 72. Hyperlinks Friday, February 27, 2009
  73. 73. <h1><a href=quot;/quot;>Home</a></h1> sIFR.replace(rockwell, { selector: 'a' }); Friday, February 27, 2009
  74. 74. <h1><a href=quot;/quot;>Home</a></h1> sIFR.replace(rockwell, { selector: 'h1' }); Friday, February 27, 2009
  75. 75. <h1><span><a href=quot;/quot;>Home</a></span></h1> sIFR.replace(rockwell, { selector: 'span' }); Friday, February 27, 2009
  76. 76. Questions So Far? Friday, February 27, 2009
  77. 77. Font Piracy? Friday, February 27, 2009
  78. 78. “To use an H&FJ font with sIFR, purchase an additional single- computer font license for the webserver itself, and then Text configure sIFR (…) to prevent unauthorized users from accessing the system” Hoefler & Frere-Jones Friday, February 27, 2009
  79. 79. Making sIFR Rock! Friday, February 27, 2009
  80. 80. Debugging Friday, February 27, 2009
  81. 81. <head> <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;sifr.cssquot;> <script type=quot;text/javascriptquot; src=quot;sifr.jsquot;> </script> <script type=quot;text/javascriptquot; src=quot;sifr-debug.jsquot;> </script> </head> Friday, February 27, 2009
  82. 82. Ratios Friday, February 27, 2009
  83. 83. sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }' }); Friday, February 27, 2009
  84. 84. sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }' }); Friday, February 27, 2009
  85. 85. sIFR.debug.ratios(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }' }); Friday, February 27, 2009
  86. 86. Friday, February 27, 2009
  87. 87. var rockwell = { src: 'rockwell.swf', ratios: [6, 1.41, 9, 1.35, 15, 1.29, 21, 1.25] }; sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }' }); Friday, February 27, 2009
  88. 88. Tuning Friday, February 27, 2009
  89. 89. sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }', tuneHeight: 8, tuneWidth: 1, offsetTop: 4, offsetLeft: 2 }); Friday, February 27, 2009
  90. 90. sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }', fitExactly: true }); Friday, February 27, 2009
  91. 91. Glyphs Friday, February 27, 2009
  92. 92. Normal Bold Italic Italic & Bold Glyphs Friday, February 27, 2009
  93. 93. lowercase UPPERCASE !@#$%^&*(){} åæøéüîãàç Glyphs Friday, February 27, 2009
  94. 94. Domain Binding Friday, February 27, 2009
  95. 95. class Options { public static function apply() { sIFR.domains = ['*.example.com', 'example.com']; } } Friday, February 27, 2009
  96. 96. var rockwell = { src: 'rockwell.swf' }; sIFR.domains = ['*.example.com', 'example.com']; sIFR.activate(rockwell); Friday, February 27, 2009
  97. 97. Next for sIFR Friday, February 27, 2009
  98. 98. Resources 11born.net/sifr3 11born.net/sifr3/wiki 11born.net/sifr3/forum 11born.net/sifr3/so 11born.net/sifr3/nightlies @sifr Friday, February 27, 2009
  99. 99. 11born.net/geekmeet/sifr Friday, February 27, 2009
  100. 100. Ralph Aichinger Lali Masriera Wolfgang Staudt David Goehring Je Kubina Jeremy Keith Darwin Bell Rex Sorgatz Sharat Ganapati antifluor Eduardo Arcos Stig Nygaard Hashir Milhan Jesus Solana Andrew Becherer Ed Schipul Germán Meyer Friday, February 27, 2009

×