FONTOM
A generative type lab. Draw letters as cells, turn them into a typeface with rules, then compose and animate them.
A browser app where a letter is only a grid of cells and one global style decides what those cells become. It exports real fonts, posters and animated loops.
Built with
Next.js · React · TypeScript · opentype.js · Clipper2 · Mediabunny
What it is
FONTOM treats a typeface as data. A letter only stores which cells of a grid are on, and a global style decides what those cells become: pixels, bubbles, liquid joins, bevels, or a module you draw yourself. Move one slider and the whole alphabet redraws.
Everything runs in the browser. No server, no account.
How it works
There are three layers. The glyph is the letter's structure. The style turns cells into outlines for every letter at once: 12 module shapes, roundness, merges, noise, slant and spacing. The composition is a stack of modifiers (repeat, rotate, wave, radial, depth…) that turns set text into posters and loops, with keyframes on a timeline.
It measures the stems, bars and corners you drew, so an H and an O are enough to build A–Z, a–z, 0–9 and punctuation, Spanish and Catalan accents included. Every random step is seeded, so the same settings always give the same result.
- Next.js (static export) · React · TypeScript
- OTF, WOFF and WOFF2 with opentype.js
- Animated SVG, MP4 and PNG frames
Development
From v0.1 to v0.4 in a day.
The editor, generative composition, advanced geometry and motion, released one after another.
Gallery
