Skip to content
Court Connerly

Works best on a wide screen. Open Glyphwork full screen

Custom Font Workspace

Glyphwork

A font creator where you shape letters by hand and AI can imagine the rest of the alphabet.

Details

Role
Concept, design and development
Built with
Paper.js, opentype.js, the Claude API, Next.js, Claude Code
Status
Shipped

The problem

Designing a typeface means making hundreds of related decisions across the alphabet.

The idea

What if you made a few of those decisions by hand and got suggestions for the rest? You type a word, reshape its letters directly, and ask AI how the rest of the alphabet should look in your style. You stay the designer. AI drafts.

How it works

You start with a word set in Karla, an open source sans serif, drawn large against the guidelines type designers work with. Four brushes reshape it: Squeeze, Bend, Add and Erase.

Every letter is shared across the font. Change the l in "hello" and both l's change, along with the alphabet strip and the preview sentence below.

Echo copies a stroke onto the same part of every letter. Pinch the bowl of the o, and every bowl in the alphabet gets the same pinch.

Designing with AI

Predict the rest sends Claude a record of your strokes. It replies with the style rules it noticed and which of your strokes to reuse on each remaining letter.

Its guesses show up in lavender with a confidence score, so they never pass for your own work. You keep or drop each one, and dropped letters go back as feedback on the next prediction. When you're happy, you download a real .otf file you can install and type with.

Flow diagram of a Glyphwork prediction. You shape letters with squeeze, bend, add and erase. Strokes are saved to named parts like bowl, arch and stem. Claude infers your style rules, and its guesses appear in lavender with scores. You keep, drop or export them, and dropped letters go back as feedback. Your shaped letters a, g and e sit beside guessed letters b, c, d, f, h, k, m and n. The result downloads as a real .otf font file.
You shape, Claude suggests, you decide.

Why strokes, not pixels

Each stroke is recorded against a named part of a letter, like a bowl, an arch or a stem. That's what lets Claude reason about your style, and it's why the results come back as clean, editable outlines instead of images.

The motion principle: direct response

The letters follow your hand. Brushes act the moment you drag, and the letterforms themselves animate, not just their position, because the shape is the material you're working with.

Keeping it safe to share

On claude.ai, predictions ran on each visitor's own account. On a public site someone has to pay for them, so predictions go through a small server route on my site. It keeps the API key private, checks every request and limits how often each visitor can ask. A monthly spending cap sits behind all of that.

How I built it

I prototyped Glyphwork with Claude, then brought it into this site with Claude Code. The tool runs as its own page inside the case study, so it didn't need a rewrite, and the prediction endpoint became a Next.js route with rate limiting.

Limits and what's next

It's lowercase only for now, and the map of where each letter's parts sit was drawn by hand, so it's approximate. Next would be uppercase letters, a morph between the original and reshaped letters, and a panel where you can edit the rules Claude finds. That last one is where designing together gets interesting.