inktype.cc How it works
Inside the browser

From pen strokes to an OpenType font

The page markers tell inktype.cc where the grid is. The browser straightens the image, turns the ink in each cell into an outline, and builds those outlines into one installable OTF file.

1. Find the page

Four markers define the capture sheet

Each corner has a black ArUco marker. Its pattern identifies the corner and also carries the template version and language. The app checks the set before it reads any handwriting, which prevents a partial or mixed sheet from being processed as if it were complete.

A phone photographing an inktype.cc sheet marked at all four corners
2. Straighten the image

Perspective correction maps the photo back to the page

A phone is rarely held at a perfect right angle. The four detected corner positions define a perspective transform, also called a homography. The browser uses it to map the photographed sheet back to a consistent A4 coordinate system.

This correction handles ordinary camera tilt. It cannot fully undo a page that is curled, folded, or hidden by a shadow, because different parts of the paper no longer lie on the same flat plane.

3. Read the cells

Each grid box becomes one glyph image

The capture sheet uses an 11 by 10 grid. Once the page is straightened, the app extracts the cells in their known order. The selected language tells it which character belongs in each labelled position.

Adaptive thresholding separates darker strokes from the local paper background. That local calculation helps when one side of the photo is slightly darker than the other. Sensitivity and Threshold controls let you change how much ink is kept for the whole page or one glyph.

4. Trace the ink

Pixels become editable vector outlines

The app traces the kept ink into paths. Vector outlines can be scaled and shifted without preserving the original camera pixels, which is what the font builder needs. The untouched traced path is kept as the source while you adjust the displayed glyph.

Threshold controls change the trace itself. Shift, scale, and advance width change how that traced shape sits and spaces inside the font.

5. Tune the set

Global and per-glyph edits work together

Global controls move, scale, or space every glyph. Per-glyph controls correct one character without changing the rest. The final position combines both layers, so you can set a useful overall baseline and then fix individual outliers.

Auto-process can normalise size, baseline, and spacing. Auto-crop spacing measures the ink bounds and applies the side margins you choose. Neither operation locks the result; every value remains editable.

The inktype.cc glyph editor and live handwriting font preview
6. Build the font

The browser compiles one OTF file

The font engine adds each adjusted outline to an OpenType font, along with its character mapping and spacing. The live preview uses a temporary version of the same font. When you export, the browser creates the final .otf file and downloads it to your computer.

Image processing runs in a Web Worker so the heavier work does not block the main page. The app still needs JavaScript and a desktop-sized viewport to run the editor.

Local by design

Your sheet stays on the device

There is no account or font-storage backend. Processing happens in the browser, and editing settings are kept in local browser storage for the same file name and size. Clearing site data or switching browser profiles removes access to those saved settings.

Read the privacy policy for the complete description of local storage and the limited site telemetry.