This is a repository of p5.js (JavaScript) programs for loading and displaying single-line vector fonts (also called single-stroke or monoline fonts) in a variety of formats — including TTF, SVG Font, Hershey Font, and others. The repository also includes an authoritative archive of single-line fonts (and procedural fonts) from a wide range of creative projects, obsolete technologies, and other sources.
Single-line fonts are ideally suited to creative coding, pen-plotting, and CNC machining. Examples in this repository are known to work with p5.js v.1.11.7.
- p5.js Parser/Renderer for Single-Line TTF Fonts
- p5.js Parser/Renderer for Single-Line SVG Fonts
- p5.js Parser/Renderer for (Classic) Hershey Fonts
- Minimal SVG Font, Inlined in p5.js
- p5.js port of Kamp's HP1345A vector font
- p5.js port of Logg/Hudson's Asteroids font
- p5.js port of Hofstadter's Letter Spirit gridfonts
- p5.js port of JT Nimoy's Textension font
- p5.js port of Jared Schiffman's Font
- p5.js port of Moebio's Typode Font
- p5.js port of Anders Hoff's GridFont
- minf, an Ultra-Minimal Procedural Monoline Font
- Additional Resources
- Some Inspirational Artworks
Genuine single-line TrueType (.TTF) fonts are comparatively rare, and are not rendered properly by most graphics tools — including commercial software like Adobe Illustrator, as well as p5's built-in text() command. Here, an archive of single-line TTF fonts is provided, as well as a p5.js program which is able to load, parse, display, and provide control points for those fonts:
- An archive of single-line TTF fonts, as suggested via imajeenyus.com. Unlike Hershey fonts, many of these TTFs are constructed from quadratic Bézier segments, and thus have real curves instead of polylines.
- A p5.js program to load single-line TTFs in p5.js: In this repository, and also at editor.p5js.org. Note that the program makes use of opentype.js.
- These fonts have some quirks. Don't ignore these important technical notes about the TTF fonts and p5.js code!
SVG 1.1 Fonts are a lesser-known open standard, defined here, which allows for single-line vector fonts. A handful of single-line SVG Fonts have been created. Here is a p5.js program that parses and displays SVG Fonts:
Shown above is the elegant Relief open-source single-line SVG font (rendered by p5.js), developed by a team at the Graphic Design Department of the Institut Supérieur des Arts et du Design de Toulouse. Note that Relief is not a poly-linear font, but instead uses cubic Bézier curves with the SVG C (curveTo) and p5.js bezier() commands.
A large archive of compatible SVG single-line fonts is included here, as a mirror of a collection curated by Evil Mad Scientist Laboratories. All of these fonts are supported by the p5.js project here.
Some additional resources for SVG 1.1 Fonts are:
- https://gitlab.com/oskay/svg-fonts
- https://github.com/Shriinivas/inkscapestrokefont
- https://singlelinefonts.com/collections/svg-fonts
- https://github.com/isdat-type/Relief-SingleLine
- https://www.templatemaker.nl/singlelinetext
Hershey Fonts are a collection of single-line vector fonts developed in 1967 by Dr. Allen V. Hershey at Dahlgren Naval Weapons Laboratory; they are some of the earliest digital fonts. The coordinate data for 1,377 Hershey font characters was published by NIST in 1976, in A Contribution to Computer Typesetting Techniques: Tables of Coordinates for Hershey's Repertory of Occidental Type Fonts and Graphic Symbols. Type designer/historian Frank Grießhammer has published a terrific video lecture about The Hershey Fonts in 2015.
The authoritative p5.js interface to Hershey Fonts is the p5-hershey-js library, by Lingdong Huang. (Note that the font data in Lingdong's p5-hershey-js is not stored in SVG format!) The p5-hershey-js library provides detailed control of Hershey typography; in this section, I provide some practical p5.js programs that use this library.
This program (here or at editor.p5js.org) provides a simple introduction to the p5-hershey-js library. It demonstrates how to:
- Display text using the default Hershey font
- Display text using a specific Hershey font
- Display text using Lingdong Huang's Chinese Hershey fonts
- Position a Hershey glyph with a specific translation, scale, and rotation.
- Export these graphics to an SVG file, using the p5.plotSvg library
This program (here or at editor.p5js.org) also uses the p5.plotSvg library to export SVG files of the graphics rendered onscreen. In particular, this demo shows how the p5-hershey-js library can be used to render Hershey fonts in 3 different ways:
- "Simple", using Lingdong's library API;
- "Custom", allowing for your own pointwise manipulations;
- "Single Line", in which all text is an unbroken polyline.
Also noteworthy are these additional Hershey+p5 resources:
- Lingdong Huang has made a helpful Hershey Font Editor. A backup of this project has been archived here.
- chinese-hershey-font, also by Lingdong Huang.
This minimal program presents a SVG font inlined in p5.js, with no loading of external resources.
The program presented here and at editor.p5js.org displays an inlined SVG font in p5.js. This program may be useful in circumstances when you just need a simple single-line font, and do not wish to load external files or have any additional library dependencies.
The typeface happens to be a Hershey (polyline) font, converted to the SVG Font format. Note that additional Hershey fonts have also been converted to SVG Font format and are available e.g. here, here, and here, as discussed above. This code been adapted from hershey font json example by Allison Parrish.
This single-line font is from the character generator ROM of the HP1345A digital vector display (c.1985), reverse-engineered by Poul-Henning Kamp, and ported to JavaScript by Golan Levin. This p5.js version is adapted from his work, and loads data from the original ROM binaries.
- ROM-loading version here or at editor.p5js.org
- Data-inlined version (recommended) here or at editor.p5js.org
Asteroids game vector font by Atari programmer Ed Logg, c.1979, converted to C by Trammell Hudson, ported to p5.js by Golan Levin. Original C data here.
Douglas Hofstadter’s Letter Spirit project (c.1987-1996) explores how abstract concepts like "style" and "analogy" underpin both perception and creativity. It models the human capacity to perceive coherence and invent variation within constraints, proposing that the essence of intelligence lies in fluid, context-sensitive pattern recognition rather than rigid rule-following.
The code in this directory implements some of the Letter Spirit gridfonts devised by Hofstadter and Gary McGraw in Letter Spirit: An Emergent Model of the Perception and Creation of Alphabetic Style (1993). In these fonts, each glyph consists of an array of strokes, and each stroke connects points in a 3x7 design lattice. More information can be found here, and code is available:
Some more recent related work is Letterform Variations by Nigel Cottier, 2021.
This repository presents is a p5.js recovery of the handcoded monoline font extracted from Textension: Word Processor Variations (1999), an interactive Windows 95/98/XP program developed by JT Nimoy at the Aesthetics & Computation Group of the MIT Media Laboratory. A screen recording of Textension can be found here. Nimoy wrote:
"Textension was a collection of 10 interactive experiments in making creative variations of word processing applications. It was my response as an artist to the way programmers always use the typewriter metaphor when they are creating a typesetting application. Textension combines the metaphor of the typewriter with that of other things in the physical world, such as the act of blowing soap bubbles."
JT Nimoy† (1979–2020) was a prolific software artist and creative technologist, known for her work as part of the CGI team behind TRON: Legacy, as well as her voluminous body of experimental creative coding projects spanning more than two decades.
Kyle McDonald assisted in the recovery of the Textension font data by decompiling the Textension.exe executable with Hex-Rays. The decompiled C++ was ported to p5.js by Golan Levin.
Procedural single-stroke monospace font developed by Jared Schiffman at the MIT Media Laboratory Aesthetics and Computation Group, c.1999-2000. Ported from C++ to Java and p5.js by Golan Levin.
Typode (2013) is a procedural, grid-based, monospace, single-stroke font by Santiago Ortiz (Moebio). Ortiz created Typode "to be used in certain information visualization contexts, in which text needs to adapt to specific shapes". Ortiz's demo includes a collection of "transformation" functions which illustrate the computational malleability of procedural fonts. Typode was ported to p5.js by Golan Levin in January 2025, and is presented here with permission. A p5.js sketch to parse and display Typode is available:
GridFont is a grid-based system for designing simple symbols and fonts, designed by Anders Hoff in 2019. It is mainly intended for plotter drawings, and uses a turtle-graphics-like method for defining stroke paths in the glyphs. This p5.js port is adapted from his repo here, with permission.
Hoff provides two sample fonts: one ("original") which is almost exclusively composed of vertical, horizontal, and 45° angles; and another ("smooth") which has additional line segments, but is still poly-linear. Note that Hoff's demo fonts do not contain capital letters.
- Original Python code by Anders Hoff
- p5.js JavaScript port (in this repository)
- p5.js JavaScript port (at editor.p5js.org)
minf is an ultra-minimal CC0 procedural, grid-based, monospace, monoline vector font by Golan Levin (2024). minf is intended purely as a pedagogic example in type-golfing. All minf glyphs are constructed from a single 4-point polyline: that is, each letter has exactly 4 points, connected by 3 continuous line segments. (None of the line segments have zero length, nor double back on themselves.) No claims whatsoever are made about the attractiveness, legibility, or utility of minf (the M and W are particularly faulty); some code is provided to improve it.
Each of the x and y coordinate values in minf's glyph control points are stored with just 2 bits of resolution. Therefore the entire 26-character font is defined by only {26 letters * 4 points per letter * 2 dimensions per point * 2 bits per number = 416 bits =) 52 bytes of data. In practice it is convenient to store this in a base-64 encoded string, which uses standard ASCII characters; this expands the total complete storage of the minf font to the 72-byte string:
+T4D0dE+zy1tG4Mdw/oDnxm/CLLTDwR/Nd8x/R1xMNL8HhNd0vOLHRvfF50X/R/TBcMdPw==
A p5.js program to load, render, and edit minf is available in this repository and at editor.p5js.org.
- Drawing with Machines Typography resources by Golan Levin
- Summary of single-line fonts (10/01/15), compiled by Lindsay Robert Wilson.
- Singlelinefonts.com, a commercial foundry for single-line fonts by Leslie Peppers.
- OneLineFonts.com, a commercial foundry for single-line fonts by Justin Daniels.
- Drawingbots.net, key resources for plotter enthusiasts, maintained by Maks Surguy.
Here are some inspirational works that make use of single-line fonts.
- Textension: Word Processor Variations by JT Nimoy, 1999.
- Viktor, Hektor, Otto by Jürg Lehni, 2002-2014.
- Typode interactive demo by Santiago Ortiz, 2013.
- chinese-radical-vis & RRPL by Lingdong Huang, 2018.
- Leon Sans by Jongmin Kim, 2019.
- Letterform Variations by Nigel Cottier, 2021.
- X-Y-Z by Andreas Gysin, 2024.
- Interface p5.js to Leon Sans by Jongmin Kim, 2019
Single line font, single stroke font, monoline font, vector font, CNC engraving font, skeleton font, procedural font, computational font, SVG fonts, TTF fonts, Hershey font, AxiDraw, NextDraw, pen plotting, #plotterTwitter, creative coding, typefaces, p5.js, JavaScript, Processing.