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 - Presentation Transcript

Rich Typography Options for the Web or Why sIFR is Dead in 2009 Paul Irish Molecular Inc. Emerging Interactions & Front-end Dev

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 are a go Still unresolved, licensing issues with commercial foundries

So then what?

The Landscape sIFR Facelift typeface.js Cufón

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.

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) 2. Reading style properties through getComputedStyle() 3. Calling generate.php with text and style parameters 4. Placing PNGs

http://bit.ly/typefacejs

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

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

Comparison Table!!!

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

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

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

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

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

Performance 30,000 ms Milliseconds to replace 120 elements on a popular homepage Empty cache. Average of ﬁve runs. 22,500 ms 15,000 ms 7,500 ms 0 ms sIFR Facelift Cufón typeface.js Firefox 3 IE 7 IE 6

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

Conclusions

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

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

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

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