jangles-byte Typography & Layout
Typography is most of design: get type and spacing right and a screen looks designed before it has any color or decoration. The failure mode is timidity — small scale jumps, default tracking, uniform spacing — not bad taste.
Workflow
- Read the design philosophy (
design-direction); the type voice comes from there. - Choose faces and pairings with references/type-pairing.md — contrast on exactly one axis, two families maximum.
- Build a modular scale and spacing system with references/scale-and-space.md — sizes, line heights, measure, and the spacing ladder, as tokens.
- Compose with references/composition.md — grid, hierarchy channels, negative space, and the sanctioned ways to break the grid.
- Render at real size and run the
critiqueskill. Type that looks right in code is routinely wrong on screen.
Which reference to load
| Situation | Load |
|---|---|
| Picking fonts, pairing display + text faces, font features | references/type-pairing.md |
| Setting sizes, line-height, measure, spacing ladder | references/scale-and-space.md |
| Arranging a page/screen/slide, hierarchy problems, grids | references/composition.md |
Non-negotiables
- Two font families maximum (a third only for code/data, and it counts if decorative).
- A real scale ratio, and at least one jump ≥ 3× body size somewhere in display contexts (heroes, slides, posters); interfaces cap lower but still need contrast.
- Body measure 45–75 characters; line-height inversely proportional to size.
- Spacing from a ladder (4/8-based), applied asymmetrically: space groups, not elements — more space between sections than inside them, always.
- Tabular numerals (
font-variant-numeric: tabular-numsor a mono) for any column of numbers that can change.