# 080102 Design Typography

> Typography and layout: font selection, modular type scales, spacing systems, grid theory, and visual hierarchy for brand and product UI.

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

---


# Typography, Spacing & Layout

Typography, spacing, and layout decisions for brand and product interfaces. Covers font selection, type scale engineering, spacing systems, grid theory, and visual hierarchy.

## References

| Topic | File |
|---|---|
| Font selection procedure, reflex-reject list (22 fonts), pairing strategies, aesthetic lane rejection | [references/font-selection.md](references/font-selection.md) |
| Modular type scale, fluid `clamp()` formulas, fixed rem scale, weight hierarchy, line-height | [references/type-scale.md](references/type-scale.md) |
| 4/8pt spacing system, semantic tokens, density guidelines, rhythm through contrast | [references/spacing-systems.md](references/spacing-systems.md) |
| Grid theory, responsive breakpoints, squint test, card heuristics, container strategies | [references/grid-layout.md](references/grid-layout.md) |

## Core Rules

- **Font selection procedure**: (1) Write 3 concrete brand-voice words, (2) List 3 reflex fonts — reject them, (3) Browse real catalog with the 3 words, (4) Cross-check final vs reflex.
- **Reflex-reject fonts**: Fraunces, Newsreader, Lora, Crimson, Playfair Display, Cormorant, Syne, IBM Plex*, Space*, Inter, DM Sans, Outfit, Plus Jakarta Sans, Instrument*. Training-data defaults — look further.
- **Type scale**: ≥1.25 ratio between steps. Brand uses fluid `clamp()`. Product uses fixed rem (1.125-1.2 ratio).
- **Line length**: 35-60ch mobile, 60-75ch desktop.
- **Font pairing**: One committed family > timid two-family pair.
- **Spacing**: 4/8pt system. Vary spacing for rhythm — same padding everywhere is monotony.
- **Layout**: Cards are the lazy answer. Nested cards are always wrong. Don't wrap everything in a container.

## When to Use

- Selecting fonts for a new project
- Building a type scale
- Defining spacing tokens
- Designing responsive layouts
- Reviewing hierarchy and rhythm