Text Replacement Roundup: The Pros and Cons of SIFR, Cufon, Typeface.js, and FLIR
Text Replacement Roundup: The Pros and Cons of SIFR, Cufon, Typeface.js, and FLIR
|
|
Those of you who have explored rich typography solutions for web development should be very familiar with the different techniques floating around the Internet. Until majority of the population uses browsers that support CSS3, and until commercial font licensing issues allow use of the @font-face rule to become a norm, many resort to these font embedding techniques.
The thing with non-standard font embedding techniques is that they mostly rely on JavaScript and sometimes Flash or PHP to render text in whatever custom font is specified. Thus, choosing the right solution for a web project can become tricky. This article aims to compare them by listing the pros and cons of each technique.
Scalable Inman Flash Replacement (sIFR) / sIFR 3
Probably one of the first full-blown text replacement solutions, SIFR uses a combination of JavaScript, CSS, and Flash to render custom fonts.
Pros:
- Fully accessible to screen readers and assistive technology
- Partially selectable text (cannot select surrounding elements)
- jQuery integration
- Anti-aliasing results in crisp font rendering
- Flash-based font embedding is generally an allowable practice by most font foundries
- Easy to add text effects such as shadows in Flash
Cons:
- Requires Flash
- CPU and memory intensive
- Font license restrictions can be difficult to set up (e.g. Flash loading needs to be locked to your domain)
- Can be tricky to set up
- Embedded fonts cannot be printed
Cufon
Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use.
Pros:
- Easy to set up
- Does not require Flash
- Fastest loading and processing time (according to this presentation)
Cons:
- Inability to highlight and copy/paste text
- License issues prevent many fonts from being legally embedded
- Does not support justified text alignment
- Hover state for elements other than links might result to unpredictable results
- Requires extra JavaScript to prevent FOUC on IE7
Typeface.js
Typeface.js is similar to Cufon, using a JavaScript engine to render fonts on a browser using canvas or VML.
Pros:
- Easy to set up
- Does not require Flash
- Fast loading and processing time
Cons:
- Fonts are only selectable in browsers that support <canvas>
- Hover state is not supported, but a workaround that requires extra code is available
- License issues prevent many fonts from being legally embedded
- Long loading times in IE
- Only supports TTF (does not support .otf, PFB, and postscript fonts)
- Requires extra JavaScript to prevent FOUC on IE7
- Has spacing issues, according to some people
Facelift Image Replacement (FLIR)
Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that uses JavaScript, PHP and the GD library to dynamically generates image representations of text that use custom fonts.
Pros:
- Does not require Flash or JavaScript
- Fonts are rendered as an image and does not violate font licensing terms
- Many text effects available thanks to Imagemagick
Cons:
- Inability to highlight and copy/paste text
- Can be painful to set up
- Requires a web server with PHP and the GD library enabled
- Finer details of fonts are not rendered very well by the GD library
- Takes up additional server resources to process (bandwidth and CPU)
The good thing about these techniques is that they all take into account things like accessibility, SEO readiness, and browser support. These are all huge factors in web development today. For Internet Explorer users, IE6 is supported at least, and for non-supported browsers, thankfully every one of them degrades gracefully into your standard HTML rendered text.
In conclusion, every one of these techniques has its own set of advantages and disadvantages. sIFR is the oldest and most “proven method”, however it relies on both Flash and JavaScript thus taking a hit on performance. FLIR uses the old school technique of replacing text with images and even offers text effects. However, it is hardest to set up and requires a web server with PHP and the GD library enabled.
Typeface and Cufon are the most promising beign the easiest to setup. On the other hand they are both plagued with licensing issues and lack of ability to select text, which for many can be a deal breaker. This appears to be changing though, as Type Select builds on top of typface.js and promises text selection functionality. Still, it is a relatively new player and is also plagued by limitations such as lack of support in IE and no support for :hover and line breaks.
Similar Posts
- 16px default main text size
- Partial 26px baseline grid
- Serif for Heading, sans-serif for the paragraphs
- Lower color text contrast
- Intensified paragraph division (new line + indent)
- Bigger leading (line-height) 1.625
- We maintain the book standards (12pt) for font size on the web (12px). But the distance from the monitor is triple. Just put your newspaper to your monitor and try to read. Hell! Is hard!
- Additionally the paper reflects the light and monitor emits the light. If you have old “cathode” monitor it’s like looking directly in a light bulb.
- You also have distraction noise: strong colors, links, flash animation, banners , not defined site architecture, click here, digg me, follow me on twitter, by my products… it’s fucking jungle out there.
- Typography
- Absinthes to Go Mad Over – NY Times
- An American Prayer – The Doors
- Critique of Pure Reason – Immanuel Kant
- Excerpt from No Way To Paradise – Charles Bukowski
- How To Sniff Out A Liar – Forbes
- Hubble – Ars Technica
- One Day in Spring – Rabindranath Tagore
- Shaman’s Blues – The Doors
- Tarantino – NY Times
- The Alchemist – Paulo Coelho
- The Last Question – Isaac Asimov
- The Raven – Edgar Allan Poe
- Viva Las Vegas – Elvis Presley
Easy CSS Image Replacement (Phark) – DoMedia
A quick and easy way of doing an image replacement technique with CSS … An increasingly popular technique is an Image Replacement techniques with CSS. …Easy CSS Image Replacement (Phark) – DoMedia
A quick and easy way of doing an image replacement technique with CSS … An increasingly popular technique is an Image Replacement techniques with CSS. …" Yet Another Image Replacement Method :: CSS, JavaScript and XHTML …
Semantic CSS Image Replacement … I place all of my image replacement css in a media=”screen” … The CSS for the Image Replacement class: …" Yet Another Image Replacement Method :: CSS, JavaScript and XHTML …
Semantic CSS Image Replacement … I place all of my image replacement css in a media=”screen” … The CSS for the Image Replacement class: …Absolute, Relative, Fixed Positioning: How Do They Differ?
Tips, Tricks, and Techniques on using Cascading Style Sheets (CSS) … Absolute Positioning Inside Relative Positioning. Nine Techniques for CSS Image Replacement …Featured CSS Library: Better Web Readability Project
The Better Web Readability Project aims to promote screen-friendly and more readable fonts. The result is a CSS library that redefines, among others, the standard font size as well as leading (the amount of space between text). Other features of this library are:
The original idea came from Vladimir Carrer, who also came up with the library. In his post entitled How we read on web and how can we improve that he reveals that most of us who use computers to read news, blogs, and various sites end up scanning rather than reading. He then compares reading a book to reading on the monitor, and provides three reasons why it is harder to read on a computer screen:
He then comes up with a set of standards and rules that would allow for better and easier on-screen reading, and packages it as a CSS library. The resulting text is beautiful and pleasing to the eyes. One such example can be seen in the screen shot below. You should notice how your eyes would easily glide through the text:
You can head over to the project homepage, or click on the links below to view the library in action:
You can also head over and download the full library here.
Non-Flash Peeling Page Effect Using jQuery & CSS
The Peeling Page is an effect is normally used by advertisers to show advertisements that would otherwise occupy space that is larger than what is available on a page. It is very slick, and is normally implemented in Flash. This script on Flashden costs $4, though there is a free tutorial available. The thing about the Flash version is that it uses both JavaScript and Flash, which may not be everyone’s cup of tea.
This is where Soh Tanaka’s jQuery + CSS idea comes in. It uses simple CSS and jQuery to mimic the Flash version, which can possibly translate to faster development and maybe even faster loading pages. The tradeoff is the absence of any extensive banner animation — something that can only be done in Flash. However, I believe this solution is worthy of a look, at least for those in need of a quick peeling page component for their project.