The Architecture of Language
02 — Anatomy
Every letterform is built from named parts—the vocabulary type designers use to craft, critique, and communicate about type. Click a part to explore its definition and role.
03 — Classification
Eight major type families, each with distinct visual DNA. Click a category to see characteristics, historical context, and famous examples. Then test your eye with the quiz.
Which classification does this typeface belong to?
04 — Spacing
The space between and around letters is as important as the letters themselves. Kerning, tracking, leading, and measure work together to create visual harmony and legibility.
Classic problem pairs where default letter spacing creates uncomfortable gaps. Adjust kerning to see the optical improvement.
05 — Scale
A modular scale creates a harmonious system of type sizes derived from a single ratio—the same principle used in music. Pair it with a baseline grid to achieve vertical rhythm.
A baseline grid ensures consistent vertical rhythm. Every line of text should snap to a grid unit—typically matching the body text leading.
The quick brown fox jumps over the lazy dog. Typography is the invisible art that shapes how we read and how we feel about what we read.
Every great composition rests on an invisible structure—the baseline grid. When type aligns to this grid, the page breathes with the steady rhythm of a well-tuned instrument.
06 — Variable Fonts
Variable fonts encode an entire type family in a single file, with continuous axes for weight, width, slant, and more. Drag the sliders to explore the design space.
07 — Expressive
When type breaks free of the grid, it becomes illustration. Explore three tools—type on a bezier path, gradient masking, and 3D extrusion—plus a tour of expressive typography movements.
Click to place bezier control points. Text will flow along the curve.
Anti-rational, deliberately chaotic typography. Multiple typefaces, sizes, and orientations on a single page—typography as visual noise and protest.
Typography as pure function. Geometric sans-serifs, strict grids, primary colors. Herbert Bayer's universal alphabet: no capital letters, just geometric forms.
Grid-based, objective, mathematical. Helvetica as the universal face. White space as content. The ideology behind every clean corporate identity system.
Rejection of Swiss rationalism. David Carson, Neville Brody. Layered type, distressed faces, type as image. The page as visual experience.
Variable fonts, kinetic type, generative lettering. Type as animation, as data, as code. The screen as canvas, the browser as design tool.
Monospaced fonts, terminal green on black, ASCII art. The aesthetic of code as culture—embraced by tech companies, then reclaimed by those who lived it first.
08 — Designers
Behind every great typeface is a designer who shaped how the world reads. Eight figures whose work redefined the art and science of letterform design.
09 — Glossary
The essential vocabulary of typography—terms every designer, developer, and communicator should know.