Innovative and curious as the developers are Pro Web Marketing are, we’ve found several alternatives that can avoid the downsides of traditional solutions.

Fahrner Image Replacement

Fahrner Image Replacement is a technique that was originally thought up by Todd Fahrner, but it is simple and obvious enough that many other designers and developers have thought of it on their own (Us included!)  The idea is that you may use CSS (Cascading Style Sheets) to “Hide” the heading, and superimpose the graphic version of that text over it.  This is good for basic header replacement, but it requires a lot of manual work.   The text is also impossible to “copy” for an end-user, which is bad for accessibility.

…Read more about FIR

(Scalable) Inman Flash Replacement (sIFR)

sIFR is a technique which uses Adobe’s Flash Player to replace text with a dynamic flash layer automatically.  It utilizes Flash, JavaScript, and CSS to create what is probably the most full-featured option to show your fonts in their full glory.  The only downsides?  It is a real pain to set up, and it requires that your users have a modern version of the flash player.  It can also cause havoc on slower PCs!

…Read more about sIFR

Cufon – My personal favorite!

Cufon is a project designed to replace sIFR.  It uses JavaScript and a custom “Generator” to create a script directly from your font.  All you have to do is generate the script, include it, and deploy it at specified selector tags (headings, etc).

Cufon works in all major browsers and does not interfere with any text interaction such as copying and pasting, and even allows for perfect search engine spidering.

Check it out here

Looking to the future – CSS3 and Modern Browsers

CSS3 includes the “@font-face” property as part of its specification.  This will allow developers to specify which font they want to use by uploading a copy of it to their server.  The code will work like this:

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

Once all major browser vendors have implemented this into their specification, this technique will become more popular.  Learn more about the spec here.

Conclusion

Using non-standard fonts still requires a bit of extra work at this point, and all of these techniques should only be used sparingly.  Your pages main body text should still be a web-standard font, for most cases.

So with all that being said lets talk a moment about good Typography practices. Every web page or design needs to first start with a clear a readable font. I mean readable especially at smaller text sizes. When you have smaller text your height or “x-height” as we call it needs to be higher and also the space between the letters needs to be a bit larger. Ok now for contrast and why we thrive on it. It is important to keep in mind that you should switch it up and have different types of fonts in a design to generate interest and a personality. But don’t go crazy with this idea because some fonts can just as easily resist each other. But also having them very similar will not create enough contrast which can make for a weak design. So I recommend keeping it simple and fun. Sans serif fonts are great for heading areas to display call to action for posters, flyers, business cards and many other print work. These sans serif fonts can be read easily when larger in size and the letters are closer together. Serif fonts are better for body copy and smaller heading areas. Hope this information helps with any of your Typography questions.