Typography World

Click canvas to add control points (3+ for curve)

Click to place bezier control points. Text will flow along the curve.

Gradient angle 45°

Animation speed 1.0×

Color 1

Color 2

Rotation X -15°

Rotation Y 20°

Extrusion depth 12px

Light angle 45°

Dada

Dada (1916–1924)

Anti-rational, deliberately chaotic typography. Multiple typefaces, sizes, and orientations on a single page—typography as visual noise and protest.

Bau

Bauhaus (1919–1933)

Typography as pure function. Geometric sans-serifs, strict grids, primary colors. Herbert Bayer's universal alphabet: no capital letters, just geometric forms.

Ag

Swiss International (1950s)

Grid-based, objective, mathematical. Helvetica as the universal face. White space as content. The ideology behind every clean corporate identity system.

Ital

Postmodern (1980s–90s)

Rejection of Swiss rationalism. David Carson, Neville Brody. Layered type, distressed faces, type as image. The page as visual experience.

var

Digital Native (2000s–now)

Variable fonts, kinetic type, generative lettering. Type as animation, as data, as code. The screen as canvas, the browser as design tool.

0x41

Hacker Aesthetic

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.

AF

Adrian Frutiger

1928–2015 · Swiss

Created the definitive humanist sans-serif in Univers—the first typeface designed as a systematic family of 21 weights and widths, numbered rather than named. Later designed Frutiger for the Charles de Gaulle airport.

UniversFrutigerAvenir

"A typeface is not a piece of art in itself; it exists to serve the text."

HZ

Hermann Zapf

1918–2015 · German

Master calligrapher turned type designer. Created Palatino from his study of Renaissance letterforms and Optima—the only major typeface that is neither serif nor sans-serif, but a "serifless roman." Also designed Zapf Dingbats.

PalatinoOptimaZapfino

"Typography must be as beautiful as the thought it expresses."

MC

Matthew Carter

1937– · British-American

Designed more typefaces in daily use than any living designer. Created Georgia and Verdana specifically for screen legibility in 1996—still the most widely used screen-optimized typefaces. Founded Carter & Cone with Cherie Cone.

GeorgiaVerdanaBell Centennial

"I start from constraints. The constraints are what make the work interesting."

ZL

Zuzana Licko

1961– · Slovak-American

Co-founder of Emigre magazine and Emigre Fonts, the first digital-native type foundry. Embraced low-resolution bitmaps as a design feature rather than a limitation—her early faces (Modula, Emigre) defined the aesthetic of desktop publishing.

Mrs EavesEmigreModula

"We read best what we read most."

ES

Erik Spiekermann

1947– · German

Information designer, typographer, and entrepreneur. Founded MetaDesign and FontShop. Designed FF Meta, called "the Helvetica of the 1990s"—a humanist sans-serif that brought warmth back to corporate identity. Redesigned the Berlin S-Bahn system map.

FF MetaITC OfficinaFF Unit

"Type is a beautiful group of letters, not a group of beautiful letters."

TFJ

Tobias Frere-Jones

1970– · American

Designed Gotham, the typeface that defined American institutional confidence in the 2000s—used on the Obama campaign and the 1 World Trade Center cornerstone. Also designed Interstate, inspired by U.S. highway signage. Founded Frere-Jones Type.

GothamInterstateRetina

"The best typefaces are the ones people don't notice."

JH

Jonathan Hoefler

1970– · American

Founded the Hoefler Type Foundry (now H&Co). His Hoefler Text was bundled with every Mac. Created the elegant editorial typeface family Requiem, and Chronicle—the workhorse serif of major newspapers. His digital lettering work appears on U.S. currency.

Hoefler TextRequiemChronicle

"Type is a tool. The best tools disappear into the work."

PB

Paul Renner

1878–1956 · German

Created Futura in 1927—the typeface that became synonymous with modernism, geometry, and the future. Constructed entirely from circles, triangles, and rectangles. Used on the Apollo 11 commemorative plaque left on the Moon, NASA mission insignia, and Volkswagen.

FuturaPlakFutura Display

"The typeface of today must serve the needs of the present."

Apex

The point at the top of a triangle or angle where two strokes meet—the peak of A or M. Its sharpness or rounding helps identify a typeface's style.

