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.
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

9,402 views

Published on

Published in: Technology, Art & Photos

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

×