Typography · Do it yourself

Make Your Own Font: Design a TTF File from Sketch to Install

A font is just a small database that says “when someone types this letter, draw these curves”. You can make one with a drawing tool and patience, or with ten lines of Python. This guide covers both: the ideas first, then the tools, then a real tiny font you can download and try.

1. What is inside a font file

Open a .ttf file and you find a lunch box. Each compartment is a table, and each table has one job. The format is called sfnt, and it is shared by TrueType (.ttf) and OpenType (.otf) fonts.

• TTF stores outlines as quadratic curves. OTF with CFF outlines uses cubic curves, which design tools prefer. Tools convert between them when they export.
• WOFF2 is a compressed wrapper for web use. Variable fonts add tables that let one file hold many weights.

For the exact rules, the references are the OpenType specification (Microsoft) and Apple’s TrueType Reference Manual.

2. The route map

3. Meet the letter

Every glyph is drawn on an em square: a grid whose height is the font size. Designers split it into units. 1000 is traditional for PostScript-style fonts and 2048 is common for TrueType, but any value from 16 to 16384 is allowed. Along the grid run horizontal guide lines that every letter respects.

4. Pick your tools

Prices and licences change, so check each site. Related tools worth knowing: fontmake compiles source files (UFO, Glyphs) into font binaries, and the UFO format is an open, folder-based way to store a font design.

Drawing in Adobe Illustrator

Many people already draw letters in Adobe Illustrator, and that works well. One thing to know: Illustrator and Photoshop have no “save as font” command. They make the shapes, and something else builds the font file. There are two common routes:

• Route 1: Fontself Maker. It adds a panel inside Illustrator (and Photoshop). You drag each finished shape into a letter slot, set spacing, and export a font file. Check the current version for the formats it exports (OpenType, TrueType and others).
• Route 2: SVG into a font editor. Export each glyph as SVG, import it into FontForge, Glyphs or FontLab, then space, kern and generate the TTF there.
• From a photo. Adobe Capture can turn a photo of hand lettering into vector shapes that you can bring into Illustrator.

Prepare the artwork in Illustrator

• Work at one scale for every glyph. Draw guides for the baseline, x-height, cap height, ascender and descender, and keep each letter on them.
• Use filled shapes only. Convert live text with Type → Create Outlines, turn strokes into shapes with Object → Path → Outline Stroke, and remove gradients, effects and placed images.
• Merge overlapping pieces with the Pathfinder panel’s Unite, and keep holes (like the inside of an O) as a compound path: Object → Compound Path → Make.
• Keep points at the extremes of curves and avoid extra points. Zoom in and tidy before you export.

Menu names can change between Illustrator versions, so check the current Adobe Help if one has moved.

5. Draw clean outlines

A glyph is made of contours (closed shapes). The letter O has two: the outer ring and the inner hole. Each contour is a chain of points: on-curve points the line passes through, and off-curve points (handles) that bend it.

• Put points at the extremes (top, bottom, left, right of a curve). In FontForge: Element → Add Extrema.
• Merge overlaps so each letter is clean shapes, not stacked pieces (Element → Remove Overlap).
• Mind the direction. TrueType outer contours run clockwise and holes run counter-clockwise (Element → Correct Direction).
• Be consistent. Same stroke thickness, same round-letter overshoot, same x-height across the whole alphabet.
• Start small. Draw H, O, n, o first. Many other letters reuse their shapes and proportions.

Menu names can differ slightly between FontForge versions. The idea is the same in every editor.

6. Spacing and kerning

Spacing is how much empty room sits beside each letter (the side bearings). Kerning is a correction for particular pairs whose shapes leave an awkward hole, like AV, To or Ty. Bad spacing is the number-one reason a homemade font looks homemade.

7. Vertical metrics

Vertical metrics decide the height of a line of text: how much room the font asks for above and below the baseline. The catch is that operating systems read different tables (hhea, OS/2 typo values, OS/2 win values). If they disagree, the same font can look differently spaced on Windows and macOS.

