textorize: Pristine Font rendering for the Web

Update October 6, 2009: http://textorize.org is now live and the main resource for the textorize project!

We all want really nice looking web typography, and there’s a ton of solutions out there. Here’s mine. I’ve to warn you, it’s very lo-tech. It’s done with images. But with really nice ones.

In the image above, note how the textorize version is much more consistant and “clear”, where as the Photoshop-generated text has fuzzy fringes and varies in clearness. For example, compare the bottom of the “a” in “readers”, and the “l” in “mir.aculo.us” between the versions.

View the presentation on how this compares to Photoshop, ImageMagick, sIFR and cufon, and why subpixel antialising is so awesome:

It all boils down to a Ruby script that runs on OS X only and uses OS X’s really awesome typography and subpixel antialiased font rendering. Why not tap into this to make those headline graphics? With Rubycocoa you can easily whip up a small app that draws some text, and save it into a PNG file.

On OS X, just do a:

$ gem sources -a http://gems.github.com
$ sudo gem install madrobby-textorize

You can then call and generate images by:

$ textorize -f"Hoefler Text" -s30 "Hello mir.aculo.us readers"

Images are by default rendered into a output.png file. The command line interface is great for integrating it into build tools, for example we’ve a list of graphics to generate that a capistrano task handles for us (I’d love to release this as a Rails plugin, too). There’s more options of course, e.g. to customize colors.

Voilà, really nice and pristine headline graphics, without the suck of ugly Photoshop typograhy or tons of plugins and complicated font conversion. And don’t get me started on all the license issues.

Interested in the source? It’s all licensed under a MIT License, and put on Github for your forking pleasure.

Big thanks to @kastner and @levinalex for helping me get this to work!

Update October 1, 2009 Some people have asked for how this compares with “
Typekit. I do like Typekit as it tries to make good use of the @font-face CSS property, however there are problems with browsers’ font rendering engines themselves. Here’s an example on what I mean, Firefox 3.5 on Windows doesn’t do a great job of rendering subpixel antialiasing: