Scalable Inman Flash Replacement
(image from MikeIndustries.com)
Typography can do a lot to spiff up a web page, and since the Web has made huge strides in catching up to Print in terms of visual style and design practices, web designers and developers have sought ways to go beyond the limitations of the standard Fonts installed on most computers, such as the all-too-familiar Arial, Verdana, Trebuchet, Georgia, Courier, Times New Roman, etc …
Although there’s not yet an alternative to the standard fonts when it comes to Body Text, there are a couple of Replacement Techniques that will allow you to achieve Rich Headings in your HTML that will breathe new life into your pages and make them stand out. What are these Techniques and how do they work ?
Image Replacement has been used for years and in a variety of ways, the most popular method using CSS to move the text between the header tags off of the page with the text-indent property, and then giving the Header a background image. So, the HTML markup and CSS would look something like this:
Applying the text-indent property with a value of -9999 moves it well off to the left of any screen so it’s not visible, because what you want to actually see is the background image, which is the title you created in Fireworks or Photoshop in the font and style of your choosing. And of course, you have to ensure that the Header element (h1 Tag) is given a height value that matches the image’s height so the whole image is displayed.
Now the major disadvantage to this Technique is the time consuming task of having to create every title in a Graphics editor, because depending on the scale of your project this could become a considerable time factor ……… so what’s a better alternative ?
Scalable Inman Flash Replacement was created by Mike Davidson and Mark Wubben and has been around since 2004, so it’s not a new phenomenon, but if you’re relatively new to Web Design chances are you haven’t heard of it.
It’s an open-source (free) set of files that employs javascript which will scan specified text within your pages, copy that text, and then use it within a Flash object (swf file). The Replacement Font exists within the Flash file, so all you have to do is create the Flash file, and then tell the javascript file which Headings to replace (Hide).
If the user doesn’t have Flash installed on their computer, the Javascript detects it and the original text is used, and of course if the user’s javascript is turned off, then again, the original text within the Header tags is still used.
This sounds pretty complicated, and it is, but actually setting it up and using it isn’t that difficult once you learn how.
Now, you’re probably already saying, “but what if I don’t have Flash ?” Well, that’s covered too … not by me, but by some very talented and resourceful people. Check out a website called Fontsmack which is a sIFR Font repository where you can view and download some cool flash fonts for your web pages.
An example of a sIFR Header can be seen in the Header of this very website … I use it for the title “Wide World Of Web Design“.
Here is a link to another example where you can see the technique employed throughout the whole page, demonstrating a variety of Header styles . . .
So, now what ? To get started, make sure to go to Mike Davidson’s website for an overview from the creator where you can also download the sIFR files and visit a Support Forums.
Then, I would encourage you to visit DesignIntellection.com and follow their recent tutorial on how to get sIFR to work . . . and after visiting some of these and other example sites, you’ll start to gain a whole new appreciation for the power of typography and how it can transform your web pages . . .
