Project

# SkeleText: Skeletonization of Typefaces

Creative Commons

Vera van de Seyp

##### Groups

Have you ever needed a single-line font rather than an outline of a typeface? For instance in the use of digital fabrication processes such as laser cutting, embroidery, or CNC milling?

SkeleText is an open-source creative tool that translates the character of any given font into a skeletal form through a series of geometrical transformations.

Creative Commons

## Mathematical approach

There is quite a lot of math and code involved to convert a typeface to a single line (and there could potentially be even more -- we found some math-light shortcuts!). Here's an explanation of some of the key steps in the process:

Creative Commons

Text to points: By using p5.js's native textToPoints() command, the outline of each character in the chosen font is translated into a set of points. This is done by sampling points along the bezier curves that define the characters.

Creative Commons

Delaunay triangulation: For this, we use d3's Delaunay library. This algorithm creates triangles by connecting the given set of points, ensuring that no point is inside the circumcircle of any triangle. It’s one of the key concepts used in the process, as it's a way to divide up the space within a letter into smaller, more manageable parts.

Creative Commons

Voronoi diagram: In the context of SkeleText, the Voronoi diagram is derived from the Delaunay triangulation mentioned above. For each triangle, you calculate the circumcenter (the center of the circumcircle that passes through all three vertices of a triangle). Connecting these circumcenters gives you the Voronoi polygons, which look like the "skeleton" of the original shape.

Creative Commons

Circumcenter: The circumcenter of a triangle is found using the intersection of the perpendicular bisectors of the sides. In a 2D plane, the formula can be derived using the coordinates of the triangle's vertices and is involved in the calculation of the Voronoi diagram.

Creative Commons

Point organization: Organizing points into a continuous line requires finding logical connections between nearby points. An extreme (like the leftmost point) is selected, and then the closest subsequent points are ordered before the letter is drawn.

Creative Commons

Brightness filtering: This approach leaves us with a mess of lines. We found a math-light solution where we draw the character to a temporary graphics buffer and check these graphics for each of the points. The points that are not drawn on top of the letter shape in the graphics are removed, preserving only the parts of the Voronoi diagram that correspond to the actual character shape.

Creative Commons

Maximum point distance: The organization approach above is not perfect, so another filter is to split the points up in multiple lines if the current point and previous point are too far apart. This avoids having lines run across a letter shape.

Path Simplification: A simplification technique was applied to eliminate unnecessary zig-zags or noise. We used a custom version of the Douglas-Peucker algorithm to remove any unnecessary points. For a given segment of the line (initially the entire line), we identify the point that's furthest from the segment. If the distance from the segment to this furthest point is less than a given threshold (tolerance), then we can eliminate all the points between the segment endpoints. Otherwise, the segments are divided at the furthest point. This principle is recursively applied to the two sub-segments.

Creative Commons

## Never just one solution

While this tool implements a lot of math as can be seen above, we learned that sometimes the most simple approaches are also the most effective ones. While some elements could have been solved purely mathematically, we often chose a solution with less heavy computations involved. For instance, the skeleton lines from the Voronoi diagram are simply filtered by checking if the point is drawn on top of a character or not. The mathematical solution may yield cleaner results in the long haul but would effectively require a lot more computation, causing the tool to be especially slow. We want to address this as these other approaches may have different benefits than the one we chose.

Creative Commons

## Stone carving

Unexpectedly, the structure that appears when applying skeletonization on text characters looks very similar to the design needed to carve letters in stone. Typographer Jacob Wise, who experienced hand-carving type while studying at the TypeMedia program in The Hague (NL), mentioned that this underlying architecture (as well as the outline of the character) is needed to chisel the letter shape properly. In the images below, you can see the way the architecture/skeleton translates to carved letters.

Adjacently, one of the leading theories on the emergence of serifs in the Latin alphabet is that they helped with creating neater shapes when chiseling letters in stone — a popular method of displaying text during the Roman Antiquity.

Jacob Wise

Jacob Wise

Jacob Wise

Creative Commons

## SkeleText Beta

SkeleText Beta is a browser-based tool that can be accessed through any web browser. This version is meant for desktop interfaces. Find it on https://veravandeseyp.com/skeletext/.

1. Load Font (Graveyard): Select and upload a font file (e.g., TTF or OTF) that you want to skeletonize. You can either do so via the designated upload button in the menu or by dragging the font file anywhere on the screen (drag-and-drop functionality).
2. Input Sample Text: Enter a sample text string to visualize what your chosen text would look like in the skeletonized font.  Through the menu, you can set any short text samples.
3. Preview Skeletonized font: The text can be previewed in two different color modes (spooky and uncanny). You can show or hide the original letters (flesh), and adjust the size and the stroke weight (bone heaviness).
4. Adjust Settings: Some settings have an impact on the exported font as well. Through the menu, you can set the precision of skeletonization, select whether you want to hide the skeleton lines outside the text characters (clean skeleton), and whether you'd like the exported font to be strokes or outlines of strokes.
5. Export the Result: Once satisfied with the preview, click the download button to save the skeletonized font file. The typeface is exported as an OTF file (.otf) as an extra font (Skeleton) of the typeface.

Creative Commons

Creative Commons

## Discussion

SkeleText is just a beta version so far.  The interface could be developed further, and some bugs might appear when the tool is used by different users. Please reach out to veraseyp@media.mit.edu if anything needs attention.

The implementations of this project , here are some examples:

1. Digital fabrication: In CNC machining, laser cutting, or 3D printing, the simplified lines of monoline fonts are easier to fabricate and can help provide a more efficient production process.
2. Accessibility: Creating clean, uncluttered monoline fonts may improve readability for individuals with visual impairments or reading difficulties, and can help contribute to the design of (multi-line) typefaces.
3. Design and art: The geometric nature of these fonts can support the design of signage, architectural elements, or decorative patterns in interior/exterior design. Artists and designers can also use the skeletal structure of fonts as a base for creative explorations such as animations, adding embellishments, or integrating them into more complex designs.

Creative Commons

## Resources

"DeepSkeleton: Learning Multi-Task Scale-Associated Deep Side Outputs for Object Skeleton Extraction in Natural Images", available at https://www.researchgate.net/publication/308066453_DeepSkeleton_Learning_Multi-Task_Scale-Associated_Deep_Side_Outputs_for_Object_Skeleton_Extraction_in_Natural_Images

Samara, Timothy. Typography Workbook: A Real-World Guide to Using Type in Graphic Design. Rockport Publishers, 4 Sep. 2004, p. 21.

"Skeletonization", available at https://homepages.inf.ed.ac.uk/rbf/HIPR2/skeleton.htm

##### Research Topics
#design #art #computer science #creativity #culture
View more