A Metafont-style alphabet drawn by a parametric pen, morphing through ten styles.
Every letter is a tiny program of skeleton strokes (lines, curves and superellipse arcs) that reads the parameters, and an elliptical pen is swept along each one. For a convex pen the edge of the stroke follows the pen's support point, so each sampled piece becomes one quadratic Bezier whose control point is where its end tangents meet; corners get miter or round joins and ends are flat, horizontally cut or round. A flat ellipse gives Didone hairlines, a circle gives a monoline, tilting it gives oldstyle stress, and serifs are just more strokes drawn by the same pen, so they become hairlines or slabs on their own. The whole font is rebuilt from scratch every frame while the autopilot morphs between styles, and the skeleton view shows the centerlines, the pen's footprints and a nib traveling along each stroke.
Try it. Drag the ten sliders (weight, contrast, width, slant, x-height, serif, bracket, roundness, squareness and pen angle) or pick a preset. Type to set the large letters, click a letter in the alphabet to inspect it, and click anywhere else or press Space to toggle the skeleton. The arrow keys pick and nudge a slider, and the number keys choose presets.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a parametric typeface in the spirit of Knuth's Metafont with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Describe a few lowercase letters (say "n", "o", "h", "e" and "l") as skeletons: centerline strokes made of straight lines and elliptical arcs, measured from a baseline and an x-height.
- Write the letters as small functions of parameters (weight, width and x-height) so that changing a number reshapes them. Give bowls by their outer edges and pull the centerline inward by half the pen, so heavier weights grow inward instead of spilling past the baseline.
- Draw each stroke by sweeping a pen along it. Start with a round pen: offset the centerline by half the weight on both sides and join the two sides into one closed shape with round caps.
- Fill all the stroke shapes of a letter together with the nonzero rule, so overlapping strokes merge into one letter.
- Add sliders for the parameters and redraw the whole word on every change.
Once that works, make it beautiful:
- Replace the round pen with an ellipse, so horizontals get thinner than verticals (contrast), and add a pen angle that tilts the stress.
- Add serifs as short extra strokes drawn by the same pen, so they become hairlines with high contrast and slabs with none.
- Show the skeleton, its nodes and the pen footprints on top of a large letter, typeset like a type designer's proof on warm paper.
- Add an autopilot that eases between named styles, such as a hairline sans, a bold slab and a high-contrast Didone.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as completing the alphabet with capitals, exporting the outlines as SVG, or converting each offset curve into quadratic Beziers like a real font file.
