2 min read
Typography & Layout
Claude gets typography “close enough” by default, but designers notice the difference between close enough and right. This skill file teaches Claude the craft details — measure, vertical rhythm, font loading, and whitespace.
Filename: typography-craft.md
The Skill File
Copy this into a file called typography-craft.md in your project root, next to your CLAUDE.md.
# Typography & Layout Conventions
Follow these typography and layout guidelines for all UI work in this project. Text should feel crafted and intentional — never default.
## Font Loading (Web)
- Use `font-display: swap` to prevent invisible text during load
- Preload the primary font: `<link rel="preload" as="font" ...>`
- Subset fonts to only the characters you need when possible
- System font stack fallback: `-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif`
## Type Scale
- Use a consistent scale (e.g., 1.25 ratio: 12, 15, 18, 23, 28, 36)
- Define sizes as CSS custom properties or design tokens
- Maximum 4–5 distinct sizes in any single project
- Headings should create clear hierarchy — don't rely on bold alone
## Measure (Line Length)
- Optimal reading width: 45–75 characters per line
- Set `max-width` on text containers (typically `65ch` or ~680px)
- Narrow columns (sidebars, cards) should use shorter line lengths
- Never let text stretch to full viewport width on desktop
## Vertical Rhythm
- Use consistent `line-height` (1.5–1.6 for body, 1.2–1.3 for headings)
- Space between paragraphs should be roughly equal to line-height
- Headings: more space above than below (they introduce what follows)
- Use `margin-top` on headings, not `margin-bottom` on preceding elements
## Whitespace
- Generous whitespace signals quality — when in doubt, add more
- Group related items tightly, separate unrelated items generously
- Page margins should be at least 16px on mobile, 48px+ on desktop
- Empty space is a design element, not wasted space
## Details
- Use proper typographic characters: — (em dash), ' ' (smart quotes), … (ellipsis)
- Letter-spacing: tighten slightly for large headings (`-0.01` to `-0.03em`), leave body alone
- Don't justify text on the web — ragged right is more readable
- Use `tabular-nums` for numbers in columns or countersWhen to Use This
Add this to any project where typography matters — portfolios, landing pages, reading-heavy apps, or anywhere you want the text to feel crafted, not default.