dorkhub
show your thing

p5-single-line-font-resources

An archive of monoline vector fonts, and p5.js code to render them.

golanlevin
JavaScript★ 249⑂ 12 forksupdated 1 month ago
alphabetscomputational-designcreative-codingfontsgenerative-arthershey-fontsmonolinep5js
git clone https://github.com/golanlevin/p5-single-line-font-resources.gitgolanlevin/p5-single-line-font-resources
README.mdfork it — it’s yours

p5-single-line-font-resources

banner.png

This is a repository of p5.js (JavaScript) programs for loading and displaying single-line vector fonts (also called single-stroke fonts, technical lettering fonts, stick fonts, skeleton fonts, engraving fonts, or monoline fonts) in a variety of formats — including TTF, SVG 1.1 Font, Hershey Font, and others. This repository also attempts to present an authoritative archive of single-line fonts (and procedural fonts) recovered or extracted from a wide range of creative projects, vintage and obsolete technologies, and other sources.

Most digital fonts are "outline fonts", which represent letterforms as shapes that fill closed contours. By contrast, single-line fonts represent letters with linear skeletons, the same way we might write them by hand. Single-line fonts are ideally suited to creative coding, pen-plotting, laser projection, and CNC machining. Examples in this repository are known to work with p5.js v.1.11.13.

single line vs outline fonts
Single-line font (left) versus outline font (right).

Contents

Minimal SVG Hershey font, inlined in p5.js

"I just want something simple"

This minimal program presents an SVG font inlined in p5.js, with no loading of external resources. 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. It is available:

The typeface happens to be a Hershey (polyline) font, converted to the SVG 1.1 Font format. Note that additional Hershey fonts have also been converted to this format and are available e.g. here, here, and here, as discussed below. This code has been adapted from the hershey font json example by Allison Parrish.

hershey_inline_screenshot.png

p5.js Parser/Renderer for Single-Line SVG Fonts

