typography-scale-builder

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