Tutorial · 10 steps · ~45 min
Make your first font in the browser.
This is the shortest possible path from a blank tab to an OpenType file you can install on your machine and use in any app. It uses the Patens demo project as a starting point so you have something to edit immediately — type design has a steep enough learning curve without a blank canvas problem on top.
You will not produce a finished, shippable typeface by the end of this tutorial. You will produce a working font file with one or two letters you drew, and you will know where every part of the editor lives. From there, the actual craft begins.
- 1
Open the demo project
Patens ships with a 162-glyph demo font spanning Latin, Cyrillic, and Greek. Opening it gives you an immediate playground rather than a blank canvas. The demo also gives the audit module something to point at — the best way to understand a code is to see it triggered on a real glyph.
Go to /project/demo/edit. The project builds on the fly even if your IndexedDB is empty.
- 2
Pick a glyph to start with
The lowercase n is the canonical "first letter" in type design — it sets stem weight, x-height, sidebearings, and the rhythm of the alphabet in one shape. From n the whole alphabet falls out: o, h, b, d, p, q follow its curves; i and l share its sidebearings.
Select n in the glyph browser. The edit canvas opens with the existing contour visible.
- 3
Sketch with the pencil tool
The pencil tool gives you a pressure-sensitive stroke that captures the gesture before any Bézier math gets in the way. Draw the letter as a single fluid stroke — don't try to draw the outline. The sketch layer is intentionally rough; you trace it into Béziers in the next step.
Press P for pencil. Press 1–9 to set stroke weight. The pressure curve is per-stroke; lighten near the joins for natural taper.
- 4
Trace the sketch to Bézier contours
Patens uses a Schneider curve-fitting algorithm to convert your stroke to a smooth cubic-Bézier contour. The number of control points is chosen automatically based on stroke complexity — fewer, well-placed points read smoother at small sizes than many points along the same shape. Trace runs through a boolean union pass, so overlapping sketch strokes resolve into one closed contour.
Press T to trace. The toolbar shows the contour count; aim for one closed contour per glyph stroke.
- 5
Refine control points
Cubic Bézier contours have on-curve points and off-curve handles. The on-curve points are where the contour passes through; the handles control how curvy the segment gets. Toggle a point between smooth (handles colinear) and corner (handles independent) with the right-click menu or T-key. Smooth points hold a tangent through a curve; corner points hold a sharp join.
Audit code near-collinear-points highlights vestigial nodes you can delete. sharp-kink highlights joins that read as accidental.
- 6
Set the spacing
A glyph has three measurements that govern its layout: the left sidebearing (space before the glyph), the advance width (space the glyph occupies), and the right sidebearing (space after, computed from the advance minus the glyph's right edge). Type designers calibrate these by eye, in context, looking at strings like nnnonnon or HOHOHO. The goal isn't mathematical equality — it's optical evenness.
Press M to toggle metrics mode. The sidebearing inputs accept negative values for letters like italic f.
- 7
Kern a few pairs
Kerning is the per-pair sidebearing adjustment for combinations the default sidebearings don't resolve well. AV, To, We, Yo — these are the classic pairs because the slanted right edge of one letter and the open left of the next create too much space. A negative kern value pulls them closer.
Open the Kerning tab. Patens supports kerning classes (e.g. all uppercase A-grouped letters kern together), which scales to families without authoring N² pairs by hand.
- 8
Run the audit
The audit module checks 94 codes against the project — contour shape, vertical metrics, OpenType invariants, brief completeness, multi-script coverage, naming. Many issues have one-click "Fix" actions (sidebearings deeply negative, off-grid points, near-collinear nodes, etc.). The audit is also a teaching surface: every code links to a plain-language explanation of why it matters.
The audit summary lives at the bottom of the edit panel and on its own page at /learn/audit-codes.
- 9
Pre-flight before export
The release pre-flight is a stricter pass than the per-glyph audit. It checks vertical-metric consistency across OS/2 + hhea, OpenType invariants (kerning enabled with pairs present, classes referenced by at least one pair), required metadata fields (designer, license, vendor ID), and minimum coverage thresholds for the scripts the project declares.
Pre-flight runs from the Release Notes panel. Fix any blocking codes; warnings can ship.
- 10
Export OTF, WOFF2, or TTF
OTF and WOFF2 export entirely in the browser via opentype.js — about 150ms for a Latin font. TTF goes through Pyodide + fontTools + ttfautohint for screen-rendering autohinting; first export loads Pyodide (about 7MB, cached after) and takes a few seconds. UFO export bundles a designer-friendly source format. The .font.json export is the portable Patens source — open it on any device by dropping it on the home page.
Cmd+Shift+E opens the export dialog. Choose your target; the resulting file downloads to your machine.
What's next
If you got through this and want to keep going: the audit-codes reference explains what every warning means, so you can clean up your file with intent rather than guessing. The FAQ covers the next 17 things people ask after their first font.
Stuck? Email hi@patens.design.
Patens is in private alpha. Request an invite →