SVG 1.1 Fonts are a lesser-known open font standard, which allow for entire vector fonts to be stored within a single (specially formatted) SVG file. A number of single-line SVG Fonts have been created. (Note that while SVG 1.1 Fonts are technically SVG files, they don't display normally in SVG viewers.) Here is a p5.js program that parses and displays SVG Fonts:

relief_svg_font.png

Shown above is the elegant Relief open-source single-line SVG font (rendered by p5.js), developed by a team directed by Prof. François Chastanet 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. Here is a quick link to the Relief SVG font.

Another useful single-stroke SVG 1.1 font presented here is ISO 3098 (below), an international standard (adopted in 1974) that provides guidelines for consistent and legible labeling and lettering in technical documentation and engineering drawings. Here are links to both regular and italic versions of ISO 3098 in the SVG 1.1 font format, adapted using data from here. ISO 3098 is constructed from straight lines and circular/elliptical arcs:

iso-3098.png

Finally, a very large archive of compatible SVG single-line fonts is included here, as a mirror of a collection curated by Dr. Windell Oskay of Evil Mad Scientist Laboratories. (Some of these include SVG Font versions of Hershey fonts.) All of these fonts are supported by the p5.js project here.

Archive of SVG fonts

Some additional resources for SVG 1.1 Fonts are:

p5.js Parser/Renderer for Single-Line TTF Fonts

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!

all_ttf_single_stroke_fonts.png

p5.js Parser/Renderer for (Classic) Hershey Fonts

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 the National Bureau of Standards in 1976, in A Contribution to Computer Typesetting Techniques: Tables of Coordinates for Hershey's Repertory of Occidental Type Fonts and Graphic Symbols; a local copy is here (32MB PDF). 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; a live demo is here. (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.

hershey-font-demo-svg

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

hershey_font_demo

pointwise-hershey-to-svg

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:

  1. "Simple", using Lingdong's library API;
  2. "Custom", allowing for your own pointwise manipulations;
  3. "Single Line", in which all text is an unbroken polyline.

pointwise-hershey-to-svg

These additional Hershey+p5 resources by Lingdong Huang are noteworthy:

Also see:

p5.js viewer for JSON-converted AutoCAD SHX fonts

This directory contains:

Monoline .SHX fonts are one of the long-standing native font/shape formats used in AutoCAD and AutoCAD-compatible CAD workflows. They are especially common in technical drawings, architectural plans, and engineering documents. Many DWG/DXF files depend on specific SHX fonts for faithful text appearance.

AutoCAD SHX files are compiled binary files. They are produced from textual SHP shape/font descriptions, but the distributed .shx files normally contain only bytecode-like drawing instructions rather than readable point lists. Here, they have been decompiled using provided Python code, and converted into easily-readable JSON files.

autocad_shx_all_fonts.png

Several of the provided SHX fonts are distinctive and potentially quite useful in how they use line-fill techniques to achieve a pseudo-fill of glyph bodies — for example, in TIMESBD:

autocad_shx_font_TIMESBD_magnified

p5.js port of Saka.N's KST32B font, via Kitasenju Design

KST32B (Kanji Stroke Table) is a comprehensive monospace single-line font originally designed (c.1992, 2017) by Saka.N, covering 4125 characters across multiple scripts: ASCII, half-width kana, hiragana and katakana, Greek, Cyrillic, ISO 8859-15, and both JIS Level 1 and Level 2 kanji. Each glyph is encoded as a compact byte stream of drawing commands on a 30×32 integer grid, using distinct opcodes for horizontal moves, horizontal strokes, and diagonal strokes. In 2014, Saka's work was added to LibreCAD. Inspired by hgsn, Kitasenju ported Saka.N's original binary data to p5.js, annotating each entry with its Unicode equivalent; this adaptation loads that header directly, keying each glyph by Unicode codepoint for straightforward multilingual text rendering in English, Japanese, Greek, Russian, and Chinese.

saka_KST32B_font

p5.js port of M+ kanji/hanzi font

This is a p5.js adaptation of M+ Stroke Font, a single-stroke font specialized for East Asian scripts designed by Coji Morishita of M+ Fonts Project. The font covers the complete hiragana and katakana syllabaries (83 and 87 glyphs respectively) and approximately 5,000 CJK unified ideographs (kanji/hanzi), for a total of ~5,200 single-stroke glyphs. The M+ Stroke Font is available:

M+ Stroke Font

The M+ Stroke Font is extracted from the LibreCAD project, a free open source CAD application (published under GPLv2), from here.

p5.js port of Kamp's HP1345A vector font

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. The p5.js version is adapted from his work, and loads data from the original ROM binaries. The HP1345A font is available:

hp1345a_screenshot.png

p5.js port of Phooky's Apple 410 vector font

This monospace, monoline vector font is from the Apple 410 Color Plotter (c.1983), also sold as the Yokogawa YEW PL-1000. The font was reverse-engineered and extracted from the firmware ROM by Adam Mayer (@phooky), as described in his article, "Pulling Teeth From a Corpse: Extracting the Vector Font From the Apple 410 Color Plotter". This p5.js version is adapted using the font data and extraction code Meyer released in this repository (MIT license). Meyer explains that the data for each character was stored in a single byte: "the high four bits of the byte indicate the X coordinate, and the low four bits indicate the Y coordinate", thus limiting the design to points on a 16×16 lattice; in other words, it is a grid-font. For p5.js it has been encapsulated into JSON. The Apple 410 font is available:

apple_410_font.png

p5.js port of Scruss's Commodore 1520 vector font

This is a vintage monospace, monoline vector font from the Commodore 1520 Printer Plotter (c.1982), recovered from the original ROM data by Jim Brain, Gerrit Heitsch, Silver Dream, and Stewart C Russell (scruss). More information about the recovery and provenance of this data is available here and here. A p5.js port of this font by Golan Levin can be found:

commodore_1520_font

p5.js port of the Tektronix 7000-series readout fonts

The Tektronix 7000 Series oscilloscopes "were produced from about 1970 to 1995" (other sources say 1969-1992). These oscilloscopes had a built-in, EPROM-based character generator which overlaid measurement information onto the displayed signals.

Two different monoline vector fonts were used by the character generator in the Tektronix 7000-series oscilloscope readout systems. The fonts are identified by Tektronix part numbers 160-2997-00 (1984) and 160-2997-01 (1986), and differ in several letterforms and digits. The character sets and their associated hardware implementations were proposed and designed by English-American electrical engineer, Barrie Gilbert.

The p5.js version presented here uses vector line segments extracted from the PDFs Font_160-2997-00.pdf and Font_160-2997-01.pdf, posted by user Luebben to w140.com in 2022. This presentation normalizes the page-rotated coordinates, and stores the glyphs as arrays of single-stroke line segments. The Tektronix 7000-series readout fonts are available:

tektronix_7000_fonts

p5.js port of Ed Logg's Asteroids font

This is a p5.js port of the authentic font used in the Asteroids game, developed in 1979 for Atari by Lyle Rains and Ed Logg. The font was extracted from the 6502 microprocessor assembly instructions embedded on the ROMs of an Asteroids (rev 4) arcade machine. Disassembly was performed by Nick Mikstas, Lonnie Howell, and Mark McDougall, with reformatting and other corrective work (2021) by Andy McFadden as reported here. Game data from McFadden's disassembly, including both font and Asteroid shape information, has been made available:

asteroids_6502_font

ed_logg_asteroids_font_1979.jpg

Another version of the Asteroids game vector font was transduced from the original handwritten notes (c.1979) of Atari programmer Ed Logg by Trammell Hudson. Hudson "modified a few of the characters to make them more distinct as well as added a strike to the 0 so that it stands out from the O", and used this font in his Arduino Asteroids clone, Space Rocks. His C-code data here has been ported to p5.js and is available:

asteroids_screenshot.png

p5.js port of Masaya Matsuura's Vib-Ribbon Fonts

We are pleased to present Latin and Japanese single-line vector fonts extracted from the ROM of Vib-Ribbon (1999), a PlayStation game developed by Masaya Matsuura (松浦 雅也) and NanaOn-Sha. In the game, the typography is procedurally animated, giving the text the same nervous, monoline quality as the main Vibri character and the game's obstacle graphics.

The Vib-Ribbon stroke fonts are available:

Note: If you're doing creative coding in p5.js, it's straightforward to load these fonts and twiddle their vertices with some randomness, as I demonstrate in my included sketch. To be clear, however, the motion you see in this demo (below) is just my own attempt to reproduce the game's behavior; it is not an exact literal replication of the game's animation code.

vib_ribbon_font.gif

This firmware-archaeology project was conducted by Golan Levin in May 2026 with the assistance of Codex GPT-5.5. The fonts were exhumed from the Vib-Ribbon (Europe) (EnFrDeEsIt) (Redump) version of the Vib-Ribbon PlayStation ROM obtained from romsfun.com. Recovery began with an inspection of the ROM's .cue file, in which Track 1 was identified as a MODE2/2352 data track. A set of small Python tools stripped the 2352-byte PlayStation sectors to ISO-9660 payloads, then extracted the filesystem. The game's .PAK files use a leading offset table; after unpacking them, the relevant assets appeared as FONT/01_FONT.TMD and FONT/FE_FONT.TMD. The former contains 76 Japanese glyphs, while the latter contains 113 Latin glyphs.

The game's lettering is stored as compact PlayStation TMD model data: each glyph is a small set of signed 16-bit vertices, connected by line primitives. The TMD object table gives, for each glyph, a vertex list and a primitive list; the primitive records are two-index line segments. These were decoded to JSON while preserving the authentic, unscaled numeric coordinate values from the original PlayStation ROM, with positive Y downward. The Latin mapping was confirmed from lookup tables in MAIN_G.EXE, while the Japanese mapping was refined by visual inspection: it includes digits, katakana, small kana, dakuten, and handakuten (but lacks the character ヲ).

p5.js implementation of multi-segment display fonts

An implementation of 7 segment, 14 segment, and 16 segment LED displays. Based on glyph encodings from Dave Madison's Segmented LED Display - ASCII Library, under MIT license. Note that full 7-bit ASCII character sets (from codepoints 32 through 127) are supported, though legibility may vary. Designs are based on e.g. the HP/Siemens/Litronix DL-2416 17-segment alphanumeric LED display, etc.

multisegment_display.png

p5.js port of Hofstadter's Letter Spirit gridfonts

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/fonts are available:

Letter Spirit Gridfonts

Some more recent related work is Letterform Variations by Nigel Cottier, 2021.

p5.js port of JT Nimoy's Textension font

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."

nimoy_textension.png

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.

p5.js port of Jongmin Kim's variable LeonSans font

p5_leonsans_font

This is a p5.js port of LeonSans by Jongmin Kim (2019), a procedural single-stroke Latin font. LeonSans is distinctive in that it is a variable single-stroke font: its weight parameter (1–900) simultaneously controls both the rendered stroke thickness and the underlying Bézier geometry: control points morph between a thin and a bold variant — so heavier weights produce genuinely different letterform shapes rather than simply thicker lines. Because of its variable weight, this single-line font may be particularly well-suited to supporting plotting with thick pens. This port also includes a special roundCaps option suited for pen-plotters; when enabled, each open stroke endpoint is pulled inward by half the stroke width, ensuring that round-ended strokes land exactly where square caps would. LeonSans is available:

Kielm's p5.js Space Type Generator font

This is an adaptation of an especially versatile, procedural single-stroke monospace font created in p5.js by Kiel Mutschelknaus (@kielm). Mutschelknaus developed this typeface for his Space Type Generator (2019), a customizable kinetic type generator, and released it under the CC by-nc-sa 4.0 license. A special feature of this typeface is that it allows for horizontal and vertical "stretching" without affecting the shape of the characters' rounded parts. A p5.js sketch for the Space Type Generator font is available:

Licia He's p5.js DearPlotter font

The DearPlotter Generator is a program that generates stroke-fonts, created by Licia He through a commission from The Processing Foundation and the Tezos Foundation. The DearPlotter Font Generator is flexibly licensed under Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0), and the fonts created with it are licensed under The SIL Open Font License.

