/02-apply-typography-scale

name: apply-typography-scale
description: Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors
domain: ui-design
skill-type: generative
version: 1.0.0
prerequisites:
  - 01-establish-visual-hierarchy
dependencies: []
input:
  - content_structure: array
  - base_size: number (default 16)
  - context: marketing | application | content
output:
  - type_scale: array of sizes
  - weight_assignments: object
  - color_assignments: object

Skill: Apply Typography Scale

Purpose

Create clear typographic hierarchy using a hand-crafted set of font sizes, weights, and colors.

Core Rules

1. **Hand-crafted, not mathematical** — Avoid modular scales with fractional pixels 2. **Use px or rem, never em** — Prevents compounding issues 3. **Minimum 25% jumps** — 16px → 20px (25%), not 16px → 18px (12.5%) 4. **Two weights only** — 400/500 normal, 600/700 bold 5. **Never < 400 for UI** — Too hard to read at small sizes

Recommended Scales

Marketing Page

Hero:     48-60px,  weight 700,  line-height 1.1
H1:       36-40px,  weight 700,  line-height 1.2
H2:       28-32px,  weight 600,  line-height 1.3
Body:     16-18px,  weight 400,  line-height 1.6
Small:    14px,     weight 400,  line-height 1.6
Caption:  12px,     weight 400,  line-height 1.5

Application/Dense UI

H1:     30-36px,  weight 700
H2:     24px,     weight 600
H3:     20px,     weight 600
H4:     16px,     weight 600
Body:   14-16px,  weight 400
Small:  12-13px,  weight 400

Line-Height Rules

**Inverse proportion to size:**

• Small text (12-14px): 1.6-1.7 (needs help finding next line)
• Body text (16px): 1.5-1.6
• Large headlines (30px+): 1-1.2 (needs less help)

Line Length

• **Optimal**: 45-75 characters per line
• **Max-width**: 20-35em for paragraphs
• **Wide paragraphs**: Increase line-height to 1.8-2.0

Decision Criteria

PASS

• Scale uses a small set of intentional sizes with clear jumps between roles
• Type hierarchy combines size, weight, line-height, and color
• Body text remains readable across marketing, app, and content contexts
• Line length and line-height fit the reading context

FAIL

• Scale relies on tiny increments that do not create hierarchy
• Font weights are too light for UI text
• Long-form text lines are too wide or cramped
• `em` sizing compounds unpredictably in nested elements

Common Failure Modes

| Failure | Example | Fix | |---------|---------|-----| | **Em units** | `1.25em` parent, `0.875em` child = 17.5px | Use `px` or `rem` | | **Micro-steps** | 16px, 18px, 20px | 16px, 20px, 28px | | **Weight 300** | Light body text | Minimum 400 | | **Long lines** | 100+ characters | Constrain to 35em | | **Uniform line-height** | 1.5 for all | Vary by size |

Examples

See `examples/typography-scale/` for scale implementations.

References

• `references/hand-crafted-scales.md`
• `references/avoid-em-units.md`
• `references/line-height-proportion.md`