Make your font

What happens when you lift the pen

While your pointer is down, the maker collects its path and runs it through a light low-pass filter, so a shaky hand comes out slightly calmer without the line trailing behind the pen. When you lift, the trail is thinned (points closer than 2.5 units are dropped) and stored as a smooth curve with a pen width. That stored curve is the glyph. There is no bitmap involved, which is why it stays sharp at any size.

Seconds later the whole project is written to IndexedDB, a database built into your browser. The header changes from “Saving…” to “Saved” when the write finishes. Nothing in this step is a network request; you can check the Network tab of your browser's developer tools while you draw and see only the page's own files loading.

Reading the four guide lines

The drawing box is 500 units wide and 600 tall. Four lines are printed into it, and the font is built from where your strokes sit relative to them.

In the exported font the baseline is zero, the box is scaled by two, and the ascender line lands at 660 font units, so a letter keeps the height you gave it on screen.

Pens, ghosts and second tries

The three pens are 8, 14 and 24 units wide: Fine for tidy small writing, Medium as the default, Bold when you want a marker look or a dot you can see. Use one pen for the whole alphabet. Switching width halfway is the quickest way to a font that looks like two people wrote it.

Compare lays a faint Caveat copy of the same letter behind your drawing, purely as a size reference; it is never saved. The Variant buttons let you draw an optional second version of a letter. The live preview alternates the two when a letter repeats, and the handwritten-pages tool will too, but the font file takes your first drawing only.

Six habits that make a font look uneven

1. 1.Floating off the baseline

   A letter that hovers a few units above the line looks like it is hopping. Land every round letter on the solid line.

2. 2.Mixed pen widths

   Fine for a to m and Bold for n to z reads as two hands. Pick one.

3. 3.Changing slant

   If your a leans right and your e stands up, the sentence wobbles. Decide your slant before letter one.

4. 4.Tiny letters in a big box

   Small drawings leave huge gaps. Fill the space between x-height and baseline.

5. 5.Round letters too narrow

   o, c and e that are noticeably thinner than a or d make words look squeezed.

6. 6.Drawing in a hurry

   The last ten letters are always the worst. Take a break at m and come back.

Adjusting before you export

Letter spacing runs from −10 to 60 units and is added after every glyph; the preview size slider (28 to 96 px) only changes what you see. For a single stubborn letter, the nudge sliders move it up or down by up to 60 units or scale it between 60% and 140% around its centre. Both nudges are baked into the font when you export, so what you check is what you get.

What is inside the file

Every stroke is widened into a closed outline with round ends, overlapping strokes are merged into one shape, and the result is written as a TrueType font with 1,000 units per em, an ascent of 800 and a descent of 300. There is a blank space glyph 300 units wide and an empty-box .notdef. The demo alphabet, which has 26 letters, comes to 28 glyphs and 21,276 bytes. Its first four bytes are 00 01 00 00, the TrueType signature, and that check runs on every export before the download starts.

When something looks wrong