Processing + Typography

When I first got my hands on the Form + Code book what impressed me the most was the artwork with typography on the titles and opening pages. It reminded me how much I like typography and how focusing on the shape of letters and text can produce beautiful visuals. Then of course it got me trying to reproduce those visuals using Processing. There is no code in the book to help with that. All we get are some short descriptions at the bottom of each title page, like this one:

Form+Code page 9

That is a good hint. I knew I had to start with Python, which didn’t take long to lead me to TTX. It is a great piece of software that describes TrueType and OpenType fonts in an XML-based format. XML is much easier to read than bytecode and I guess the authors of Form+Code used TTX at some point. But having the fonts described in a text format is not enough, it is necessary to write Processing software to parse all that and create the points and curves and shapes. TTX to Processing: that would be an interesting library. Before I started to write one myself (like it would be easy), I went on a search for other contributed libraries to handle typography.

Which lead me to Geomerative. A fantastic library to work with TrueType fonts and SVG shapes in Processing. I was very happy when I found it. It was not Python or Postscript, but it would let me achieve similar visuals in a much quicker way.

Form+Code page 26
similar visuals made with geomerative

Form+Code page 42
similar visuals made with geomerative

Form+Code page 92
similar visuals made with geomerative

Why it doesn’t look the same
I’ve put some effort to copy the exact look of the titles in the book, but it still looks different. Why?
It all comes down to the differences between TrueType and Postscript.

The external contours are drawn in opposite directions, counter-clockwise on Postscript and clockwise on TrueType. This also affects the starting points of each glyph: Postscript starts where TrueType ends and vice-versa. This difference becomes evident on the “Computers” example.

Postscript vs TrueType: start point and direction

There is also a big difference in the way curves are drawn in the two formats. Postscript use cubic Bézier splines while TrueType uses quadratic Bézier splines. Which means TrueType needs more anchor points than Postscript to draw similar curves. The difference becomes evident on the “Working” example.

Postscript vs TrueType: curves

Geomerative and OpenType
The OpenType file format can describe both TrueType and Postscript outlines. Is it possible to use OpenType fonts (Postscript flavored) with Geomerative? No. At least not with the current version (rev 34). Geomerative uses a Java library called Batik to parse the TrueType format and convert it to SVG instructions. The Batik library (release 1.7) ignores the CFF table used to describe Postscript outlines. I searched for updates to the Batik library to see if there are plans to support CFF, but it doesn’t look like that is going to happen.

One interesting thing I found was that the Adobe Flex SDK also uses Batik to handle TrueType fonts. Actually, there are four font managers: Batik and JRE to manage TrueType and AFE and CFF to manage TrueType and OpenType.

This post is coming to an end but there aren’t many conclusions to make. Except that, as I read somewhere, OpenType file format is a hard nut to crack. The next steps could be: find a parser for the CFF table and adapt it to Geomerative; or write a parser for the TTX format as I mentioned at the beginning; or accept the formats differences and focus on the visuals of the other titles in Form+Code book. For now, I’ll probably go for the latest option. I’m enjoying the ride and I hope I can post some updates here soon. for PlayBook

My first PlayBook app is now available for free on BlackBerry App World. – A quiz about flags, countries and capitals

The idea to make it started when I became addicted to a flag quiz game on my Android phone. It was quite fun to play, but it was too ugly and I thought it was missing some features. So why not build one myself? I went on with the concept, a few sketches and I got myself an Android development book. The progress was very slow because I was learning the language while building it.

Then I attended to Flash Camp Brasil 2011. RIM was there showcasing their new tablet and people got pretty excited about it. Since it is possible to build native apps for the PlayBook using AIR, why not put my ‘flags quiz’ project on track and build it with ActionScript? I started the development as soon as I got back home.

I had a good time working on it. The only differences from a desktop AIR project are the setup (downloading the SDK, installing the simulator, etc) and working with the QNX components. I have already talked about these two topics here.

flagin-01 game types: country » capital and flag » country

For future updates I think about adding sound, a horizontal layout, statistics, etc. But I am more interested in what people have to say about it. So go get and make sure you leave your review and comments. Cheers!

Big Thank You:
– to my beautiful girlfriend Pri, for helping me with the countries info;
– to my friend Toninho, for design tips and early logo designs;
– and to Cássio, for testing the app on a real device.