Custom Font Creation: From Concept to Finished Typeface

Font Design Tools Overview

Concept & Sketching

Every typeface starts with a concept: who will use it, in what context, and what feeling should it convey? Before touching any software, sketch your ideas on paper.

Control Characters

Type designers begin with a small set of "control characters" that establish the font's DNA. The traditional test string is:

This string contains characters that define the fundamental proportions: H (vertical proportions, cap height), n (arch shape, x-height), o (round shape, contrast), a (counter shape), and s (complex curves). Get these right and the rest of the alphabet follows logically.

Digitizing Glyphs

Transferring paper sketches to digital involves drawing Bezier curves that define each glyph's outline. The quality of your curves directly affects how the font renders on screen.

Bezier Curve Best Practices

• Use as few points as possible. A well-drawn 'o' needs just 8-12 points. Extra points create bumpy curves.
• Place on-curve points at extremes. Put points at the topmost, bottommost, leftmost, and rightmost positions of each curve.
• Keep handles horizontal or vertical. Control handles should generally align with the x or y axis for smooth curves.
• Match curve direction. All outer contours should run counter-clockwise, inner contours (counters) clockwise in PostScript (CFF) outlines. TrueType uses the opposite convention.

# FontForge Python scripting: Create a basic glyph
import fontforge

font = fontforge.font()
font.em = 1000          # Units per em
font.ascent = 800       # Ascender height
font.descent = 200      # Descender depth

# Create the letter 'o'
glyph = font.createChar(0x006F, "o")
pen = glyph.glyphPen()

# Draw outer contour (counter-clockwise)
pen.moveTo((150, 0))
pen.curveTo((150, 250), (250, 500), (350, 500))
pen.curveTo((450, 500), (550, 250), (550, 0))
pen.curveTo((550, -50), (450, -10), (350, -10))
pen.curveTo((250, -10), (150, -50), (150, 0))
pen.closePath()

# Set width
glyph.width = 700

Building a Complete Character Set

A minimum viable font for English needs about 100 glyphs. For broader language support and professional use, plan for 250-500+ characters.

Work systematically through character groups: lowercase first, then uppercase, then figures, then punctuation, then accented characters. Building accented characters from base glyphs plus combining marks (component-based design) saves significant time.

Spacing & Kerning

Spacing is the most time-consuming part of font creation. Poor spacing makes even beautifully drawn glyphs look unprofessional. There are two levels: sidebearings (spacing) and kerning (pair adjustments).

Setting Sidebearings

Every glyph has a left and right sidebearing (the space between the glyph and its advance width boundaries). The classic approach:

1. Set 'n' and 'o' sidebearings first -- these are your reference characters
2. Space all other lowercase letters relative to 'n' (straight sides) and 'o' (round sides)
3. Test with strings like "nnoonnoo" and "nnHHnnHH" to verify even color
4. Set uppercase sidebearings using 'H' and 'O' as references

Critical Kerning Pairs

After sidebearings are set, kern pairs that still look uneven. Focus on the most visible combinations first:

Adding OpenType Features

OpenType features bring your font to life with automatic ligatures, stylistic alternates, and contextual substitutions. They are written in OpenType Feature File syntax (.fea).

# OpenType feature code (.fea syntax)

# Standard ligatures (fi, fl, ff, ffi, ffl)
feature liga {
    sub f i by fi;
    sub f l by fl;
    sub f f by ff;
    sub f f i by ffi;
    sub f f l by ffl;
} liga;

# Oldstyle figures
feature onum {
    sub zero by zero.onum;
    sub one by one.onum;
    sub two by two.onum;
    # ... etc
} onum;

# Small caps
feature smcp {
    sub a by a.smcp;
    sub b by b.smcp;
    # ... etc
} smcp;

Learn more about implementing these features in our OpenType Features Guide.

Hinting for Screen Rendering

Hinting provides instructions that help font rasterizers align glyph outlines to the pixel grid, improving readability at small sizes on screen. With high-DPI displays becoming standard, hinting is less critical than it once was, but still matters for Windows ClearType rendering.

# Auto-hint with ttfautohint
pip install ttfautohint-py

# Basic auto-hinting
ttfautohint input.ttf output-hinted.ttf

# With common options
ttfautohint --stem-width-mode=qqq --increase-x-height=14 \
  --fallback-stem-width=100 input.ttf output-hinted.ttf

Export, Testing & Distribution

Export Formats

• OTF (CFF outlines): Best for desktop design applications
• TTF (TrueType outlines): Required for web conversion to WOFF2, better hinting support
• WOFF2: Convert from TTF for web delivery (see our TTF to WOFF2 guide)
• Variable font (TTF): Single file supporting multiple weights/styles (see Variable Fonts guide)

Quality Testing with FontBakery

# Install FontBakery
pip install fontbakery

# Run comprehensive checks
fontbakery check-universal MyFont-Regular.ttf

# For Google Fonts submission
fontbakery check-googlefonts MyFont-Regular.ttf

# Check specific areas
fontbakery check-opentype MyFont-Regular.ttf

Distribution Options