typography-scale-builder

Files (1)

• SKILL.md

SKILL.md (first lines)

# Typography Scale Builder

Typography is the design system's skeleton: most products that look "off" have inconsistent type long before they have bad colors. Build the scale as a system with roles and math, then make the codebase actually use it. Input: the chosen fonts (or run `font-pairing-suggester` first), the product type (marketing site, dense app UI, long-form editorial), and the target range of devices.

## Workflow

1. **Audit what exists.** Inventory every font-size, line-height, letter-spacing, and font-weight in the codebase. The typical finding -- 23 font sizes, 9 of them within 2px of each other -- is the case for the system. Map which are actually distinct roles vs. accumulated drift.
2. **Choose the scale math.** Base size (16px body floor for marketing/editorial; 13-14px acceptable for dense app UI) and ratio -- modest for UI-heavy products (1.125-1.2, more usable steps, less drama), larger for marketing/editorial (1.25-1.333, real hierarchy). Fluid by default for marketing sites: `clamp()` per step so headings scale between viewport bounds without breakpoint jumps; fixed steps are fine for app UI.
3. **Set the companions per step** -- the part single-number "scales" skip: line-height tightens as size grows (body ~1.5-1.6, headings down to 1.1-1.2 at display sizes); letter-spacing goes negative at display sizes (-1% to -2.5%) and slightly positive for small caps/labels; weight roles per font (which weight is body, emphasis, heading, display -- and which loaded weights get deleted because nothing uses them).
4. **Define the roles.** Semantic tokens, not size names: `display`, `h1`-`h4`, `body-lg`, `body`, `body-sm`, `caption`, `overline`, `code`. Each role = size step + line-height + tracking + weight + family, as one token. Components consume roles; nobody composes raw steps.
5. **Vertical rhythm.** Spacing-after rules per role (heading margins proportional to their size, paragraph spacing from body line-height), `text-wrap: balance` on headings, and measure limits (65-75ch for body prose) so line length stays readable at every viewport.
6. **Export and retrofit.** `typography-tokens.json`, Tailwind `fontSize` config (size + line-height + tracking tuples per role; v4 `@theme`), `typography.css` with role classes, and `TYPOGRAPHY.md`. Then map the step-1 inventory onto roles and replace -- with a per-case flag on anything that does not cleanly map (it is either a missing role or drift to delete).

## Rules

- Roles over sizes everywhere: `text-h2`, never `text-[28px]` -- and no role means the component asks the system for one, not the developer for a number.
- Every step ships with its line-height and tracking. A size without its companions is half a token.
- The scale has as few steps as hierarchy needs -- 7-9 roles cover almost any product; 12+ means roles are duplicating.
- Body text is the anchor: it gets sized for reading first, and the scale grows around it -- never shrink body to make headings look bigger.
- Load only the weights the roles use. Every unused weight is dead bytes on first paint.
- Fluid type gets floor and ceiling checks: the `clamp()` minimum must stay readable on a 320px phone and the max must not blow the layout on ultrawide.

## Quick Commands

- "Build a type system for this project" -- full workflow
- "Audit my typography" -- step 1 only
- "Make my headings fluid" -- fluid conversion of an existing scale
- "Retrofit components" -- step 6 against an existing system

From OneWave-AI/claude-skills, MIT.

More from OneWave-AI/claude-skills