Rich Typography Options For The Web - or - Why sIFR is Dead in 2009

8,709 views
8,608 views

Published on

Published in: Technology, Art & Photos
1 Comment
22 Likes
Statistics
Notes
No Downloads
Views
Total views
8,709
On SlideShare
0
From Embeds
0
Number of Embeds
3,895
Actions
Shares
0
Downloads
112
Comments
1
Likes
22
Embeds 0
No embeds

No notes for slide


  • http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_@font-face_embedding


    More: http://del.icio.us/paul.irish/fontface
  • http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_@font-face_embedding


    More: http://del.icio.us/paul.irish/fontface





  • Agenda:
    - Library overviews, and helpful resources
    - Comparison table
    - Licensing
    - Performance
    - Conclusions




  • Great tutorials on getting sIFR up and running:
    * http://designintellection.com/this-is-how-you-get-sifr-to-work/
    * http://css-tricks.com/new-screencast-how-to-use-sifr-3/




  • Great tutorials on getting sIFR up and running:
    * http://designintellection.com/this-is-how-you-get-sifr-to-work/
    * http://css-tricks.com/new-screencast-how-to-use-sifr-3/







  • Great tutorials:
    * http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/
    * http://www.divitodesign.com/2008/10/install-flir-typography-solution-for-the-web/





  • Good response recently
    http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/
    http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/  
  • Good response recently
    http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/
    http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/  
  • Good response recently
    http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/
    http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/  
  • Good response recently
    http://net.tutsplus.com/videos/screencasts/the-easiest-way-to-use-any-font-you-wish/
    http://www.cameronmoll.com/archives/2009/03/cufon_font_embedding/  

  • * http://cameronmoll.com/archives/2009/03/cufon_font_embedding/
    * http://cameronmoll.com/articles/cufon/calgary.html



  • Licensing can be from 150€ to $1500 for web embedding





  • No superscript
    Non-html links (no open in new tab)

  • http://facelift.mawhorter.net/doc/plugins-quickeffects
  • http://facelift.mawhorter.net/doc/plugins-quickeffects
  • http://facelift.mawhorter.net/doc/plugins-quickeffects






  • Rich Typography Options For The Web - or - Why sIFR is Dead in 2009

    1. 1. Rich Typography Options for the Web or Why sIFR is Dead in 2009 Paul Irish Molecular Inc. Emerging Interactions & Front-end Dev
    2. 2. Where we @?
    3. 3. @font-face .eot and .ttf embedding Available in Chrome 2, FF 3.5, Safari 3.2, Opera 10 .... and all IE for .eot Free fonts are a go Still unresolved, licensing issues with commercial foundries
    4. 4. @font-face .eot and .ttf embedding Available in Chrome 2, FF 3.5, Safari 3.2, Opera 10 .... and all IE for .eot Free fonts are a go Still unresolved, licensing issues with commercial foundries
    5. 5. @font-face .eot and .ttf embedding Available in Chrome 2, FF 3.5, Safari 3.2, Opera 10 .... and all IE for .eot Free fonts are a go Still unresolved, licensing issues with commercial foundries
    6. 6. So then what?
    7. 7. The Landscape sIFR Facelift typeface.js Cufón
    8. 8. sIFR Configuration Custom js/css styling syntax Internal Technique Custom selector engine (or querySelectorAll) 1. Reading style properties from sifr-config.js 2. Placing Flash SWFs 3.
    9. 9. sIFR Configuration Custom js/css styling syntax Internal Technique Custom selector engine (or querySelectorAll) 1. Reading style properties from sifr-config.js 2. Placing Flash SWFs 3.
    10. 10. sIFR Configuration Custom js/css styling syntax Internal Technique Custom selector engine (or querySelectorAll) 1. Reading style properties from sifr-config.js 2. Placing Flash SWFs 3.
    11. 11. http://www.sifrgenerator.com
    12. 12. http://www.sifrvault.com
    13. 13. http://bit.ly/facelift
    14. 14. Facelift Configuration Styling type with CSS as normal Runtime Technique 1. Custom selector engine (or querySelectorAll) 2. Reading style properties through getComputedStyle() 3. Calling generate.php with text and style parameters 4. Placing PNGs
    15. 15. http://bit.ly/typefacejs
    16. 16. Typeface.js Configuration Styling type with CSS as normal Runtime Technique: 1. Finds target elements by a 'typeface-js' class 2. Reading style properties through getComputedStyle() 3. Reads JSON representation of font and transforms into... 4. VML glyph rendering for IE, Canvas for the rest
    17. 17. http://www.madasplayground.com/fonts/   ~300 fonts in typeface.js format
    18. 18. http://bit.ly/cufon
    19. 19. Cufón Configuration Styling type with CSS as normal Runtime Technique Any selector engine currently present is used 1. Reading style properties through getComputedStyle() 2. Reads JSON representation of VML font and 3. transforms into... VML glyph rendering for IE, Canvas for the rest 4.
    20. 20. Cufón Configuration Styling type with CSS as normal Runtime Technique Any selector engine currently present is used 1. Reading style properties through getComputedStyle() 2. Reads JSON representation of VML font and 3. transforms into... VML glyph rendering for IE, Canvas for the rest 4.
    21. 21. Cufón Configuration Styling type with CSS as normal Runtime Technique Any selector engine currently present is used 1. Reading style properties through getComputedStyle() 2. Reads JSON representation of VML font and 3. transforms into... VML glyph rendering for IE, Canvas for the rest 4.
    22. 22. Cufón Configuration Styling type with CSS as normal Runtime Technique Any selector engine currently present is used 1. Reading style properties through getComputedStyle() 2. Reads JSON representation of VML font and 3. transforms into... VML glyph rendering for IE, Canvas for the rest 4.
    23. 23. Cufón Configuration Styling type with CSS as normal Runtime Technique Any selector engine currently present is used 1. Reading style properties through getComputedStyle() 2. Reads JSON representation of VML font and 3. transforms into... VML glyph rendering for IE, Canvas for the rest 4.
    24. 24. Comparison Table!!!
    25. 25. sIFR Facelift typeface.js Cufón Technologies Javascript, Flash Javascript, PHP, GD or Javascript, Canvas,VML Javascript, Canvas,VML ImageMagick Selectable text? Yes, but not the Only in Firefox. No Supported (minus Not supported yet. surrounding elements visual affordance. Opera), but no visual Solutions for all if the selection starts affordance. browsers minus Opera inside the SWF exist. Hover state? Supported Supported In progress Supported Printable? Print.css lets you <img> prints fine. Supported. Supported. define a non-flash fallback Licensing issues Little. SWF can be None. Font file held TBD. JS file can be TBD. Cufon file can be paired with a domain. on backend and not reused with typeface.js reused with Cufon on distributed on any domain. any domain. Minified javascript 28.8k 18.4k 11.7k 14.2k size Fontin Sans (basic 12k swf n/a 30k js 16k js characters) size  
    26. 26. Technologies Javascript, Flash Javascript, PHP, GD or Javascript, Canvas,VML Javascript, Canvas,VML ImageMagick Selectable text? Yes, but not the Only in Firefox. No Supported (minus Not supported yet. surrounding elements visual affordance. Opera), but no visual Solutions for all if the selection starts affordance. browsers minus Opera inside the SWF exist. Hover state? Supported Supported In progress Supported Printable? Print.css lets you <img> prints fine. Supported. Supported. define a non-flash fallback Licensing issues Little. SWF can be None. Font file held TBD. JS file can be TBD. Cufon file can be paired with a domain. on backend and not reused with typeface.js reused with Cufon on distributed on any domain. any domain. Minified javascript 28.8k 18.4k 11.7k 14.2k size Fontin Sans (basic 12k swf n/a 30k js 16k js characters) size   Gentium (full set) 232k swf n/a 1334k js 400k js
    27. 27. Licensing? “We allow embedding with print and preview . We want the user to embed subsets, not complete fonts.” -Lucas de Groot “Right now, we prohibit web embedding in the retail EULA and provide a pricing scale for web embedding” -Rich Roat, House Industries
    28. 28. Licensing? “I have had several discussion with colleagues around the world regarding Cufón. The consensus is we would not allow it. As my understand is that it would contravene most EULAs because it would technically create a new copy of the font and uploading the file to a server could be open to abuse.” -Jason Smith, FontSmith
    29. 29. Licensing? “At the moment our EULA prohibits the embedding of font data in any vector format, which alas includes SVG. (Simo Kinnunen actually wrote to me to point out that Cufon violates both paragraphs 1 and 3.1 of our EULA.) That said, our EULA is under review right now...” -Jonathan Hoefler, Hoefler & Frere-Jones
    30. 30. Performance 30,000 ms Milliseconds to replace 120 elements on a popular homepage Empty cache. Average of five runs. 22,500 ms 15,000 ms 7,500 ms 0 ms sIFR Facelift Cufón typeface.js Firefox 3 IE 7 IE 6
    31. 31. Performance 30,000 ms Milliseconds to replace 120 elements on a popular homepage Empty cache. Average of five runs. 22,500 ms 15,000 ms 7,500 ms 0 ms sIFR Facelift Cufón typeface.js Firefox 3 IE 7 IE 6
    32. 32. Performance 30,000 ms Milliseconds to replace 120 elements on a popular homepage Empty cache. Average of five runs. 22,500 ms 15,000 ms 7,500 ms 0 ms sIFR Facelift Cufón typeface.js Firefox 3 IE 7 IE 6
    33. 33. Where are they going? Facelift supercache plugin, css sprite plugin, eventually no-JS option Cufón rtl & bidi, text rotation
    34. 34. Conclusions
    35. 35. sIFR? Doesn’t instantiate until visible in non-IE. Difficult configuration. Requires flash Not great with foreign/special characters Slow selector engine
    36. 36. sIFR? Doesn’t instantiate until visible in non-IE. Difficult configuration. Requires flash Not great with foreign/special characters Slow selector engine
    37. 37. Facelift Font file safe, good for the IP-cautious Lots of possible effects thanks to Imagemagick Requires PHP Many images/HTTP requests Mitigated by supercache and CSS sprite plugins Serious roadmap
    38. 38. Facelift Font file safe, good for the IP-cautious Lots of possible effects thanks to Imagemagick Requires PHP Many images/HTTP requests Mitigated by supercache and CSS sprite plugins Serious roadmap
    39. 39. Facelift Font file safe, good for the IP-cautious Lots of possible effects thanks to Imagemagick Requires PHP Many images/HTTP requests Mitigated by supercache and CSS sprite plugins Serious roadmap
    40. 40. Facelift Font file safe, good for the IP-cautious Lots of possible effects thanks to Imagemagick Requires PHP Many images/HTTP requests Mitigated by supercache and CSS sprite plugins Serious roadmap
    41. 41. Typeface.js Still rather buggy Absent developer Quiet community Quality/Performance is inferior to Cufón
    42. 42. Typeface.js Still rather buggy Absent developer Quiet community Quality/Performance is inferior to Cufón
    43. 43. Cufón Better optimization for IE == better performance Glyph tweaking for type nerds Active developer and community
    44. 44. Cufón Better optimization for IE == better performance Glyph tweaking for type nerds Active developer and community
    45. 45. Rich Typography Options for the Web More: http:/ /paulirish.com/type Me: http://paulirish.com http://twitter.com/paul_irish

    ×