Menu

Individual skill

typography-scale-builder

0upvotes

Build a complete typographic system -- modular or fluid type scale, line-height and tracking per size, weight roles, and vertical rhythm -- exported as tokens, Tailwind config, and CSS. Pairs with font-pairing-suggester (which picks the fonts; this builds the system they live in).

typography-scale-builder/SKILL.md

Read pinned source

Source commit b2267d9171af4f56848d82992381b20b89b44056

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
No
Observed behavior
Instructions only
Last checked
Nov 10, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
423
Repository last updated
Oct 20, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# 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
Back to top