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:
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:
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/)
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:
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.
I found a library called clipper.js that performs boolean operations on SVG paths.
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 here: https://stencilfy.onrender.com/ * note: Stencily is now on Render since Heroku updated its pricing
And if you want to check out the sourcecode, here’s the repo on Github: https://github.com/ttseng/Stencilfy
If you make something using Stencilfy, I’d love to see it! Feel free to share it with me on Twitter @scientiffic.
