Penform: keeping handwriting intact in a font
Origin
I saw someone turn their handwriting into a font for a card. I wanted to make my own, with the actual pen strokes preserved and a way to inspect each character. That became Penform. The handwriting font used on this portfolio is one of its outputs.
Overview
Penform turns a filled paper template into an installable OpenType font. The writer prints an A4 or US Letter sheet, fills its character boxes, and brings a photo, scan, or single-page PDF into the browser. After aligning the page, they review the extracted characters and try the font in real text.
I designed and built the product, including the template geometry, image processing engine, character editor, font generator, and local saves. The template identifies each character by its position. That let me build around image processing without asking a model to recognize or redraw the handwriting.
The difficult work was preserving the differences that make handwriting personal while correcting the distortions introduced by paper, cameras, and font rendering.
Constraints
A technically valid font can still lose the writer's handwriting.
A phone can store a photo sideways and use orientation metadata to display it upright. A tilted camera also changes the apparent shape of the page. If the editor and engine use different coordinates, carefully placed handles still produce the wrong crops.
Implementation
I used the printed sheet to remove ambiguity, then kept the remaining corrections visible to the writer.
Each template defines its paper dimensions, 80 character boxes, alignment targets, and font guides in one TypeScript manifest. Printing and extraction use the same measurements. Adding US Letter therefore changes page geometry without creating a second image processing engine.
I placed the baseline and height markers outside the writing boxes. The engine crops the writing area, so those guides do not need to be removed from the handwriting. Printed structural marks use a color the processing can suppress. This reduced how much cleanup had to distinguish a guide from a genuine pen stroke.
Features
Print and capture a known layout
Choose A4 or US Letter, print at full size, and write inside the boxes. Four targets let the app straighten a photo or scan before extracting the characters.
Inspect the actual letter shapes
Compare each crop with its outline. Recover faint ink, correct alignment, or deliberately exclude a character before building the font.
Test the exported font in real text
Type a sentence into the preview and inspect height, spacing, and alternate letters. Download the OTF or save the build locally for further editing.
Results
The output is a font file that can leave the app. This portfolio uses one made from my own sheet.
- A4 and US Letter share the extraction and font engine while retaining their own page measurements.
- The font preserves template-based proportions, interior loops, and captured alternate shapes. Spacing accounts for the widest variation of each character.
- Character edits are scoped to both the letter and its capture. Job identity checks prevent outdated processing results from replacing current work.
- Saved builds reopen with their refined captures and review state, with the original-upload limitation made explicit.
What mattered
The most useful design decision was controlling the input through a printable template. It made character identity and measurements explicit before any processing began. The remaining uncertainty stays in review, where the writer can see whether a faint stroke or an unusual loop survived.