• Choose an ascent that clears your tallest glyph and a descent that clears your deepest, plus a line gap if you want airier lines.
• Set the three sets of values consistently and turn on the “use typo metrics” flag, as the Google Fonts guide recommends.
• Test a multi-line paragraph in a browser and in a word processor before shipping.

The Google Fonts Guide has a clear chapter on this.

8. Build a tiny font from code Try it!

Here is a fun way to see the tables in action: build a real font with a few lines of Python. Tiny Blocks has six letters (H E L O T I), each a polygon of straight lines. The sample below is drawn with the font itself, loaded from the file you can download.

Download TinyBlocks-Regular.ttf (about 1 KB) · make_tiny_blocks.py

The script follows the same map as the lunch box in section 1:

from fontTools.fontBuilder import FontBuilder
from fontTools.pens.ttGlyphPen import TTGlyphPen

def glyph(*contours):                      # a glyph = closed shapes
    pen = TTGlyphPen(None)
    for pts in contours:
        pen.moveTo(pts[0])
        for p in pts[1:]:
            pen.lineTo(p)
        pen.closePath()
    return pen.glyph()

# an L on a 1000-unit grid, drawn clockwise
L = glyph([(80, 0), (80, 700), (220, 700), (220, 140), (520, 140), (520, 0)])

fb = FontBuilder(1000, isTTF=True)         # 1000 units per em
fb.setupGlyphOrder([".notdef", "L"])       # .notdef must come first
fb.setupCharacterMap({ord("L"): "L"})      # cmap: character -> glyph
fb.setupGlyf({".notdef": glyph(), "L": L}) # glyf: the outlines
fb.setupHorizontalMetrics({".notdef": (500, 0), "L": (600, 80)})   # (advance, left bearing)
fb.setupHorizontalHeader(ascent=800, descent=-200)                 # hhea
fb.setupNameTable({"familyName": "Tiny Blocks", "styleName": "Regular"})
fb.setupOS2(sTypoAscender=800, sTypoDescender=-200, usWinAscent=800, usWinDescent=200)
fb.setupPost()
fb.save("TinyBlocks-Regular.ttf")

Install it with pip install fonttools. Then double-click the generated file to install it on your computer, or use it on the web with the CSS in the next section. Try changing a coordinate and rebuilding: the letter changes right away.

9. Export, check, test

In FontForge

1. Element → Validate → Validate. Fix open contours, wrong directions and missing extrema it reports.
2. File → Generate Fonts, then choose TrueType as the format.
3. Install the file (double-click it on macOS and Windows) and open a text editor to see your letters.

Check it properly

Use it on a website

@font-face {
  font-family: "My Font";
  src: url("myfont.woff2") format("woff2"),
       url("myfont.ttf") format("truetype");
  font-display: swap;
}
h1 { font-family: "My Font", sans-serif; }

Convert to WOFF2 for smaller downloads (fontTools can do it, see the WOFF2 specification). The MDN @font-face page explains every option.

10. Names and licence

• Name it. Fill in the family name, style, designer, copyright and licence text in the name table. Avoid names that clash with famous fonts.
• Pick a licence. The SIL Open Font License is the most common one for free fonts. It lets people use, study, change and share the font under clear rules. Or keep it all-rights-reserved if you sell it.
• Start from your own shapes. Do not trace or copy another designer’s font. Rules vary by country, and a font’s licence may forbid modification even where copying outlines might be legal.
• Check the characters. Look up the code points you cover in the Unicode charts, and add the ones people expect (digits, punctuation, accented letters).

This is general information, not legal advice.

11. Checklist and glossary

Links and further reading

• OpenType specification · Apple TrueType Reference Manual · WOFF2
• FontForge · BirdFont · Glyphs · FontLab · RoboFont · Calligraphr · Adobe Illustrator · Fontself · Adobe Capture
• fontTools · fontmake · UFO format · Font Bakery · ttfautohint
• Google Fonts Guide · SIL Open Font License · Unicode charts · MDN: @font-face