typodojo studio
How much time do you have?
Mastery takes time. Today it can take five minutes. Switch modes any time; your drawings stay, and every mode earns ranks.
First time? Sketch takes five minutes and earns your white belt.
Coming back to a font? .
A new font, in fourteen steps.
What is your font called?
The name people see in their font menus, shown here in your own letters as you draw.
Coming back to a font?
What kind of font is it?
Pick the closest style. It sets the lines, spacing, pen and tips. Nothing is locked in.
Examples use open-source Google Fonts, for reference only.
Which characters will your font cover?
Pick a language range, then switch sets on or off. Accented letters can be built for you.
Where do the lines sit?
Every letter hangs from the same five lines. Set them once, or download a template to draw on elsewhere.
Font units, out of 1,000 to the em. The baseline is 0.
Draw each character in black inside the frame and export it as its own SVG. Place accents for lowercase; they rise for capitals on their own.
Draw by hand.
Finger, stylus or mouse, right on the lines. Strokes become clean outlines as you go, or skip ahead to import SVGs.
draw your first letter.
One box, one letter. Start with A. The pen does not hurry.
Lesson · stroke order
every stroke has an order.
Follow the numbers. The pen remembers.
Add and review drawings.
Drop SVG files anywhere here, or pick a character to add one. Name files by character: a.svg, A_.svg for capitals, comma.svg, eacute.svg or uni00E9.svg.
Dashed means made for you: built from other drawings or generated for this style.
Check the outlines.
Anything that could look off in the finished font is listed here. Open one to fix it.
Map characters to Unicode.
Unicode tells apps which character a key types. Standard code points and names are filled in; change them only if you need to.
| Code point | Glyph name | Also types | Status |
|---|
Custom characters go in the Private Use Area, U+E000 to U+F8FF, which no standard keyboard types. Pick one from your system's character viewer, or give it a key with Ukelele (Mac) or Microsoft Keyboard Layout Creator (Windows). The no-break space and soft hyphen are mapped for you.
Space the letters.
Set the room beside every letter and between words. Round and pointed letters want a little less; set those one by one in step 6.
Kern the awkward pairs.
Some pairs, like AV, To and Yo, sit too far apart. Add them and pull them together.
Add ligatures and alternates.
Optional OpenType extras. A ligature draws a run of letters, like fi, as one. An alternate is a second letter people can switch on.
Ligatures
Alternates, stylistic set 1
Build the family.
Weights grow or shrink every outline; italics slant them. For a true italic or finer weight, redraw characters for that style in steps 5 and 6.
Lines, underlines and credits.
Line spacing, underline, strikethrough, and the credits and license inside the file.
Line spacing lives inside the font. When someone types a paragraph, this is what they see.
Underline and strikethrough aren't styles: apps draw them through your letters at the height and thickness set here.
Last step.
Try it, then download.
Fonts arrive in one .zip. Mac: double-click a font file, then Install Font. Windows: right-click, then Install. Save the project to keep editing later.