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

  • 7,776 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,776
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
110
Comments
1
Likes
22

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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






Transcript

  • 1. Rich Typography Options for the Web or Why sIFR is Dead in 2009 Paul Irish Molecular Inc. Emerging Interactions & Front-end Dev
  • 2. Where we @?
  • 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. @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. @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. So then what?
  • 7. The Landscape sIFR Facelift typeface.js Cufón
  • 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. 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. 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. http://www.sifrgenerator.com
  • 12. http://www.sifrvault.com
  • 13. http://bit.ly/facelift
  • 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. http://bit.ly/typefacejs
  • 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. http://www.madasplayground.com/fonts/   ~300 fonts in typeface.js format
  • 18. http://bit.ly/cufon
  • 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. 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. 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. 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. 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. Comparison Table!!!
  • 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. 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. 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. 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. 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. 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. 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. 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. Where are they going? Facelift supercache plugin, css sprite plugin, eventually no-JS option Cufón rtl & bidi, text rotation
  • 34. Conclusions
  • 35. sIFR? Doesn’t instantiate until visible in non-IE. Difficult configuration. Requires flash Not great with foreign/special characters Slow selector engine
  • 36. sIFR? Doesn’t instantiate until visible in non-IE. Difficult configuration. Requires flash Not great with foreign/special characters Slow selector engine
  • 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. 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. 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. 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. Typeface.js Still rather buggy Absent developer Quiet community Quality/Performance is inferior to Cufón
  • 42. Typeface.js Still rather buggy Absent developer Quiet community Quality/Performance is inferior to Cufón
  • 43. Cufón Better optimization for IE == better performance Glyph tweaking for type nerds Active developer and community
  • 44. Cufón Better optimization for IE == better performance Glyph tweaking for type nerds Active developer and community
  • 45. Rich Typography Options for the Web More: http:/ /paulirish.com/type Me: http://paulirish.com http://twitter.com/paul_irish