Stencilfy: Creating Laser-Cutter-Friendly Type

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” shown above, the path is defined by everything after the “d” attribute. “M” stands for move (so M51.56 66.16 means move to X: 51.56 Y: 66.16) and “L” stands for draw a line (so L 51.56 66.94 means draw a line from the previous coordinate to X: 51.56 Y: 66.94).

Initially, I thought I would parse the SVG path to determine the location of the counter’s apex and nadir and connect it to the exterior outline. But I was a bit stumped about how to go about calculating this from the series of coordinates.

Instead, I lined up all 20 characters in the English alphabet that contain counters to see if I could discern any patterns. As it turns out, there is a simple solution!

If you bisect each character with a rectangle at its horizontal center, you’re able to cross through each counter. Then, if you take the difference between the rectangle clipping mask and character paths, you create the bridges necessary to “stencilfy” the character.

Draw a rectangle at the center of the character horizontally and perform a difference operation to remove it from the character. This removes the counters!

I found a library called clipper.js that performs boolean operations on SVG paths.

Clipper.js boolean examples from documentation at http://jsclipper.sourceforge.net/6.4.2.2/index.html?p=basic_demo_boolean_svg.html

Using clipper.js and a few other SVG libraries (in order to get properties of each character’s SVG path, including text width and height to place the clipping rectangle at the center of each character), I wrote an app called Stencilfy that lets you upload any font and create a Stenciled version of it.

Stencilfy

On Stencilfy, you enter the text you want to create a stencil version of, select a font (or upload your own), and click “Stencilfy” to generate an SVG you can export and bring into any graphics software (CorelDraw, Illustrator, etc.) before sending your text to a laser cutter.

Of course, you can use Stencilfy even if you’re not laser cutting the output! (:

If you’re looking for resources to find free fonts, I recommend Google Fonts, Dafont, and Font Squirrel.

Try it Out!

You can find Stencilfy on Glitch here: https://stencilfy.glitch.me/

Because it’s on Glitch, you can peek into the entire source code and remix it (:

If you make something using Stencilfy, I’d love to see it! Feel free to share it with me on Twitter @scientiffic.