Rich Typography Options for
           the Web
              or
       Why sIFR is Dead in 2009

Paul Irish
Molecular Inc....
Where we @?
@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...
@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...
@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...
So then what?
The Landscape
sIFR
Facelift
typeface.js
Cufón
sIFR
 Configuration
     Custom js/css styling syntax

 Internal Technique
     Custom selector engine (or querySelectorAl...
sIFR
 Configuration
     Custom js/css styling syntax

 Internal Technique
     Custom selector engine (or querySelectorAl...
sIFR
 Configuration
     Custom js/css styling syntax

 Internal Technique
     Custom selector engine (or querySelectorAl...
http://www.sifrgenerator.com
http://www.sifrvault.com
http://bit.ly/facelift
Facelift
Configuration
  Styling type with CSS as normal

Runtime Technique
1. Custom selector engine (or querySelectorAll...
http://bit.ly/typefacejs
Typeface.js
Configuration
  Styling type with CSS as normal

Runtime Technique:
1. Finds target elements by a 'typeface-js...
http://www.madasplayground.com/fonts/  
    ~300 fonts in typeface.js format
http://bit.ly/cufon
Cufón
Configuration
  Styling type with CSS as normal

Runtime Technique
     Any selector engine currently present is use...
Cufón
Configuration
  Styling type with CSS as normal

Runtime Technique
     Any selector engine currently present is use...
Cufón
Configuration
  Styling type with CSS as normal

Runtime Technique
     Any selector engine currently present is use...
Cufón
Configuration
  Styling type with CSS as normal

Runtime Technique
     Any selector engine currently present is use...
Cufón
Configuration
  Styling type with CSS as normal

Runtime Technique
     Any selector engine currently present is use...
Comparison
  Table!!!
sIFR                 Facelift           typeface.js                  Cufón

Technologies       Javascript, Flash      Java...
Technologies       Javascript, Flash      Javascript, PHP, GD or Javascript, Canvas,VML Javascript, Canvas,VML
           ...
Licensing?

“We allow embedding with print and preview . We want the user
to embed subsets, not complete fonts.”

        ...
Licensing?
“I have had several discussion with colleagues around the
world regarding Cufón. The consensus is we would not ...
Licensing?
“At the moment our EULA prohibits the embedding of font
data in any vector format, which alas includes SVG. (Si...
Performance
30,000 ms

            Milliseconds to replace 120 elements on a popular homepage
                         Emp...
Performance
30,000 ms

            Milliseconds to replace 120 elements on a popular homepage
                         Emp...
Performance
30,000 ms

            Milliseconds to replace 120 elements on a popular homepage
                         Emp...
Where are they going?
Facelift
 supercache plugin, css sprite plugin,
 eventually no-JS option


Cufón
 rtl & bidi, text r...
Conclusions
sIFR?
Doesn’t instantiate until visible in non-IE.
Difficult configuration.
Requires flash

Not great with foreign/special...
sIFR?
Doesn’t instantiate until visible in non-IE.
Difficult configuration.
Requires flash

Not great with foreign/special...
Facelift
Font file safe, good for the IP-cautious
Lots of possible effects thanks to Imagemagick

Requires PHP
Many images...
Facelift
Font file safe, good for the IP-cautious
Lots of possible effects thanks to Imagemagick

Requires PHP
Many images...
Facelift
Font file safe, good for the IP-cautious
Lots of possible effects thanks to Imagemagick

Requires PHP
Many images...
Facelift
Font file safe, good for the IP-cautious
Lots of possible effects thanks to Imagemagick

Requires PHP
Many images...
Typeface.js
Still rather buggy
Absent developer
Quiet community
Quality/Performance is inferior to Cufón
Typeface.js
Still rather buggy
Absent developer
Quiet community
Quality/Performance is inferior to Cufón
Cufón
Better optimization for IE == better performance
Glyph tweaking for type nerds
Active developer and community
Cufón
Better optimization for IE == better performance
Glyph tweaking for type nerds
Active developer and community
Rich Typography Options for
                        the Web

More:
http:/
     /paulirish.com/type

Me:
http://paulirish.c...
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Rich Typography Options For The Web - or - Why sIFR is Dead in 2009
Upcoming SlideShare
Loading in...5
×

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

8,080

Published on

Published in: Technology, Art & Photos
1 Comment
22 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,080
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
111
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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×