Arm

A horizontal or upward diagonal stroke that is free at one end—seen in E, F, K, L, T, Y. Arm length and angle contribute significantly to a letterform's rhythm.

Ascender

The part of a lowercase letter that extends above the x-height—the vertical strokes of b, d, f, h, k, l, t. Ascender height relative to cap height varies by typeface.

Baseline

The invisible horizontal line on which most letters appear to rest. The baseline is the primary reference point for all vertical type measurements and grid alignment.

Bowl

The curved stroke that encloses the counter of letters like b, d, o, p, q, R. The shape—circular, oval, or slightly squared—is a key identifier of typeface classification.

Cap Height

The distance from the baseline to the top of uppercase letters. Rounded capitals like O slightly exceed cap height to appear optically the same size as flat-topped letters like H.

Counter

The fully or partially enclosed space within a letterform. In o, e, d—fully enclosed. In c, n—open counter. Counter size and shape dramatically affect legibility at small sizes.

Crossbar

The horizontal stroke that connects two vertical strokes (A, H) or crosses a single stem (f, t). The height of the crossbar affects the optical balance and apparent proportions of the letter.

Descender

The stroke of a lowercase letter that extends below the baseline—in g, j, p, q, y. The descender depth affects line spacing requirements and the overall color of a text block.

Ear

The small decorative stroke projecting from the upper-right of the bowl in the lowercase g, and sometimes r. Ear shape is one of the clearest visual differentiators between typefaces.

Glyph

A specific visual representation of a character or symbol. A single character may have multiple glyphs (regular, italic, small cap, swash variant). A complete font contains hundreds or thousands of glyphs.

Grid

An underlying invisible structure of columns, rows, and baseline guides that organizes elements on a page. The typographic grid was systematized by Swiss designers in the 1950s.

Kerning

The adjustment of space between specific letter pairs. Kerning addresses optical imbalances that occur between pairs like AV, To, Ty—where letter shapes create uncomfortable gaps or crowding.

Leading

The vertical space between lines of type, measured from baseline to baseline. Named for the lead strips used in hand-typesetting. Optimal body text leading is typically 120–145% of font size.

Ligature

Two or more letters combined into a single glyph to avoid awkward collision. Common ligatures include fi, fl, ff, ffi—the f's ascender or crossbar merges with the following letter.

Measure

The width of a column of text, typically expressed in characters or ems. Optimal measure for body text is 45–75 characters per line. Shorter lines feel choppy; longer lines tire the eye.

Overshoot

The degree to which round or pointed letters (O, A, S) extend slightly beyond cap height or the baseline. Without overshoot, rounded letters appear smaller than flat-topped letters of the same mathematical height.

Serif

The small cross-stroke finishing the end of a main stroke. Serif styles—bracketed, hairline, slab, wedge—are the primary means of classifying type. The word derives from Dutch schreef (line, stroke).

Stem

The main vertical or diagonal stroke of a letterform, forming its structural backbone. Stem weight determines the visual weight of the typeface and is measured in points.

Stroke

Any single linear element making up a letterform. Strokes are classified by orientation (horizontal, vertical, diagonal) and function (stem, arm, bar, bowl, link). Stroke contrast is a key classification tool.

Terminal

The end of a stroke without a serif. Terminal styles include ball (round), finial (tapered), sheared (angled), and blunt. Terminal form is as diagnostic as serif style for identifying typefaces.

Tracking

Uniform letter-spacing adjustment applied across a word, line, or passage. Negative tracking tightens display headings; positive tracking opens up all-caps and small-caps text for better legibility.

x-Height

The height of lowercase letters without ascenders or descenders, named for the letter x. A tall x-height improves legibility at small sizes. Modern screen-optimized typefaces typically have large x-heights.

Anatomy of Type

Baseline

Type Classification

Match the Font

Spacing & Rhythm

Kerning Pairs

Tracking (Letter-Spacing)

Leading (Line-Height)

Measure (Line Length)

Typographic Scale

Typographic Scale & Grid

Modular Scale Calculator

Classic Presets

Baseline Grid Alignment

Variable Fonts Lab

Design Space

Expressive Typography