# Typography And Layout

> Typography & Layout

- Skill: `jangles-byte/typography-and-layout` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add jangles-byte/typography-and-layout`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jangles-byte/typography-and-layout/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: jangles-byte (https://skillmd.com/u/jangles-byte)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jangles-byte/typography-and-layout

---


# 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

1. Read the design philosophy (`design-direction`); the type *voice* comes from there.
2. Choose faces and pairings with
   [references/type-pairing.md](references/type-pairing.md) — contrast on exactly one
   axis, two families maximum.
3. Build a modular scale and spacing system with
   [references/scale-and-space.md](references/scale-and-space.md) — sizes, line
   heights, measure, and the spacing ladder, as tokens.
4. Compose with [references/composition.md](references/composition.md) — grid,
   hierarchy channels, negative space, and the sanctioned ways to break the grid.
5. Render at real size and run the `critique` skill. 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-nums` or a mono) for any column
  of numbers that can change.