Bringing Typography to the Web with sIFR 3 at <head>
•
10 likes•2,773 views
Slides from my presentation on Web Typography and sIFR 3 at the <head> conference. UPDATE: Something is broken in the notes I added, breaking all comments. Getting in touch with Slideshare to get that resolved. Screencasts can be found at http://files.11born.net/head08/
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (13)
Similar to Bringing Typography to the Web with sIFR 3 at <head>
Similar to Bringing Typography to the Web with sIFR 3 at <head> (20)
More from Mark Wubben
More from Mark Wubben (7)
Recently uploaded
Recently uploaded (20)
Bringing Typography to the Web with sIFR 3 at <head>
- 1. Web Typography FTW With sIFR 3 <head> conference Oct 26, 2008 Mark Wubben supercollider.dk cc-by-sa-2.0
- 3. Questions!
- 5. ~1997 IE 4 with proprietary EOT NS 4 with proprietary TrueDoc from Bitstream
- 6. CSS Web Fonts Specified in CSS 2 Removed in CSS 2.1 Back in CSS 3, dormant since 2002
- 7. Tomorrow?
- 8. Jason Teague CSS 3 Web Fonts Module Safari 3.1 Supports Font Linking Soon Firefox 3.1, Opera 10
- 9. Font Linking
- 10. @font-face { font-family: quot;GraublauWebquot;; src: url(quot;/GraublauWeb-Regularquot;) format(quot;truetypequot;); }
- 11. h1 { font-family: quot;GraublauWebquot;; }
- 13. Font Linking Easy! But, large files Original files!
- 14. Font Piracy?
- 15. Unexpected Hero?
- 17. Obvious Villain?
- 19. Text Replacement
- 20. Images
- 22. Flash
- 23. Image Replacement Font remains on server No Flash!
- 24. Image Replacement Server-side code Images are static No real text
- 25. Flash Replacement Font only for Flash export No server-side code Actual text Flash is dynamic
- 26. Flash Replacement Flash… (Can be) CPU intensive Links suck Flash text isn’t browser text
- 27. SVG Silverlight
- 31. labs.iamkoa.net
- 35. sIFR?!
- 40. sIFR 3?
- 41. Progressive Enhancement HTML JavaScript? Flash? Browser? sIFR!
- 42. New Since 2.0
- 43. Applying sIFR Site HTML? CSS JavaScript sIFR!
- 44. Site
- 47. Site HTML?
- 48. <head> <link rel=quot;stylesheetquot; href=quot;sIFR-screen.cssquot; type=quot;text/cssquot; media=quot;screenquot;> <link rel=quot;stylesheetquot; href=quot;sIFR-print.cssquot; type=quot;text/cssquot; media=quot;printquot;> <script type=quot;text/javascriptquot; src=quot;sifr.jsquot;> </script> </head>
- 49. <head> <link rel=quot;stylesheetquot; href=quot;sIFR-screen.cssquot; type=quot;text/cssquot; media=quot;screenquot;> <link rel=quot;stylesheetquot; href=quot;sIFR-print.cssquot; type=quot;text/cssquot; media=quot;printquot;> <script type=quot;text/javascriptquot; src=quot;sifr.jsquot;> </script> </head>
- 50. <head> <link rel=quot;stylesheetquot; href=quot;sIFR-screen.cssquot; type=quot;text/cssquot; media=quot;screenquot;> <link rel=quot;stylesheetquot; href=quot;sIFR-print.cssquot; type=quot;text/cssquot; media=quot;printquot;> <script type=quot;text/javascriptquot; src=quot;sifr.jsquot;> </script> </head>
- 51. Site HTML? CSS
- 52. .sIFR-active h1 { font-family: Verdana; line-height: 1em; visibility: hidden; /* Forces sIFR text to work nicely with floated image, at least in this scenario */ display: inline; }
- 53. Site HTML? CSS
- 54. Site HTML? CSS JavaScript
- 55. var fgm = { src: 'franklin-gothic-medium.swf' }; sIFR.activate(fgm);
- 56. sIFR.replace(fgm, { selector: 'h1', css: '.sIFR-root { color: #000000; } .head { color: #0068A3; }' });
- 57. Site HTML? CSS JavaScript sIFR!
- 63. Hyperlinks
- 64. <h1><a href=quot;/quot;>Home</a></h1> sIFR.replace(rockwell, { selector: 'a' });
- 65. <h1><a href=quot;/quot;>Home</a></h1> sIFR.replace(rockwell, { selector: 'h1' });
- 66. <h1><span><a href=quot;/quot;>Home</a></span></h1> sIFR.replace(rockwell, { selector: 'span' });
- 69. Debugging
- 70. <head> <link rel=quot;stylesheetquot; href=quot;sIFR-screen.cssquot; type=quot;text/cssquot; media=quot;screenquot;> <link rel=quot;stylesheetquot; href=quot;sIFR-print.cssquot; type=quot;text/cssquot; media=quot;printquot;> <script type=quot;text/javascriptquot; src=quot;sifr.jsquot;> </script> <script type=quot;text/javascriptquot; src=quot;sifr-debug.jsquot;> </script> </head>
- 71. Ratios
- 72. sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }' });
- 73. sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }' });
- 74. sIFR.debug.ratios(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }' });
- 76. 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; }' });
- 77. Tuning
- 78. sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }', tuneHeight: 8, tuneWidth: 1, offsetTop: 4, offsetLeft: 2 });
- 79. sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }', fitExactly: true });
- 80. Glyphs
- 83. Domain Binding
- 84. class Options { public static function apply() { sIFR.domains = ['*.example.com', 'example.com']; } }
- 85. var rockwell = { src: 'rockwell.swf' }; sIFR.domains = ['*.example.com', 'example.com']; sIFR.activate(rockwell);
- 86. Next for sIFR
- 87. Resources 11born.net/sifr3 11born.net/sifr3/wiki 11born.net/sifr3/forum 11born.net/sifr3/nightlies
- 89. Many thanks to these wonderful Flickr photographers: Jeremy Keith Ralph Aichinger antifluor Zara J Stig Nygaard Sharat Ganapati Rex Sorgatz Eduardo Arcos Ed Schipul Hashir Milhan Wolfgang Staudt Andrew Becherer Jesus Solana Jeff Kubina David Goehring Germán Meyer Lali Masriera