The code presented here reproduces Licia He's underlying ur-font from which all of the DearPlotter Generator fonts are derived. He's original renderer converts each arc to a densely-sampled polyline before drawing; this p5.js adaptation instead renders each stroke in a resolution-independent way with p5's native bezierVertex(). The DearPlotter font is available:

licia_he_font

p5.js port of Moebio's Typode font

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:

moebio_typode_screenshot.png

p5.js port of Daniel Holden's Consolines font

Daniel Holden created the monospace single-line font Consolines (2025) out of a need to present on-screen debugging information in C-like gamedev environments. The letterforms are roughly based on Consolas by Luc de Groot.

Consolines contains line segments for 95 printable ASCII characters, starting with ! and ending with ~. Line segments are encoded by taking the four integer coordinates (start_x, start_y, end_x, end_y) with values ranging from 0-128, and packing them into a single 32-bit integer. The aspect ratio of characters is 1:2. Consolines has been ported from C to JavaScript and is available:

holden_consolines_font.png

p5.js port of Anders Hoff's GridFont

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 fonts do not contain capital (uppercase) letters.

Anders Hoff's GridFont in p5.js

p5.js port of Abel Vincze's GearGenerator font

p5.js port of the compact single-line font embedded in Abel Vincze's GearGenerator.com (Iparigrafika, version 1.01), in which it was used to label gears with ratio and RPM text. Vincze's font appears to be the same as the txt AutoCAD SHX font. The font encodes 73 printable characters on a 7×9 integer grid, compressing all glyph stroke data into three strings totalling under 1 KB; ported from here. The font is available:

