Bringing Typography to the Web with sIFR 3 at <head>

Web Typography FTW With sIFR 3 <head> conference Oct 26, 2008 Mark Wubben supercollider.dk cc-by-sa-2.0

Plan Web Typography Alternatives sIFR

Questions!

Yesterday (and Today)

~1997 IE 4 with proprietary EOT NS 4 with proprietary TrueDoc from Bitstream

CSS Web Fonts Speciﬁed in CSS 2 Removed in CSS 2.1 Back in CSS 3, dormant since 2002

Tomorrow?

Jason Teague CSS 3 Web Fonts Module Safari 3.1 Supports Font Linking Soon Firefox 3.1, Opera 10

Font Linking

@font-face { font-family: \"GraublauWeb\"; src: url(\"/GraublauWeb-Regular\") format(\"truetype\"); }

h1 { font-family: \"GraublauWeb\"; }

http://alistapart.com/d/cssatten/poen.html

Font Linking Easy! But, large ﬁles Original ﬁles!

Font Piracy?

Unexpected Hero?

EOT Different format Domain locking Subsetting Compression

Obvious Villain?

Text Replacement

Images

http://facelift.mawhorter.net

Flash

Image Replacement Font remains on server No Flash!

Image Replacement Server-side code Images are static No real text

Flash Replacement Font only for Flash export No server-side code Actual text Flash is dynamic

Flash Replacement Flash… (Can be) CPU intensive Links suck Flash text isn’t browser text

SVG Silverlight

Questions So Far?

scalable Inman Flash Replacement

abriefmessage.com

labs.iamkoa.net

jasonsantamaria .com

seedconference.com

sIFR?!

Spring 2004 Shaun Inman

Inman Flash Replacement

Summer ’04, scalable IFR

Spring ’05, sIFR 2.0

sIFR 3?

Progressive Enhancement HTML JavaScript? Flash? Browser? sIFR!

New Since 2.0

Applying sIFR Site HTML? CSS JavaScript sIFR!

Site

Site HTML?

Site HTML? CSS

.sIFR-active h1 { font-family: Verdana; line-height: 1em; visibility: hidden; /* Forces sIFR text to work nicely with floated image, at least in this scenario */ display: inline; }

Site HTML? CSS

Site HTML? CSS JavaScript

var fgm = { src: 'franklin-gothic-medium.swf' }; sIFR.activate(fgm);

sIFR.replace(fgm, { selector: 'h1', css: '.sIFR-root { color: #000000; } \\ .head { \\ color: #0068A3; \\ }' });

Site HTML? CSS JavaScript sIFR!

Behind the Scenes

Hyperlinks

<h1><a href=\"/\">Home</a></h1> sIFR.replace(rockwell, { selector: 'a' });

<h1><a href=\"/\">Home</a></h1> sIFR.replace(rockwell, { selector: 'h1' });

<h1><span><a href=\"/\">Home</a></span></h1> sIFR.replace(rockwell, { selector: 'span' });

Questions So Far?

Making sIFR Rock!

Debugging

Ratios

sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }' });

sIFR.debug.ratios(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }' });

var rockwell = { src: 'rockwell.swf', ratios: [6, 1.41, 9, 1.35, 15, 1.29, 21, 1.25] }; sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }' });

Tuning

sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }', tuneHeight: 8, tuneWidth: 1, offsetTop: 4, offsetLeft: 2 });

sIFR.replace(rockwell, { selector: 'h2', css: '.sIFR-root { color: #FFFFFF; }', fitExactly: true });

Glyphs

Glyphs Normal Bold Italic Italic & Bold

Glyphs lowercase UPPERCASE !@#$%^&*(){} åæøéüîãàç

Domain Binding

class Options { public static function apply() { sIFR.domains = ['*.example.com', 'example.com']; } }

var rockwell = { src: 'rockwell.swf' }; sIFR.domains = ['*.example.com', 'example.com']; sIFR.activate(rockwell);

Next for sIFR

Resources 11born.net/sifr3 11born.net/sifr3/wiki 11born.net/sifr3/forum 11born.net/sifr3/nightlies

Thanks! 11born.net/head08

Many thanks to these wonderful Flickr photographers: Jeremy Keith Ralph Aichinger antiﬂuor Zara J Stig Nygaard Sharat Ganapati Rex Sorgatz Eduardo Arcos Ed Schipul Hashir Milhan Wolfgang Staudt Andrew Becherer Jesus Solana Jeff Kubina David Goehring Germán Meyer Lali Masriera

Bringing Typography to the Web with sIFR 3 at <head>

91 comments

Notes on slide 1

9 Favorites