← Back to Gallery

Typography & Letterforms

Bezier curves, font rendering, kerning, and calligraphy

Explore the mathematics and craft behind type design. From the recursive elegance of De Casteljau's algorithm to the optical illusions that make letterforms perceptually balanced, these interactive demos reveal how fonts are constructed, rendered, and refined.

Curve Construction

The geometric foundations of letterform design, from Bezier curves to glyph editing.

01
De Casteljau's Algorithm
Interactive cubic Bezier curve construction with recursive subdivision visualization. Drag control points and watch the algorithm trace the curve at parameter t.
07
Bezier Glyph Editor
A mini font editor: place anchor points, drag handles to shape curves, and build letterforms contour by contour with pen and select tools.

Rendering & Rasterization

How vector outlines become pixels on screen, from binary rendering to subpixel tricks.

02
Font Rasterization
Watch glyph outlines get scan-converted to a pixel grid. Toggle anti-aliasing and hinting to see how each technique improves readability.
06
Subpixel Rendering
Compare binary, grayscale, and LCD subpixel rendering side by side. Zoom into individual RGB subpixels to see how they triple horizontal resolution.

Spacing & Shaping

The art of fitting letters together: kerning pairs, tracking, and OpenType text shaping.

03
Kerning Playground
Click between letter pairs to adjust spacing. See baseline, ascender, and descender metrics. Try auto-kern for common pairs like AV, WA, and To.
10
Text Shaping Engine
Visualize the OpenType shaping pipeline: ligature substitution (fi, ffl), kerning, contextual alternates, and stylistic sets applied stage by stage.

Type Design

Parametric design, optical corrections, variable axes, and the craft of making letters beautiful.

05
Variable Font Axes
Explore weight, width, slant, and contrast axes that define a variable font's design space. Watch letterforms interpolate continuously between masters.
08
Optical Illusions in Type
Five optical corrections type designers use: overshoot, midline shift, horizontal thinning, stroke tapering, and visual weight balance.
09
Parametric Letterforms
Metafont-inspired parametric type: adjust stem width, serif length, bowl roundness, x-height ratio, contrast, and slant to design entire alphabets from parameters.

Calligraphy

The living art of lettermaking with broad-edge pen simulation.

04
Broad-Edge Calligraphy
Draw with a simulated broad-edge nib. Control pen angle, nib width, and pressure. Toggle calligraphic guidelines for baseline, x-height, and ascender lines.