The Fight: Typeface.js vs. sIFR – Who will win?
Oct 29 2008
To be able to use custom fonts on the web without making it an image or using tricks to manipulate it would be a dream come true for most designers and developers. That dream has slightly come true but not quite all the way.
The Contenders:
In the left corner you have Typeface.js, which offers a solution for custom fonts to be displayed on the users system with a few lines of javascript, CSS for styling and doesn’t require Flash.
In the right corner you have sIFR (Scalable Inman Flash Replacement), which also offers the same role with displaying custom fonts, but is created in Flash and embedded into HTML with the help of Javascript and CSS for styling.
Contenders Background:
Typeface.js
Advantages:
- User doesn’t have to have Flash plugin installed on their browser
- Easier to create with just a few lines of Javascript
- For page loading it just needs to load the Javascript.
Disadvantages:
- Text is not selectable because it outputs it like an image. I looked at some examples, right clicked on a word and had to view as an image. Every single word had this behaviour. Big thumbs down.
- Usage for body copy will slow down loading time, so it is recommended to use only for headlines.
- Cannot be read by screen readers
- Visual looks blurry
- Not all browser compliant and still has a lot of development left to be done
sIFR
Advantages:
- Can be read by screen readers as a normal headline because it is a behaviour layer on top of the markup and styling.
- Text is selectable
- SEO friendly
- Displays text as is like any other web font. Crisp and not blurry!
- Has addons like jQuery sIFR Plugin!
Disadvantages:
- Requires Javascript to be enabled
- Flash plugin must be installed in the browser
- Need Adobe Flash Studio to create it BUT there is a pretty nifty sIFR generator that creates the file for you!
- For page loading, it has to request for Flash, Javascript and CSS files attached to it, which can potentially get bogged down if you are using sIFR in too many places.
- Cannot display on an iPhone. Yet…
So tell me who wins?
No one really does. The advantages and disadvantages were pretty equal from my research and it really just depends on your situation and usage. Personally, I think sIFR threw in more punches because it has the technical background to support it, but Typeface.js is a lot easier to implement. You can’t have everything you want right?
Resources:
http://ajaxian.com/archives/typefacejs
http://css-tricks.com/typefacejs-a-sifr-alternative/
http://wiki.novemberborn.net/sifr
http://en.wikipedia.org/wiki/Scalable_Inman_Flash_Replacement
Posted by Mai at 2:02 PM
Published in Design, Development on Wednesday, October 29th, 2008
Tags: Flash, fonts, JavaScript, sIFR, typography
October 29th, 2008 at 2:35 pm
Thanks! This is a really good run-down. I know that we’ve used siFR for at least one client project that I’ve worked on. We used it for one headline per page; so there wasn’t any issue with load time. The only thing that is slightly jarring is that you can see the “unstyled” text momentarily while flash loads.
October 29th, 2008 at 2:38 pm
I think Don used SIFR(CYPHER)for PenScrappers.com and it rocked!
October 29th, 2008 at 2:40 pm
[...] Fresh added an interesting post today on The Fight: Typeface.js vs. sIFR – Who will win?Here’s a small reading … laces. Cannot display on an iPhone. Yet… So tell me who wins? No one really does…. [...]
October 29th, 2008 at 3:58 pm
Nice breakdown! No matter which option you use text replacement like this seems so much better than using images as text headers (which should really be the only instance where you’d want to use these techniques, right??). I think the inability to select the text can be overlooked as long as you are only swapping text in headers. The GREAT thing about both of these is: painless SEO – no worrying about alt tags in image header text. Thanks Mai!
October 30th, 2008 at 3:37 am
To be fair, Typeface has the same disadvantage as sIFR in its reliance on JavaScript. The alternate text issue could easily be solved in the same way as sIFR does.
Typeface also requires a font file to be converted to some JavaScript data, much like sIFR requires a font file to be converted to a Flash movie.
In essence, Typeface is quite similar to sIFR, aside from using JavaScript and Canvas to render the typeface, instead of Flash.
I also think that with the most recent sIFR 3 build, sIFR has become incredibly easy to use. The horrors of font tuning in sIFR 2 are past us.
@verity, the flash of HTML text is due to a poor implementation of sIFR, you need to add a little bit of CSS to hide the HTML text before it’s replaced by the Flash movie.
October 30th, 2008 at 11:49 am
Thanks Mark! :)