← All tutorials · Lumina

Tutorial 13 of 13

Draw a font and export TTF or a variable font

Intermediate 15 min

Use Font Foundry in Type Lab to draw glyph outlines, set metrics and kerning, add a Bold master and download a verified TrueType or variable TrueType font.

Open Font Foundry

Open Type Lab from Lumina's editing rail or /app#type and choose Font Foundry in the toolbar. The first time, Font Foundry opens the original Lumina Starter font: the capitals H, I, L, O, T and V plus a space, drawn in a Light and a Bold master on a weight axis. Your latest font stays in this browser as a draft; Download font project saves a .lumina-font.json file you can reopen with Open font project or font file or with Lumina's main Open button.

Other ways to start:

  • New font from the starter loads the starter again (Undo brings your previous font back).
  • Import Grid Font Builder draft traces the bricks of your latest grid font into outlines. In Grid Font Builder itself, Open in Font Foundry does the same, and Download TTF font writes an installable font straight away.
  • Open font project or font file also opens a TrueType .ttf file for editing (one master, default instance). Only edit fonts whose license allows modification.

Draw and edit outlines

Choose a glyph under Current glyph. The editor shows the em square with the baseline, x-height, cap height, ascender and descender as blue lines and the advance width as purple lines. The other master appears as a dashed outline.

  • Select tool: drag a point. Square points are on-curve, round points are off-curve controls.
  • Pen tool: click to add a point after the selected one. New pen points are on-curve decides whether the click adds a corner point or a curve control.
  • With the editor focused, arrow keys move the selected point by 10 units (Shift: 1 unit), Page Up and Page Down select the previous or next point, and Delete removes it.

The points table below the editor edits exact X and Y values of the selected Contour. Each point's type button switches it between on-curve and off-curve. Use Add point after selected, Delete selected point, Add rectangle contour, Reverse contour direction and Delete contour for the structure. Outer contours run clockwise, counters (holes) counter-clockwise.

Adding, deleting or switching points always changes every master, so the masters stay point-compatible; moving a point changes only the master you are editing.

Metrics and glyphs

Under Font, set the Font family name, Designer and License text (the generated font belongs to you; add a license so others know how they may use it) and the vertical metrics Ascender, Descender, Cap height and x-height. Per glyph, set Unicode values (characters or values such as U+0041), Advance width and Left side bearing — changing the side bearing moves the outline.

Add a glyph with New glyph character and Add glyph; Remove glyph also removes its kerning pairs.

Masters and the weight axis

Pick the master to edit under Masters. A font with one master shows Add Bold master: it offsets every outline by Stroke growth for the Bold master (units) and adds a wght axis, so you can refine the Bold drawing point by point. Copy this glyph from the other master resets the current glyph to the other master's drawing, and Remove extra masters returns to a static font.

Kerning and live preview

Kerning pairs lists every pair with one value per master; negative values move the right glyph closer. Enter a Left character and Right character and choose Add kerning pair.

Live preview draws the Preview text with the font that Font Foundry just built, loaded into your browser. Move Preview weight to see the interpolated weights. The line below compares the width the browser rendered with the advances and kerning in the font file, for example "Browser width 442.9 px matches the font advances and kerning (442.9 px)."

Export and verification

Every change rebuilds the font and reads it back. The verification list shows checks such as table checksums, character map lookups, outlines read back, advance widths, kerning, and for variable fonts the master outlines through gvar, HVAR and kerning variations and the interpolated named instances (Light, Regular, Medium, SemiBold, Bold within the axis).

  • Download variable TTF writes one font with the weight axis (fvar, gvar, avar when mapped, STAT and HVAR). It needs point-compatible masters; otherwise the list names the glyph to fix.
  • Download static TTF writes the master you are editing as a static font.

The same engine is available as the TrueType & Variable Font Builder tool for API and MCP use, and the Font File Inspector reads TTF, OTF and WOFF files back.

Limits: TrueType outlines without hinting, up to 600 glyphs and 4000 kerning pairs, masters only at the axis minimum or maximum, no composite glyphs, CFF, mark positioning or WOFF2 export.

Ready to try it?

Launch Lumina →