22 · In-house · Web app · Typography

TypeGrid: design your own pixel fonts, right in the browser.

Draw letters on a grid, melt the pixels into smooth, liquid shapes and download the result as a real font. TypeGrid runs entirely in the browser – no account, no server, no upload.

Own project (in-house) – built by vona for itself · project from 2026

Web app
HTML/CSS/JavaScript
Single file
opentype.js
Clipper
OTF & WOFF
SVG
No account

0 uploads
all drafts stay in the browser – no account, no server, no tracking: 94 characters
A–Z, a–z, 0–9 and punctuation, plus custom symbols: 3 export formats
OTF to install, WOFF for websites, SVG for graphics software

01 · Idea

Pixel fonts are popular, but the tools for making them are often clumsy: either you only get rigid squares, or the rounding is applied like a blur over the whole shape and the corners lose their sharpness. We wanted a tool for drawing letters quickly on a grid and then deciding deliberately where the pixels flow into each other. The result should not be an image but a real font that can be installed and used on websites.

02 · Solution

Draw: Each character is drawn on a grid of 3 to 20 columns and 5 to 24 rows. A click toggles a cell, dragging paints, a right click erases. Mirroring, shifting, undo and redo are built in, as is keyboard control. A starter alphabet shows straight away how the result looks; if you prefer, you start with a blank alphabet.

Melt: Four sliders apply to the whole alphabet: pixel roundness, radius of the liquid joins, gap between cells and outline thickness. The joins only appear where pixels actually touch – horizontally, vertically or diagonally, depending on the setting. Single pixels can stay square if you want, and counters such as the inside of the “O” stay cleanly open. Pure outline fonts are possible too.

Custom characters: Besides the alphabet you can create your own symbols, either assigned to a specific Unicode character or automatically to a free slot in the private use area. A random generator creates new patterns at the push of a button: scattered dots, areas, lines or paths that wander across the grid.

Test and export: Below the alphabet is a preview for your own text, with size, letter spacing, line height, colours and proportional spacing. Export is available as OTF to install, as WOFF for websites and as SVG for graphics software. Projects can be saved as a file and opened again.

03 · Result

TypeGrid is a single HTML file of about 500 KB. It runs on a web server just as well as opened straight from your own computer. There is no account, no tracking and no upload: all drafts stay in the browser and are saved there automatically. A strict content security policy makes sure the page loads nothing from other sources.

Preview, SVG and font file share the same outlines and spacing – what you see in the preview is what ends up in the font. We tested the exported fonts with the independent tool fontTools and with Chrome’s font checker. TypeGrid was built with Claude Code; the app itself contains no AI. Inspired by A. Burmistrov of antoncreations.

Open the app ↗

04 · Workflow

From grid to font: pick a character and set cells, adjust roundness, joins, gap and outline for the whole alphabet with four sliders, check your own text in the preview and export as OTF, WOFF or SVG. Everything runs in a single HTML file in the browser, and drafts are saved there automatically. Custom symbols can be added by hand or with the random generator, and the project can be saved as a file and opened again.

05 · Insights

Workspace: shape controls on the left, editor in the middle, alphabet on the right
The “g” in the editor: the liquid shape sits right on the grid, the dashed line is the baseline
With roundness and liquid joins: the pixels flow into each other
The same alphabet without roundness and joins – classic square pixels
Outline mode: the same letters become a hollow outline font
Randomly generated symbols: dots, areas, lines and paths
The exported WOFF font as a real webfont on an HTML page – selectable text, not an image
On the phone: editor and alphabet stacked, operated by touch

Related services

We can do this for you, too.

The services behind this project — with examples, process and frequently asked questions.

Design

Corporate design, web design, print and UI/UX — from brand identity to user guidance. We design brand presences with clear recognition value and interfaces that are easy to use.

Learn more →

Development

Web development, app development and custom software — tailor-made, performant and built around your business. We build digital products that keep working: cleanly built, easy to maintain and ready to grow.

Learn more →

Keep reading

Background from practice.

Blog

Typography for the Web: More Than Choosing a Font

Variable fonts, fluid type scales, optical kerning — typography on the web is far more than choosing a font family.

Blog

Vanilla JS vs. Frameworks: The Honest Trade-Off

React, Vue, Svelte — great tools. But not always the right tool for the job. When we deliberately decide against them and why.

Next project

Your project here?

Tell us about your problem. The first conversation is of course free of charge and without obligation.

Request a project →