Stencilfy: Creating Laser-Cutter-Friendly Type

Tiffany Tseng
4 min readJul 19, 2018

I don’t like stencil fonts all that much.

But over the years, I’ve found myself resorting to stencil fonts whenever I’ve needed to laser-cut text.

That’s because normal fonts have features called “counters,” or internal paths, that, when laser-cut, decrease the legibility of your type:

Characters with counters (counters highlighted in blue)

For example, if you laser-cut the word “bodega” (my favorite example because every character in the word contains a counter), you end up losing your internal counters in the process so the characters aren’t as recognizable:

Laser cutting words with counters makes text less legible. Using Stencil fonts that have bridges connecting counters to the exterior of the type solves this issue, but the number of Stencil fonts is limiting.

Stencil fonts, on the other hand, have “bridges” that connect the counters (also know as “islands”) to the space external to the character. However, there are much fewer Stencil fonts out there than regular fonts, so using Stencil fonts limits the range of types you can use.

A workaround is manually editing the type by outlining it and using Pathfinder boolean operations (subtraction, difference, etc.) to edit the character directly in software like Illustrator. But this process is manual and can be quite tedious (check out this tutorial for an example: https://www.instructables.com/id/Laser-Cut-Stencil-Letters/)

Using Illustrator’s Pathfinder to open up counters (from https://iduartstechroom.wordpress.com/2009/09/25/laser-cutting-text/)

During my time at Recurse, I’ve been learning about how to manipulate SVGs, an XML format for vector graphics. I decided to invest a few days into thinking about how to make the process of removing counters more automated, allowing anyone to laser cut with any font of their choosing.

Using the node library text-to-svg, I could generate a SVG path for any text input (initial experiments with that here), as you can see in this example below:

SVG path for the letter “b.” You can test out any SVG path using this visualizer I built: https://svg-visualizer.glitch.me/

An SVG path consists of a series of XY coordinators, along with character commands. For example, for the letter “b”…

Tiffany Tseng

designing tools for making.