# Skill: Set up a font pair, modular size scale, and 8-point spacing grid

> Master this to build readable, expensive-looking typography from two fonts, a ratio-based size scale, and a single consistent spacing step; apply whenever laying out any screen, page, or component.

Source: sodigi*learn -- inspiration/shrift-i-setka * https://sodigi.io/learn/inspiration/shrift-i-setka

## When to use

- Starting a new screen or layout from scratch and needing a typography system.
- Existing design feels "thrown together" or has that "something is off but I cannot tell what" feeling.
- An AI assistant produced font choices or spacing values by eye (arbitrary pixel values).
- Reviewing a vibecoded screen for typographic inconsistencies before shipping.

## Core rules

- Use at most two fonts; three is the hard ceiling. More is a carnival, not variety.
- A working pair requires both contrast (clearly different from each other) and kinship (similar x-height so they look like they belong together).
- Classic safe pair: a serif display font for headings + a sans-serif for body. Or one sans-serif family in bold and regular.
- Two display or two body fonts with no contrast look like a mistake, not a pairing decision.
- Build hierarchy from size, weight, and whitespace -- not from additional fonts.
- Use a modular size scale: take the base body size and multiply by a fixed ratio (~1.25-1.5) to get each larger step. All sizes must come from this scale.
- No more than four levels of hierarchy or it becomes noise again.
- All spacing must be multiples of 8 (8, 16, 24, 32, 40, 48). For micro-gaps use multiples of 4. No arbitrary values (7, 13, 19).
- Align all block left edges to one column line. That is the minimal grid.

## Procedure

1. Pick two fonts: one display (character, personality, used at heading sizes) and one body (calm, readable at small sizes). Unsure? Use one sans-serif in regular and bold.
2. Verify kinship: place both at the same size and compare lowercase letter height (x-height). Very different x-heights mean they will look like strangers.
3. Set a comfortable base body size (typically 16px on screen).
4. Build the scale by multiplying up: body * 1.3 = subheading, * 1.6 = heading, * 2.0+ = display. Record these as named tokens.
5. Assign the hierarchy: largest + bold for the main heading, stepping down in size and weight. No more than four named levels.
6. Set one spacing step: multiples of 8. Every gap between blocks, every padding, every margin must be from this set.
7. Align all content blocks to one left edge.
8. Five-second test: zoom out to 50% or step back. Can the eye immediately find the most important element? Do all blocks line up in even rows? If yes, done. If shimmering or tilted, fix the scale and spacing step.

## Ready-to-use prompt

```
Build the typography for this screen by rules, not by eye.

Font pair:
- Display font: [name or describe character] for headings and accents.
- Body font: [name or describe calm readable font] for body text.
- If unsure: use one sans-serif family in regular and bold weights only.

Size scale (modular, ratio ~1.3):
- Body: [base size, e.g. 16px]
- Subheading: body * 1.3
- Heading: body * 1.6
- Display: body * 2.1
All sizes must come from this scale. No intermediate arbitrary values.

Hierarchy:
- Build with size, weight, and whitespace only -- no additional fonts.
- Maximum four levels.

Spacing:
- All gaps, padding, and margins must be multiples of 8px: (8, 16, 24, 32, 40, 48).
- No arbitrary values.

Alignment:
- Align all block left edges to one column line.

Output a separate list showing: the final size scale values and the complete spacing set used.
```

## Pitfalls

- Using five or more fonts "for variety": every additional font makes it worse, not better. Variety comes from weight and size within fewer fonts.
- A pair with no contrast: two similar fonts look like a mistake. Ensure clearly different roles.
- Eyeballed sizes: "a bit bigger here" produces a muddy hierarchy. A ratio-based scale fixes this.
- Heading barely larger than body: no visible hierarchy. Make the size contrast obvious.
- Arbitrary spacing values (7px, 13px, 19px): the page "slides" and nothing aligns. One step, multiples of 8.
- Cramped layout with no air: empty space around important elements is an accent, not wasted space.
- Mixed alignment (one block left, another centered, one floating): put everything on one left line for instant order.