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:

Force-redraw DOM technique for WebKit-based browsers

Something I’ve tried when I had an issue with Safari 4 not properly layouting/rendering an element after setting a new value for its innerHTML:

element.style.webkitTransform = 'scale(1)';

This did the trick and should work with Safari, Chrome and other browsers that are based on WebKit.

If you need a more general solution for elements that don’t seem to render properly, try my text-node based trick.

Seems that browsers are a little bit too optimized, but as long as you can give them a nudge…

JavaScript Rocks! Performance ebook is final

Our book is ready for your download pleasure! And it’s packed full of info on all the tricks we use to make our apps and sites fast and snappy.

Co-written by Amy Hoy and me, it’s over 300 pages and is actually three books and our DOM Monster, a bookmarklet-based cross-browser performance evaluation tool.

Part 1: Dude, Where’s My Performance?

Get started with knowing what this is all about, why it is important and how to measure performance and master all the tools.

Part 2: Loadtime, or, The Land of Unicorn Tears

Loadtime is a sad time, a time of of enormous, slow-loading assets; of maxed-out request queues; of bloated, waddling DOMs. Of limp white screens. Most of the world’s worst web performance woes? They live and breed in Loadtime.

Part 3: Runtime, Cuz Tuning Loops Is Hardcore

See how to write slicker, sexier, faster JavaScript from the get-go. Micro-optimize without being premature. Learn the kinds of ridiculous optimization tactics that Gentoo tuner boys can only dream of. And yes, we’re teaching you how to unroll loops.

We’re totally framework-agnostic, so everything’s applicable to any and all JavaScript code out there! Whether you use Prototype, or jQuery or dojo, you’ll find that our tuning tricks can help speed things up!

And… introducing…. the… DOM Monster! See for yourself!

We’ve an introductory price for the first 500 copies we sell of $39, after that it will go up to $49!

P.S. After the great success of our JavaScript Master Class in Washington, DC, we’ve decided to do a Master Class in Europe, too. We’ll announce details soon!