Experiments in typography

Toph Tucker, 2015–2016

Inspired by something Tracy Ma did for Businessweek, I started playing with using the html canvas to do things with type.

But so there’s this fun little JavaScript / canvas thing called FizzyText (source), which appears to have been made by one George Michael Brower as a throwaway demonstration of his GUI tool. I found its key mechanism brilliant: reading image data from the canvas, plus some Perlin noise, to drive the behavior of particles. Here’s Fizzy Text:

The color particles grow when they're atop a black pixel in an invisible background canvas where "Fizzy Text" has been rendered, and gradually shrink to nonexistence on white pixels. It's a little more clear what's going on if we put a floor on particle size, though then they get trapped in attractor channels instead of randomly respawning:

My first step was to strip out the noise and just the particles fall and leave trails only when they're over the background image, like rendering by bonding, like revealing it like invisible ink:

Next you can color the particles non-randomly, like picking up an invisible gradient:

Or fill in the background with random colors, so the text stands out only by its coherence:

Or try something more like the original FizzyText, but with a shifting Perlin noise field, so that particles get blown back and forth in gusts of wind, and the text assumes more or less coherence over time, and the text changes, so the particles fizz out or reconstitute into new letters:

Or do something sillier, like rendering the underlying text in Steph Davidson's Curlz SD and then finding spots to draw more curls, to make it curlier, because it is not curly enough:

Variations on these techniques can also be used to do painting.

Here the mouse paints with increasing fidelity.

Here’s a slideshow.

You can also use letters to make letters, litera ex litera. Roll over to reveal my favorite author! (Sorry for being so basic.)

Roll over to reveal the man who gave this speech, and happens to be my employer!

Roll over to hold it all together.

Later I was chilling in a hot tub talking about Archimedes. How would he displace type?

This one scrolls.

It can be subtle.

We have used some of these concepts in work at Bloomberg. E.g.: an opener on a Microsoft feature (in which letters bounce around against thematically appropriate constraints), a slander feature (in which resampled letterforms get spiky around the mouse and scroll speed), and the Bloomberg year-end book list (in which the title is painted by the titles of the books on the list). And we played with different techniques of text wrapping and type-on-dynamic-paths for The Design Issue, which might be my favorite thing I’ve done. There remains a lot of work to do. See my bl.ocks for more and ongoing.

—Toph