← Pixel Studio

Generative Type

Typography Lab

The specimen page diagnoses a typeface. The lab pushes it. Choose a font, set a scale ratio, adjust weight and tracking, then watch the composition respond. This is where type moves from functional to expressive — where you find the line between readable and remarkable, and learn exactly where each font breaks.

pixel / typography lab

Type System Builder

base size
16px
scale ratio
system
min 8.19px
max 76.29px
steps 11
steppreview
2xs
The invisible grid holds everything.
xs
The invisible grid holds everything.
sm
The invisible grid holds everything.
base
The invisible grid holds everything.
md
The invisible grid holds everything.
lg
The invisible grid holds everything.
xl
The invisible grid holds everything.
2xl
The invisible grid holds everything.
3xl
The invisible grid holds everything.
4xl
The invisible grid holds everything.
5xl
The invisible grid holds everything.
sample

Specimen vs. Lab

A specimen asks: does this typeface work? A lab asks: what can this typeface do? The specimen holds variables steady and measures behavior. The lab changes variables freely and watches what emerges. Both are essential. One is a test, the other is a rehearsal.

The practical difference: a specimen tells you Cormorant Garamond is legible at 14px, 400 weight, 1.5 line-height. The lab tells you Cormorant at 48px, 300 weight, -0.03em tracking becomes something entirely different — editorial, dramatic, the kind of type that makes you stop scrolling.

The Variables

Scale & Ratio

Eight ratios from Minor Second (1.067) to Golden Ratio (1.618). Tight ratios produce subtle hierarchies — good for dense UI. Wide ratios produce dramatic separation — good for editorial and marketing. The lab renders the full 11-step scale so you can feel the difference.

Weight & Tracking

Weight and tracking are inversely coupled at display sizes. Heavy weights need tighter tracking. Light weights need looser tracking. The lab lets you violate this rule deliberately — because sometimes the wrong combination is exactly what a composition needs.

Font Categories

Sixteen fonts across four categories — serif, sans, display, mono. Each category has different expressive range. Serif fonts gain drama at scale. Sans fonts gain neutrality. Display fonts exist only for scale. Mono fonts impose a grid that resists hierarchy.

When Type Becomes Composition

Functional typography serves the content. Expressive typography is the content. The transition happens at scale — somewhere above 36px, letterforms stop being containers for meaning and start being shapes on a surface. Counters, ascenders, stroke contrast: these become compositional elements.

The lab is where you find that threshold for each font. Playfair Display crosses it early, around 24px. DM Sans resists it until 48px or higher. Knowing where a font becomes compositional is knowing where to use it — and where to stop.