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

11. So then what?

12. The Landscape
sIFR
Facelift
typeface.js
Cufón

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

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

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

18. http://www.sifrgenerator.com

19. http://www.sifrvault.com

20. http://bit.ly/facelift

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

22. http://bit.ly/typefacejs

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

24. http://www.madasplayground.com/fonts/
~300 fonts in typeface.js format

25. http://bit.ly/cufon

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

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

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

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

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

33. Comparison
Table!!!

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

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

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

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

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

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

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

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

42. Where are they going?
Facelift
supercache plugin, css sprite plugin,
eventually no-JS option
Cufón
rtl & bidi, text rotation

44. Conclusions

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

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

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

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

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

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

51. Typeface.js
Still rather buggy
Absent developer
Quiet community
Quality/Performance is inferior to Cufón

52. Typeface.js
Still rather buggy
Absent developer
Quiet community
Quality/Performance is inferior to Cufón

53. Cufón
Better optimization for IE == better performance
Glyph tweaking for type nerds
Active developer and community

54. Cufón
Better optimization for IE == better performance
Glyph tweaking for type nerds
Active developer and community

55. Rich Typography Options for
the Web
More:
http:/
/paulirish.com/type
Me:
http://paulirish.com
http://twitter.com/paul_irish