Top Killer Text Replacement Tricks to Improve your Typography

Typography has long been a large part of graphic, and web design. In the past though, web design has had to suffer typographically, with any text that was wanted in a non web safe font (a font already stored locally on users computers) had to be rendered as an image; not exactly brilliant for the user interface department. Font’s like Lucida Grande, Helvetica and Myriad Pro were as exciting as it got. Not any more though.

Over the last few years we have seen the rise of some fantastic tools to allow us to get creative with the typefaces we use on our websites. There are really two mainstream approaches here; @font-face, and of course, Flash. All of the solutions available have their drawbacks; not all are free for instance, but one thing is for sure; They are all advancing web typography for everyone. Let’s get stuck in and see what options are available to us to use different fonts on the web.

1.Google Font API

Google recently entered the font replacement game with their free Font API and font directory. It is still a beta lab product, but is incredible easy to use, and loads the fonts on Google’s back, just like has become common for loading Jquery these days. The problem with Google Font API, is its font directory though. There are only 19 fonts currently available, and compared to other options that are only limited by the amount of free fonts that you can find, this is fairly lacking in choice.

However, like most of Google products, it is a fantastic piece of engineering, and is incredible easy to use. All you have to do is include a dynamic  file in the head of your document, and from there, you are free to use the font anywhere in your css. The syntax allows you to load multiple fonts, different font variants and so on in the same single line which is fantastic. The following line, for instance, would load Cantarell italic and Droid Serif bold.

view source

print?

1	<link rel="stylesheet" type="text/css"  href="http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold" />

To learn how to implement the Google font API, Jeffrey Way at Nettuts has made a fantastic quick video.

2. Typekit

Typekit is a premium web font replacement service, with a useful free plan on a limited selection of fonts. They work with foundries from all over the world to provide their users with the best selection of fonts possible, and this shows with the number of fonts they are able to provide compared to other services; nearly 500! Some of the most influential web designers on the internet use it, and that’s testament to its quality and delivery.
Typekit aims to make using custom fonts in your web design as easy as possible, and so offers two ways to implement your chosen fonts into your website. The first is via the kit editor. This Kit Editor is for those that are a little less web language savvy than some of us, and instead of having them hand code the fonts into their design, it asks you what selectors you want the font applied to (class’s, id’s, elements), and by clicking publish, Typekit will sort everything else out for you via the one line of code you insert into your html document.

The other option provided to you is not to use the Kit Editor, but hand code the fonts into your css yourself. Once you’ve included the one line of code in your document, the font name will be recognised and loaded!
If you are willing to pay premium for your web fonts then, this is the way to go. The range of premium and free fonts that you have access to, and the ease of implementation is incredible. A portfolio price plan weigh’s in at $49.99 a year, so it is all about weighing the pro’s and con’s of what you are getting with that, and whether the fonts you want to use are available under other font replacement techniques.

3. Google Font Loader

The Google Font Loader is a secondary part of the Google font API; a Javascript library that gives you more control over font loading than the Google Font API does. Co-developed by Google, and Typekit, it allows you to load fonts from multiple font providers, including Google, Typekit, and Ascender, as well as pretty much any custom site you want.
What the font loader does, that the Google Font API doesn’t is applies class’s to the page while the font’s are loaded, and after the font is loaded, allowing you specify a font to render in while the font loads. This is not supported in the Google Font API however, where for example, Chrome, IE and Safari will just not render the text until the font loads andFirefox will render the font in the browsers default font until the font loads causing a flash of unstyled text.  Although you may still get a flash with Google Font Loader, the change won’t be so drastic as you’ll be able to choose that default font.
To learn how to use the Google Font Loader, Google have written a great guide here.

4. FontSquirrel

FontSquirrel is more of a database of free font’s, but it comes with a fantastic integration for font-face, a css way of serving web fonts. Google and Typekit use font-face, although it is far more refined via server sided scripts, and javascript. FontSquirrel however, is pure CSS. Once you browse the incredible directory of free fonts (theres 610 of them at the time of writing this!), the site will tell you if the font license allows you to use it with font-face, and on most fonts, there is a pre-built tab where you can instantly download a font-face kit for that font, which will then take you only a few seconds to implement into your css.

For those font’s that aren’t provided with a font-face kit, but are still font-face compatible, or font’s that font-squirrel is yet to come across, there is also a free font-face kit generator available! Simply upload your font file, and the generator will pretty much do the rest, unless you are looking to customise your kit a bit. This is by far the easiest, and best free way to implement a fantastic set of fonts into your website in my opinion. The ease of use, and speed of implementation is incredible.

5. sIFR

sIFR stands for Scalable Inman Flash Replacement, but its basically a technology that replaces your text with a flash replacement, styled in your required font. It does require javascript and flash to be enabled; if not, then your css defined font will be used. sIFR does however seem fairly complex to set up; you have to create a flash file of your font, load javascript, and then choose what elements you want to font replace via javascript. The problem though, is that sIFR is heavy, so causes pages to load slower, and of course, doesn’t work on most mobile devices.
However, like font-squirrel, and it’s font-face kit generator, it doesn’t limit you to a select library of fonts like the Google Font API does, and so provides much more versatility. Unlike the font-face alternatives above though, sIFR should only be used for small pieces of text, like headings. Using it on your whole site will seriously damage your site’s download time, and usability.
To learn how to use sIFR, and see an example, this tutorial seems to cover it all!

6. Cufon

Before font-face came along and became mainstream, the main rival to sIFR was Cufon. Instead of using flash, cufon used javascript, and makes use of elements such as the canvas tag on most browser, and VML in Internet Explorer. This means its more lightweight than sIFR, but still, it’s only really suitable for headings. While the text is selectable, it’s fairly buggy in that aspect. Like sIFR, there is no preset font library so you’ll be making your own kits via the Cufon Generator.

You upload your font (with different variants if require), choose your characters, and then optimise your performance (quality), and file size for your site. Once this is done, you’ll need to include cufon javascript file, as well as your generated font file, and then choose what selectors you want to apply the font to. Definitely not as tidy as some of the font-face examples. It is however, compatible with most javascript libraries, so with their support, your selectors can become more dynamic.
If you want to use Cufon, Jeffrey Way from Nettuts has written an amazing article on how to, complete with video!

Further Thoughts

Cufon and sIFR are slowly dieing out due to the massive surge of interest, and popularity of the font-face solutions; Font Squirrel, Google Font API and Loader, and Typekit. However, with their rendering not top-notch in all current modern browsers, Cufon and sIFR are often the go to technology for beautifully rendered headings. I hope this article has given you an insight into the technologies available to you. They’re the best that I know of, but if you happen to have a further solution, or want to express your opinion, start the discussion rolling down in the comments!