vincze geargenerator font

p5.js port of Tyler X. Hobbs' font

Generative artist Tyler X. Hobbs created this uppercase, monospace, monoline font sometime prior to 2021, when he shared it with the artists participating in the Feral File -GRAPH exhibition of generative plotter art. It is available here, ported from Clojure to p5.js, with his permission:

tylerxhobbs_font

p5.js port of Jared Schiffman's font

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, available:

JaredSchiffman_screenshot.png

p5.js port of Glen Kleinschmidt's Fourier Synthesis Character Generator

This is a p5.js adaptation of Glen Kleinschmidt's Fourier Synthesis Character Generator (2014), a single-stroke vector font implemented as a real, working, analog electronic circuit. Instead of storing glyphs as a list of points, Kleinschmidt's characters are defined by the coefficients of sinusoidal basis functions. In the circuit, these coefficients control the amplitude of oscillators, in the same manner as an additive synthesizer. Each glyph is represented as a two-dimensional parametric curve, using only the first five harmonics, as defined by the equations:

x(t)=\sum a_n\sin(nt)+b_n\cos(nt), y(t)=\sum c_n\sin(nt)+d_n\cos(nt)

In Kleinschmidt's circuit, these coefficients were encoded as resistor values in a ROM-like hardware matrix; the selected sinusoidal signals were passively summed to drive the X and Y deflection inputs of an oscilloscope. Kleinschmidt's character set is limited to the sixteen hexadecimal symbols, 0–9 and A–F.

In the p5.js sketch, character shapes are stored as resistor values that encode oscillator amplitudes, and the sketch evaluates the resulting Fourier series directly. The p5.js code can be found:

In the GIF below, the amount of harmonic content is animated.

minf, an Ultra-Minimal Procedural Monoline Font

minf is an ultra-minimal CC0 procedural, grid-based, monospace, monoline vector font for p5.js by Golan Levin (2024). minf is intended purely as a pedagogic experiment 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. minf is also available in this SVG 1.1 font.

minf.png

Additional resources

Some inspirational artworks

Here are some inspirational creative software projects that make use of single-line fonts.

Todo

Keywords

Single line font, single stroke font, stick font, monoline font, vector font, CAD font, CNC engraving font, technical lettering font, pen plotter font, skeletal font, skeleton font, procedural font, procedural typeface, computational font, computational typography, SVG fonts, TTF fonts, SHX fonts, Hershey font, AxiDraw, NextDraw, pen plotting, #plotterTwitter, creative coding, typefaces, p5.js, JavaScript, Processing, archive, media archaeology, retrocomputing.

more like this

q5xjs

A small and fast alternative (experimental) implementation of p5.js

JavaScript★ 574
@LingDong-

search

search projects, people, and tags