textorize: Pristine Font rendering for the Web
September 29th, 2009 by Thomas Fuchs, 70 comments »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:
Tweet This Post 
Digg This Post 
Share on Facebook
by Christophe Porteneuve, which is a great reference book for Prototype and script.aculo.us development.
How does this compare to something like Typekit?
Maybe type delivery services could serve Textorize-generated images as a backup, for browsers that don’t support @font-face?
Bulk updating Gem source index for: http://gems.github.com
ERROR: could not find madrobby-textorize locally or in a repository
:/ What am I doing wrong?
I’ve actually never thought about Photoshop’s sub-optimal text rendering.
I just fired up Pixelmator which seems to produce better results, but I’m not qualified enough to compare Pixelmator to textorize.
Any thoughts on this?
A lot of designers have though. It’s awful!
Pixelmator uses OS X’s text rendering, so it should be better than Photoshop’s. I don’t think OS X can use sub-pixel rendering in cases where it’s generating text on a transparent background (ie a layer in Pixelmater), so I suspect textorize might do a better job.
Related: I’ve created text using HTML pages in Coda, then screen grabbed them to make an image heading for websites before. OS X’s text rendering is so much nicer than Photoshop’s. Well worth the effort some times.
Never mind. I downloaded the source and built the gem locally and just installed it that way. Thanks!
Very good results indeed, very bright idea !
I’m not a programmer and I might not get the obvious here, so excuse for this possibly misplaced question : how can this tool evolve so it can deal with letter spacing and colors (letters and background) ? I’d really love to track this down.
I had the problem of getting bad results using imagemagick through php. Since my customer wanted to have at least PS “crisp” results I ended up with rendering the headlines in very big letters ( 144px+) and scaled it down afterwards. Don’t know if this generates sub-pixel AA as a side-effect but the results were as good fonts on OSX.
You can visit her site, using the same font, Hoefler-text, at: http://www.agenturfuerworte.de/
It doesn’t generate images with transparent background. Sad.
It should be fairly easy to extend this to take rich-text input as well, since the same Mac OS X text facilities can read RTF, HTML, etc.
Great stuff. Just remember to use your alt attributes so everyone can read it.
@Dominik That’s actually my biggest gripe with it. I’ve experimented with transparency, but couldn’t really find a good solution (this is akin to Pixelmator not supporting subpixel antialiasing for text layers).
Any ideas (or code!) are welcome!
In PhotoShop I always use a mix of the different settings to generate better type-images. Just copy the Textlayer and use a different setting. Use opacity to mix. Infinite possibilities if you use ven more layers.
It might not be all that difficult to port to Linux assuming their are Ruby bindings for the Freetype library which, I believe, also supports sub-pixel anti-aliasing.
Nice work, but…not completely fair on the sales pitch – how is this less converting work in comapare to Cufon? Generating a Cufon-font took me 30 seconds on first try, and 3 lines of code to implement application wide. Also Cufon supports transparency, I18n, and easier/faster to load (and cache).
If you’re doing sub-pixel antialiasing, don’t you need to know the order of the red, green and blue sub pixels of the user’s display? Is this consistent?
@grimen Cufon won’t give you subpixel antialiasing nor is the licensing issue solved. In most cases (where only a couple of headlines use it), images are also smaller and cache better than the .js files cufon uses; plus the client has to render everything on load.
@Josh: I think that’s a none-issue because most LCD displays use the RGB order– I researched some but couldn’t find hard data on the actual percentage, tho. I know that some screens, like the OLPC laptop use different patterns altogether.
@Brian Yes, it does. An overview of how this works can be found on http://en.wikipedia.org/wiki/Subpixel_rendering
It’s easy to see the limits of this method: in your display preferences, set your LCD to rotate 90 degrees. The red and blue sub-pixel bands on either side of the glyphs suddenly stand out.
This may have been the most convenient for you, Tom, but it sure gouges the Windows and Linux programmers. I guess the rest of us need to do sub-pixel rendering by hand?
This seems like a bad idea in my opinion.
Firstly, it assumes that the display is using RGB stripes. Many LCD panels do not use RGB stripes, but rather use a delta array, or possibly BGR stripes.
Even those that do use RGB stripes may not have a suitable subpixel structure for subpixel font rendering. IPS panels are ideal for subpixel font rendering with their high fill factor whereas S-PVA is not.
Most current displays are not really high enough resolution for subpixel font rendering to be effective. They are typically around 100 PPI which results in visible colour fringing around the edge of letters when subpixel font rendering is used.
Not to mention the fact that there are many different display types out there that are completely incompatible with subpixel font rendering. CRT is an obvious example. 3-chip LCD, LCoS and DLP displays all have full colour pixels rather than using subpixels at all. Who knows what future displays such as OLED will be like?
bob’s: all valid points, but it will still show up correct for 99% of all browsers, with only minor annoyances for the rest, whereas the other font replacement techniques suffer from much greater problems.
In my case, I had to deal with very small font sizes, where sIFR and Photoshop wouldn’t render the glyphs right at all (parts of the glyphs where just swallowed up by the font renderers of Flash and Photoshop, because they where very tiny). OS X, with it’s heritage of Desktop Publishing does it right.
Even when subpixel antialiasing is turned off (Appearance panel in System Preferences), the rendered text still looks better than that from Photoshop, Flash and JavaScript.
@Thibaut right now, textorize supports background and text colors already, and a “letter-spacing” option should be easy to implement. Patches welcome, but I’ll also work on it some more myself!
Awesome job Thomas, do you mind if I fork the project to create a MacRuby version?
I am getting “could not find madrobby-textorize locally or in a repository” error. Am i missing something?
@bilgehan
http://gems.github.com/
You need to add github to your rubygems repo
$ gem sources -a http://gems.github.com
(you only have to do this once)
You have no idea how you’ve just saved my bacon! I have to graft a RoR site running on OS X onto a huge ASP.Net site that has some kind of back-end image-rendering script to make the header fonts pretty. So far, I’ve just been using static images on the RoR site, but your script does the real thing much more seamlessly.
fonts are either the most obvious or least obvious boost to productivity that Apple grants, depending on your perspective. it was one of the first problems they tackled and it has yielded some spectacular results. blackberries are like eye-daggers! I’m not sure if replacing all the text on lineoftheday.com with images is a great idea, but I might just have to find out!!
@Matt: sure, it’s MIT-licensed, please go ahead! Would be cool if we can merge back any enhancements!
@Bilgehan: I think Github’s gem servers are down for some reason. You can grab a copy of the project of Github and run:
$ gem build textorize.gemspec
$ gem install textorize
Could you explain why “no text selection” is “a feature, not a bug”? I’m a bit puzzled, because as a user, I’ve never seen a case where I found my experience improved in the least because it was disabled (except in the middle of a drag-n-drop operation), and almost daily I’m frustrated by cases where designers disabled it (intentionally or not) and it made my experience much worse. This strikes me as the Web 2.0 version of making right-click do alert(“don’t steal my images, lolz”).
I’m all in favor of nice typography on the web, but it needs to be done by the browser itself. If I can’t “select, right-click, google” some text, it only has a fraction of the value of real text.
Also, does this approach mean you’re assuming everybody is on a color LCD with subpixels in the same order? That’s probably a pretty safe assumption these days, but I want to make sure I’m reading this right.
I’ve been using Fireworks, which has a ‘System Default’ option for anti-aliased text.
I stopped mucking around with the strong/soft/crisp settings the day I noticed that option in CS3.
What about “strong” and “smooth” ?
Could you include them in your comparison?
Thanks
Installation went fine, but I’m just getting the following error. Tips? (ruby 1.8.7 installed under /usr/local)
/usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require’: no such file to load — osx/cocoa (LoadError)
from /usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require’
from /usr/local/lib/ruby/gems/1.8/gems/madrobby-textorize-0.1.2/lib/textorize/runner.rb:1
from /usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require’
from /usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require’
from /usr/local/lib/ruby/gems/1.8/gems/madrobby-textorize-0.1.2/lib/textorize.rb:3
from /usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require’
from /usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require’
from /usr/local/lib/ruby/gems/1.8/gems/madrobby-textorize-0.1.2/bin/textorize:3
from /usr/local/bin/textorize:19:in `load’
from /usr/local/bin/textorize:19
I’m getting the same “osx/cocoa (LoadError)” error as fracai. Is there a gem dependency i’m missing?
[...] textorize: Pristine Font rendering for the Web｜mir.aculo.us with Thomas Fuchs 〈ピクセル未満のフォントレンダリング〉 コメントを書く « ２００９年９月３０日（水） [...]
I was having the same error:
/usr/local/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require’: no such file to load — osx/cocoa (LoadError)
but found this helpful:
http://forums.pragprog.com/forums/76/topics/1769
I did, indeed, have many versions of ruby installed. I decided to remove all of them except the default installation, then reinstalled ruby gems, and that took care of the problem.
I then installed rvm (http://rvm.beginrescueend.com/) for all my other ruby needs.
I noticed you didn’t include Photoshop’s “Smooth” font rendering output. Why? I wonder if I’m missing something. It’s what I prefer to use, within Photoshop anyway.
On the web I have been using Cufón for a while but was a sIFR fan.
I honestly don’t understand how textorize, which looks fantastic, could be used on a website. Wouldn’t I have to create every single headline manually every time?
I apologize because it’s late for me and I’m not really thinking this through + I probably missed something, but right now it makes no sense (to me anyway). How would I dynamically generate images?.
Also, I have to ask, why do you consider no text selection a feature?
As it stands, it’s one of the biggest drawbacks I can see from using Cúfon.
Relying on a particular hardware configuration seems like a bad idea. We don’t rely on visitors using a particular browser, why would we rely on RGB-ordered LCDs? CRTs, projectors (presentations?), and any device which can change orientations (iPhone?) are bad targets for this technique. A web site can never have enough information about a user’s hardware to ensure that it’s using the right form of subpixel rendering.
I do think it’s a cool hack, but I don’t think it’s generally appropriate.
I think talking about CRTs, projectors and iPhones, of all things, is missing the point a bit. If you have to present something, there’s a 90% chance that you use your own computer with the fonts installed anyway and if you have to cater to specific niche markets like CRTs or displays rotated by 90°, you are most likely going to have to implement a custom(ized) solution anyway.
This is something that comes in handy for navigations, fancy titles and custom-font-titles at small sizes. If you really, really want to have a selectable title, it’ probably possible to write your code to generate a H1 or H2 tag with the rendered text as the background image and the actual text within the HTML block set with an opacity of 0.0 or 0.0000001 or something like that.
I can’t get rid of the feeling that some people just like to complain. If you can use it, use it, if you can’t — don’t. *shrug*
If you can’t get it to run and have installed your own version of Ruby, you’ll need to install RubyCocoa manually (the default Ruby on OS X comes with RubyCocoa preinstalled).
Here’s how:
http://rubycocoa.sourceforge.net/GettingStarted
Segfaults if you specify e.g. -f”Futura Bold”
@Ed Make sure you have a font installed that has that exact name. To check, you can use the “Font Book” application.
This works fine for me:
textorize -f”Futura Condensed ExtraBold” test
If it’s reproducible and a valid font name, please send me the console output.
@Thomas
My mistake with the font name but I was actually reporting the segfault which is kind of harsh in response to a common error.
$ sudo gem install madrobby-textorize
ERROR: While executing gem … (Errno::EACCES)
Permission denied – getcwd
[...] mir.aculo.us with Thomas Fuchs » Blog Archive » textorize: Pristine Font rendering for the Web (tags: ruby typography cool) [...]
@ed I’ve added a new command line option “–list-fonts”. I know things are not quite perfect yet, but it’s an alpha, fwiw.
@Thomas
You only need to install RubyCocoa manually if you have nuked your default Ruby installation completely, otherwise you may just need to straighten out your path information.
In my comment from last night that is still awaiting moderation, I explain that this is a known problem, and what I did to straighten this out, and I didn’t need to reinstall RubyCocoa.
@smoofles: I think our disagreement is on whether a web designer can generalize about display hardware, since this technique is hardware-dependent with no fallback. We differ on the number of incompatible devices that are likely to be used.
If you’re subpixeling fonts on an intranet site and everyone in the company uses LCDs to view it, totally cool. Heck, if your target audience is primarily designers and other visual types, that may be good enough for you. In my opinion, it wouldn’t be appropriate on most of the web sites I regularly use or the (very small) number I maintain, whose audiences are very diverse.
The complaints are valid, I think. We’re still looking for good ways to shoehorn good type onto the web, and it’s great to see so many 90% solutions (textorize, cufon, sifr, facelift, etc.). In this case, I’d just like to see people considering the other side of the subpixel coin before blindly implementing the new hotness.
@Thomas
Any idea why my comment at 4:58 am on October 1st, 2009, posted and was visible for hours, and then says “awaiting moderation”. Are you censoring comments? And if so, why? I explained a much better workaround than yours, which won’t even solve the problem in some cases.
“I can’t get rid of the feeling that some people just like to complain. If you can use it, use it, if you can’t — don’t. *shrug*”
Sounds good, except the word “use” is ambiguous here. The people who will “use” this approach will be building webpages, but their “users” will be viewing it on other machines.
The people viewing the page might care more about searching on selecting, but still have to suffer the fact that the designer thought that pixel-perfect typography was more important. (Somebody else might have yet another criterion that’s most important, like compatibility.)
I agree that if both “users” are the same person (e.g., making a presentation you’ll show on your own computer), then by all means go for it.
[...] mir.aculo.us with Thomas Fuchs » Blog Archive » textorize: Pristine Font rendering for the Web (tags: programming macosx osx font typography webdev javascript webdesign mac png subpixel anti-alias textorize) Share with Shareomatic! [...]
I’ve been able to get past the osx/cocoa error by setting RUBYLIB to “/usr/local/lib/ruby/1.8/:/usr/local/lib/ruby/gems/1.8/:/System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ruby/1.8/:/System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ruby/gems/1.8/”
Now I’m hit with the following: /usr/local/bin/textorize:19: undefined method `bin_path’ for Gem:Module (NoMethodError)
The solution here seems to be to install the gem I’m trying to use, but textorize is of course already installed.
Any tips?
[...] interesting project to help render typography on the web. I also think that using textorize to create images of display fonts is not a bad approach. It gets around copyright issues very [...]
To all the whiners: I understand concerns, but please offer solutions not whining.
IMHO, no one suffers here. Only if you use a magnifying glass an inch away from a CRT screen, but those screens are so washed out that it does not matter anyway. The important thing is that for 99% of users (those with a LCD screen) it will look better.
Have you even tried looking at the examples on a horizontally rotated iPhone? If so, you’d see that it doesn’t look any different from the Photoshop gray-scale results.
The thing is, you can’t make websites that please 100% of people. In fact, in life, you can’t do anything that will please everyone.
This utility and technique don’t introduce new hurdles to people, it just makes the accepted use of image-based headlines and logos, something you see all over the web, look nicer. It’s not meant as a solution to cure cancer or even selectability of text on the web. If you’d like that, please contribute solutions.
That is all.
With regard to your October 1 update; I don’t think it’s really Firefox 3.5 on Windows that’s doing a bad job. The screenshot looks like Microsoft’s ClearType font rendering which gives different results than Apple’s subpixel AA.
The latest version(s) of Safari for Windows use the Windows font rendering by default, but you can choose to use the Apple font rendering engine in the Preferences. It looks like Safari is using its own engine when it has to render external fonts.
Font rendering on Windows is an unpredictable mess anyway; I have a vanilla XP installation with IE8, Safari, and Firefox where IE uses ClearType subpixel AA and both Safari and Firefox render text using regular AA by default.
This would be real nice as a Rails plugin. Having this inside an erb tag would make this truly amazing.
@fracai – I’m having the same issue. Set RUBYLIB, and getting this:
/usr/local/bin/textorize:19: undefined method `bin_path’ for Gem:Module (NoMethodError)
Anyone have any ideas?
When I saw this I said “that’s just what I needed!”.
But I’m afraid that with no background transparency I’ll have to resort to something else.
[...] a different topic, the other day, John Gruber from Daring Fireball wrote a quick note about Thomas Fuchs’ textorize script which since got its own place on the internet [...]
I’m getting an issue when passing in a color on the command line – even when using the example – any thoughts? This is my first experience with ruby cocoa, not sure where/what to drill into.
Thanks,
-Ryan
iMac:~ ryan$ textorize -fLucida\ Grande -s150 –color=rgba\(12,56,99,0.5\) –background=#ff8080 foo\ bar
2009-10-09 20:57:20.775 ruby[49491:10b] Textorize::RunnerApplication#applicationDidFinishLaunching: ArgumentError: invalid value for Float(): “rgba(12″
/Library/Frameworks/RubyCocoa.framework/Resources/ruby/osx/objc/oc_wrapper.rb:50:in `ocm_send’
/Library/Frameworks/RubyCocoa.framework/Resources/ruby/osx/objc/oc_wrapper.rb:50:in `method_missing’
/Library/Ruby/Gems/1.8/gems/madrobby-textorize-0.1.2/lib/textorize/renderer.rb:50:in `set_attr_and_text’
/Library/Ruby/Gems/1.8/gems/madrobby-textorize-0.1.2/lib/textorize/renderer.rb:10:in `initialize’
/Library/Ruby/Gems/1.8/gems/madrobby-textorize-0.1.2/lib/textorize/runner.rb:31:in `new’
/Library/Ruby/Gems/1.8/gems/madrobby-textorize-0.1.2/lib/textorize/runner.rb:31:in `applicationDidFinishLaunching’
/Library/Frameworks/RubyCocoa.framework/Resources/ruby/osx/objc/oc_wrapper.rb:50:in `ocm_send’
/Library/Frameworks/RubyCocoa.framework/Resources/ruby/osx/objc/oc_wrapper.rb:50:in `method_missing’
/Library/Ruby/Gems/1.8/gems/madrobby-textorize-0.1.2/lib/textorize/runner.rb:15:in `initialize’
/Library/Ruby/Gems/1.8/gems/madrobby-textorize-0.1.2/bin/textorize:52:in `new’
/Library/Ruby/Gems/1.8/gems/madrobby-textorize-0.1.2/bin/textorize:52
/usr/bin/textorize:19:in `load’
/usr/bin/textorize:19
2009-10-09 20:57:20.776 ruby[49491:10b] invalid value for Float(): “rgba(12″
@Ryan: it seems you’re not using the latest version of the Gem. I’d recommend using the gem from gemcutter, as described on http://textorize.org/.
Sorry Thomas, I’m going to add to the whining. This is really a bad idea.
What about page zooming and printing? I imagine the text gets pixelly and ugly and the coloured fringes would become visible.
Page zooming is especially important on devices like the iphone, where you are often zooming in to a higher than intended resolution.
I also agree with the previous issues about text selection, CRT and reverse-ordered colours.
I don’t think these are insignificant issues. The lower quality rendering of cufon and sifr is a lesser problem in my opinion.
@David I think that’s FUD. Actually try it! You’ll see that the zooming quality doesn’t matter (you’ll get bad quality with non-subpixel AA text too), but makes it much more readable and better looking in the default case.
Here are some further thoughts and applications for it: http://www.flickr.com/photos/dunstan/3994227166/ and http://typophile.com/node/60577.
Ok I just tried it on an iphone. You’re right, it looks pretty good. You have to zoom in further than you typically would before it is noticeable.
Printing looks a bit weird, but ok.
@David Yeah, for pages that are supposed to be printed I’d suggest using a print stylesheet and a font that’s available on all computers– the textorize stuff is designed to look good on screens.
One way to do it (needs tweaking for IE, tho) is to use the textorize-generated graphics as CSS background-image of an element, and using opacity:0 text in it, while the print stylesheet removes the background image and sets opacity to 1. This also makes the text selectable.
We use that technique on http://javascriptmasterclass.com/ (no print stylesheet tho, just text selection).
Pulled the latest gem using gemcutter, now I’m getting an error on the basic example – any thoughts?:
iMac:~ ryan$ ruby -v
ruby 1.8.6 (2008-08-11 patchlevel 287) [universal-darwin9.0]
iMac:~ ryan$ textorize -f”Gotham” -s200 Hello
/Library/Frameworks/RubyCocoa.framework/Resources/ruby/osx/objc/oc_wrapper.rb:50: [BUG] Segmentation fault
ruby 1.8.6 (2008-08-11) [universal-darwin9.0]
Let’s just drop Photoshop from the discussion. It’s roots are in print design and, though I haven’t used CS4, it still shows through CS3. It’s capabilities for screen media (i.e., the web) have never matured to the point that it is indispensable, as many an open source proponent will gladly, even exuberantly, corroborate.
A designer’s reliance on Photoshop is more a handicap than anything else – our dependence on it a barbed thorn.
As another commenter pointed out, the superior Adobe Creative Suite stablemate, Fireworks, has been a superior (paid) option since the long-lost Macromedia days. Photoshop (again, referring to CS3) is still clumsy in handling vector objects and downright maddening dealing with text. Not the least issue of which is the topic of this post.
I know what you’re thinking though, “I can’t stop using it.” Because if you already haven’t, there’s two compelling reasons why not: 1) It’s your sugar daddy/crutch. 2) Organizational imperative (typically due to team members using reason #1).
I have Ruby 1.8.7 installed, not the default OS X package.
I installed RubyCocoa from source and that went fine, the errors mentioned earlier went away and it seemed to work alright except the only output I get is…
{
background: url(heading.png);
width: 122px;
height: 43px;
}
Or similiar. I don’t see a window with a graphic and no file is saved anywhere. Specifying an output path does nothing.
Anybody have any idea what isn’t working?
<NSWindow: 0×1ac4b50>
{
background: url(heading.png);
width: 122px;
height: 43px;
}
[...] Visit: textorize: Pristine Font rendering for the Web [...]