typodojo studio
How much time do you have?
Mastery takes time. Today it can take five minutes. Pick a mode for the time you have; change modes any time and your drawings stay as they are. Ranks are earned in every mode.
First time? Sketch takes five minutes, and your first font earns your white belt.
Coming back to a font? .
A new font, in fourteen steps.
What is your font called?
This is the name people will see in their font menus. Once you add drawings, it appears here in your own letters.
Coming back to a font?
What kind of font is it?
Pick the style closest to what you have in mind. It sets up the lines, spacing and pen to suit, and gives you drawing tips along the way. Nothing is locked in.
Examples are shown in open-source fonts from Google Fonts, for reference only.
Which characters will your font cover?
Start from a language range, then switch sets on or off. Accented letters can be built for you from the plain letter and the accent.
Where do the lines sit?
Every letter hangs from the same five lines. Set them once. If you'll draw in another app, download a template to draw each character on.
Heights are in font units, out of 1,000 to the em. The baseline is 0.
Draw each character in black inside the template's frame and export it as its own SVG. Accents go where they sit on a lowercase letter; they move up for capitals by themselves.
Draw by hand.
Draw each character with a finger, stylus or mouse, right on the lines. Your strokes become clean outlines as you go. Rather draw in another app? Skip ahead and 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.
Every character, drawn, imported or built. Drop SVG files anywhere on this screen, or pick a character to add one. Name files by character: a.svg, A_.svg for capitals, comma.svg, eacute.svg or uni00E9.svg.
A dashed outline means the character is made for you: built from other drawings, or generated for this style.
Check the outlines.
Fonts need clean, filled shapes that sit on the same lines. Anything that could look off in the finished font is listed here. Open one to fix it.
Map characters to Unicode.
Unicode is how every app knows which character a key types. Each drawing has a code point and a glyph name. The standard ones are filled in; change them only if you need to, or add your own characters.
| Code point | Glyph name | Also types | Status |
|---|
Custom characters live in Unicode's Private Use Area, U+E000 to U+F8FF, which no standard keyboard types. To type one, pick it from your system's character viewer, or give it a key with a keyboard layout app such as Ukelele on a Mac or Microsoft Keyboard Layout Creator on Windows. The no-break space and soft hyphen are mapped to the space and hyphen for you.
Space the letters.
Set the room on each side of every letter and between words. Round and pointed letters usually want a little less than straight ones; set those one by one in step 6.
Kern the awkward pairs.
Some pairs sit too far apart even when every letter is spaced well, like AV, To and Yo. Add them and pull them together.
Add ligatures and alternates.
Optional extras, written into the font as OpenType features. A ligature replaces a run of letters, like fi, with one drawing. An alternate is a second version of a letter that people can switch on.
Ligatures
Alternates, stylistic set 1
Build the family.
Make bold, light and italic versions from your drawings. Weights grow or shrink every outline; italics slant them. For a true italic or a finer weight, redraw any character for that style in steps 5 and 6.
Lines, underlines and credits.
How far apart lines of text sit, where apps draw the underline and the strikethrough, and the credits and license that travel inside the file.
Line spacing is set inside the font. Apps use it when someone types a paragraph, so this is what they will see.
Strikethrough isn't a separate style: it's a line apps draw through your letters, at the height and thickness set here. The same goes for underline.
Last step.
Try it, then download.
Fonts arrive in one .zip. On a Mac, double-click a font file and choose Install Font. On Windows, right-click it and choose Install. Save the project to keep editing later; it holds every drawing and setting.