Rasterizing Redaction

The Redaction is an exhibition by artist Titus Kaphar and poet Reginald Dwayne Betts that opened at MoMA PS1 in the spring of 2019. A couple of months before the opening, I got a message from Jeremy Mickel (of MCKL Type) asking if I might be interested in helping with a custom type family he was designing for the project. If you’re not familiar with the exhibition, definitely take a moment to check it out. The Redaction examines the abuses of the criminal justice system, in particular the issue of money bail, and is composed of portraits of incarcerated individuals paired with poetry made by redacting legal documents.

The team working on the project, which also included creative director Forest Young, was interested in distressing the type by replicating the rasterization that happens when fonts are rendered using a rough pixel grid. Type is drawn in a vector-based editor that produces clean curves and diagonals. There are a few tools out there that can take these smooth outlines and then create new outlines (still in the same vector-based format) that mimic the effect of rasterization. Jeremy was using one of these to prototype, but it wasn’t ideal, so we decided to write some code specifically for The Redaction.

Rasterization scripts often split the entire glyph area into a grid of squares, then check the center of each square in the grid, testing whether or not that point is inside the glyph’s outlines. This works, but it takes a while because many areas are checked that don’t include glyph artwork. Think about a C with all the open space inside of it, or a lowercase letter with lots of open space above it. Occasionally, the code does not anticipate outlines that extend beyond the glyph’s sidebearings, which can be a problem for characters like f that sometimes reach into the space of the glyph next to them.

To draw the rasterized outlines, many tools render each square that passes the center-point test as a separate contour. This can be great—for instance, if you want to use an interesting shape for each pixel, like a circle or triangle. But if you’re using squares, it makes for a lot of unnecessary paths, which can slow down the font editor and make further editing complicated.

On a long drive back to Berkeley from Santa Barbara, I was thinking about the project and trying to figure out a more efficient way to script the rasterization. Somewhere around Paso Robles, I pictured the outlines as strings, laid out in smooth curves but able to be pushed and pulled as needed. I imagined working my way around the strings that formed the O, nudging them into little straight lines that adhered to a grid. I love having a visual like this as I code. The more tangible the picture in my head, the better I can conceptualize what the script is doing as I’m working on it.

The tool I built for The Redaction hops around the glyph outlines, going as far outside the sidebearings as the outlines go. Each time it lands, it finds the closest point on the grid—in doing so it creates new outlines made up of straight edges that all lie exactly on the grid. This proved to be much faster than the other tools we tested, and I was able to increase the speed by adding further optimizations, like jumping ahead whenever there is a vertical or horizontal edge (as you can see in the video above when the script processes the E). In a quick test, we sped up the time to rasterize the 26 lowercase letters from 1 minute to 6 seconds—90% faster! Because of the way the tool works, the generated outlines are one cohesive shape. Furthermore, the script maintains contour order, path direction, and overlaps, a nice subtlety that, as a type designer, I appreciate.

On top of this core, we added a lot of features that improved the production process, like stem snap functionality for consistent verticals and the option to force the spacing onto the same grid. We also automated the creation of alternates. Every rasterized style in the Redaction family has a few alternates for each glyph to achieve a sense of randomness, and these alternates are generated as the font is processed, by copying the default glyph, shifting the copy a few units, then rasterizing it.

It was an honor to play a part in this incredible project. The Redaction typefaces are free for personal use. Download them and learn more about the type at redaction.us.