Typography System
Produce a working type scale for this codebase — tokens wired into the existing styling system and applied to real headings/body/UI text — not an essay about type. Governing principle: sizes come from a modular scale chosen for the product's density; readability constraints (line-height, measure, contrast) are non-negotiable and override aesthetics.
When to use / handoffs
- Use for type scales, font selection/loading, heading hierarchy, readability fixes, fluid type.
- No token infrastructure at all yet → run
skills/frontend-design/design-foundation first (or create the type tokens as its first slice).
- Text colors failing contrast is shared ground with
skills/frontend-design/color-system — fix the pairs you touch here; send palette-wide work there.
- Headings sized right but the page still scans poorly →
skills/frontend-design/visual-hierarchy-refactoring.
Step 1 — Inspect the codebase
- Count font sizes. Grep for
font-size:\s*[\d.]+(px|rem), Tailwind text-(xs|sm|base|lg|xl|\dxl) and arbitrary text-\[. Distinct count >8–10 = sprawl; record the list with frequencies.
- Find the fonts. Grep for
font-family|@font-face|fonts.googleapis|next/font and check tailwind.config.* / @theme for fontFamily. Count families and loaded weights.
- Check line-height and measure. Grep
line-height|leading- and max-width.*ch|max-w-prose.
- Check existing tokens. If
design-foundation ran, extend its file; never start a parallel system.
- Classify the product's density from the screens themselves: data tables/dashboards/many controls = dense; landing/marketing = spacious; long-form reading = editorial.
Step 2 — Intake
Ask in one batch, only what's missing: brand feel in a few words (or "pick for me"), and keep current fonts or open to change? Infer density from the code, base size 16px unless dense-data (then 14px body is acceptable). Don't stall — with visible screens, state assumptions and build.
Step 3 — Build the scale
Choose the ratio by product density (the core decision rule):
| Product |
Ratio |
Why |
| Dense data app, dashboards, admin |
1.125–1.2 (major second) |
Many levels must fit without giant headings |
| Standard product UI / SaaS |
1.25 (major third) |
Balanced; the default when unsure |
| Marketing site, landing pages |
1.25–1.333 |
Headlines need presence |
| Editorial / brand-heavy, big heroes |
1.414–1.618 |
Few levels, dramatic jumps |
Generate from base × ratio^n, then snap to sensible pixels (a 1.25 scale from 16px → 16, 20, 25, 31, 39, 49, 61; round as needed). Add xs(12) and sm(14) below base for captions/labels. Cap the scale at the largest size actually used — don't ship a 76px display token to a settings app.
Pair line-height inversely with size: body 1.5–1.7, subheads 1.3, large headings 1.1–1.2, captions/labels 1.4. Ship line-height inside the size token (Tailwind fontSize tuples do this natively).
Fluid headings: for sizes ≥ ~31px, use clamp(min, preferred vw formula, max) instead of per-breakpoint overrides. Body text stays fixed (16px) — never fluid below the base.
Fonts: limit to ≤2 families, 3–4 weights (400/500/600/700 subset). If choosing: pick a workhorse UI sans (variable font if available) for body, optionally one display font for headings that matches the stated feel. Load via the framework's optimizer (next/font etc.) or preload + font-display: swap. Pairing table and font-feature details: references/type-details.md.
Canonical shape (Tailwind v3; adapt to detected stack)
fontSize: {
xs: ['0.75rem', { lineHeight: '1.4' }], // 12 — captions, labels
sm: ['0.875rem', { lineHeight: '1.5' }], // 14 — secondary UI text
base: ['1rem', { lineHeight: '1.6' }], // 16 — body
lg: ['1.125rem', { lineHeight: '1.6' }], // 18 — lead paragraphs
xl: ['1.25rem', { lineHeight: '1.3', fontWeight: '600' }], // 20 — h4/h5
'2xl': ['1.5625rem', { lineHeight: '1.3', fontWeight: '600' }], // 25 — h3
'3xl': ['clamp(1.6rem, 1.2rem + 1.6vw, 1.9375rem)', { lineHeight: '1.2', fontWeight: '700' }], // h2
'4xl': ['clamp(1.9rem, 1.3rem + 2.4vw, 2.4375rem)', { lineHeight: '1.1', fontWeight: '700' }], // h1
}
Step 4 — Apply and migrate
- Write the tokens into the project's system (Tailwind config /
@theme / CSS variables).
- Apply to the base elements or shared components (headings,
p, labels, buttons) — not one-off classes per page.
- Constrain prose:
max-width: 65ch on long-form containers.
- Migrate the top rogue sizes from Step 1 in 1–3 high-traffic files; map the rest.
Required output format
Deliver code plus this summary:
## Type tokens
[file path + full code in the project's system]
## Scale decision
- Density: [dense/standard/marketing/editorial] — evidence: [what you saw]
- Ratio: [x] · Base: [16px] · Levels: [list, snapped px values]
- Fonts: [family/weights] — [kept existing / chosen because …] · Loading: [mechanism]
## Migration map
| Found | Count | Replace with |
| text-[15px], 15px | 12 | text-sm (14px) |
| ... |
## Applied now
[components/files actually restyled]
## Verify
[Contrast pairs checked with ratios; measure per breakpoint]
Quality bar (check before delivering)
Integration
- Consumes: tokens file from
skills/frontend-design/design-foundation (extends its typography slice); layout containers from skills/frontend-design/layout-system (measure lives there).
- Produces: type tokens consumed by
skills/frontend-design/visual-hierarchy-refactoring (size/weight hierarchy) and skills/frontend-design/component-architecture (component text styles).
- Contrast pairs feed
skills/frontend-design/color-system and are audited by skills/frontend-design/accessibility-excellence.
References
references/type-details.md — font pairing table by personality, variable fonts, OpenType features (tabular numbers, small caps), full article/UI typography patterns, and the complete ratio → scale tables. Read when choosing fonts or styling long-form content.
1---2name: typography-system3description: Build or repair a typography system: a modular type scale, font choices and loading, hierarchy, line-height/line-length, and fluid sizing — delivered as tokens (Tailwind fontSize config or CSS variables) applied to real components. Use when the user says 'the text looks off', 'fonts are inconsistent', 'headings don't stand out', 'pick fonts for me', 'it's hard to read', 'too many font sizes', or when an audit finds font-size sprawl. Chooses the scale ratio from product density (dense app vs marketing vs editorial), verifies contrast and measure, and produces the type tokens plus a migration map from existing rogue sizes.4---5
6# Typography System
7
8Produce a working type scale for this codebase — tokens wired into the existing styling system and applied to real headings/body/UI text — not an essay about type. Governing principle: **sizes come from a modular scale chosen for the product's density; readability constraints (line-height, measure, contrast) are non-negotiable and override aesthetics.**
9
10## When to use / handoffs
11
12- Use for type scales, font selection/loading, heading hierarchy, readability fixes, fluid type.
13- No token infrastructure at all yet → run `skills/frontend-design/design-foundation` first (or create the type tokens as its first slice).
14- Text colors failing contrast is shared ground with `skills/frontend-design/color-system` — fix the pairs you touch here; send palette-wide work there.
15- Headings sized right but the page still scans poorly → `skills/frontend-design/visual-hierarchy-refactoring`.
16
17## Step 1 — Inspect the codebase
18
191. **Count font sizes.** Grep for `font-size:\s*[\d.]+(px|rem)`, Tailwind `text-(xs|sm|base|lg|xl|\dxl)` and arbitrary `text-\[`. Distinct count >8–10 = sprawl; record the list with frequencies.
202. **Find the fonts.** Grep for `font-family|@font-face|fonts.googleapis|next/font` and check `tailwind.config.*` / `@theme` for `fontFamily`. Count families and loaded weights.
213. **Check line-height and measure.** Grep `line-height|leading-` and `max-width.*ch|max-w-prose`.
224. **Check existing tokens.** If `design-foundation` ran, extend its file; never start a parallel system.
235. **Classify the product's density** from the screens themselves: data tables/dashboards/many controls = dense; landing/marketing = spacious; long-form reading = editorial.
24
25## Step 2 — Intake
26
27Ask in one batch, only what's missing: **brand feel in a few words** (or "pick for me"), and **keep current fonts or open to change?** Infer density from the code, base size 16px unless dense-data (then 14px body is acceptable). **Don't stall** — with visible screens, state assumptions and build.
28
29## Step 3 — Build the scale
30
31**Choose the ratio by product density** (the core decision rule):
32
33| Product | Ratio | Why |
34|---|---|---|
35| Dense data app, dashboards, admin | 1.125–1.2 (major second) | Many levels must fit without giant headings |
36| Standard product UI / SaaS | 1.25 (major third) | Balanced; the default when unsure |
37| Marketing site, landing pages | 1.25–1.333 | Headlines need presence |
38| Editorial / brand-heavy, big heroes | 1.414–1.618 | Few levels, dramatic jumps |
39
40Generate from base × ratio^n, then **snap to sensible pixels** (a 1.25 scale from 16px → 16, 20, 25, 31, 39, 49, 61; round as needed). Add `xs`(12) and `sm`(14) below base for captions/labels. Cap the scale at the largest size actually used — don't ship a 76px display token to a settings app.
41
42**Pair line-height inversely with size:** body 1.5–1.7, subheads 1.3, large headings 1.1–1.2, captions/labels 1.4. Ship line-height inside the size token (Tailwind fontSize tuples do this natively).
43
44**Fluid headings:** for sizes ≥ ~31px, use `clamp(min, preferred vw formula, max)` instead of per-breakpoint overrides. Body text stays fixed (16px) — never fluid below the base.
45
46**Fonts:** limit to ≤2 families, 3–4 weights (400/500/600/700 subset). If choosing: pick a workhorse UI sans (variable font if available) for body, optionally one display font for headings that matches the stated feel. Load via the framework's optimizer (`next/font` etc.) or `preload` + `font-display: swap`. Pairing table and font-feature details: `references/type-details.md`.
47
48### Canonical shape (Tailwind v3; adapt to detected stack)
49
50```javascript
51fontSize: {
52 xs: ['0.75rem', { lineHeight: '1.4' }], // 12 — captions, labels
53 sm: ['0.875rem', { lineHeight: '1.5' }], // 14 — secondary UI text
54 base: ['1rem', { lineHeight: '1.6' }], // 16 — body
55 lg: ['1.125rem', { lineHeight: '1.6' }], // 18 — lead paragraphs
56 xl: ['1.25rem', { lineHeight: '1.3', fontWeight: '600' }], // 20 — h4/h5
57 '2xl': ['1.5625rem', { lineHeight: '1.3', fontWeight: '600' }], // 25 — h3
58 '3xl': ['clamp(1.6rem, 1.2rem + 1.6vw, 1.9375rem)', { lineHeight: '1.2', fontWeight: '700' }], // h2
59 '4xl': ['clamp(1.9rem, 1.3rem + 2.4vw, 2.4375rem)', { lineHeight: '1.1', fontWeight: '700' }], // h1
60}
61```
62
63## Step 4 — Apply and migrate
64
651. Write the tokens into the project's system (Tailwind config / `@theme` / CSS variables).
662. Apply to the base elements or shared components (headings, `p`, labels, buttons) — not one-off classes per page.
673. Constrain prose: `max-width: 65ch` on long-form containers.
684. Migrate the top rogue sizes from Step 1 in 1–3 high-traffic files; map the rest.
69
70## Required output format
71
72Deliver code plus this summary:
73
74```
75## Type tokens
76[file path + full code in the project's system]
77
78## Scale decision
79- Density: [dense/standard/marketing/editorial] — evidence: [what you saw]
80- Ratio: [x] · Base: [16px] · Levels: [list, snapped px values]
81- Fonts: [family/weights] — [kept existing / chosen because …] · Loading: [mechanism]
82
83## Migration map
84| Found | Count | Replace with |
85| text-[15px], 15px | 12 | text-sm (14px) |
86| ... |
87
88## Applied now
89[components/files actually restyled]
90
91## Verify
92[Contrast pairs checked with ratios; measure per breakpoint]
93```
94
95## Quality bar (check before delivering)
96
97- [ ] ≤8–10 total sizes, all on the scale; every migrated value maps to exactly one token
98- [ ] Body ≥16px (≥14px only in dense data UI, and never for long-form)
99- [ ] Line-height: body 1.5–1.7, headings 1.1–1.3, nothing below 1.1
100- [ ] Measure 45–75ch for body text at every breakpoint
101- [ ] Text/background contrast ≥4.5:1 normal, ≥3:1 large (≥24px, or ≥18.7px bold) — state the ratios you computed
102- [ ] ≤2 font families, ≤4 weights actually loaded; `font-display: swap` or framework equivalent
103- [ ] Heading levels distinguishable at a glance (adjacent levels differ by ratio step AND/OR weight)
104- [ ] Fluid `clamp()` on large headings only; body size fixed
105- [ ] Letter-spacing: slightly negative on ≥39px headings (−0.01 to −0.02em), slightly positive on all-caps labels (+0.05em)
106
107## Integration
108
109- Consumes: tokens file from `skills/frontend-design/design-foundation` (extends its typography slice); layout containers from `skills/frontend-design/layout-system` (measure lives there).
110- Produces: type tokens consumed by `skills/frontend-design/visual-hierarchy-refactoring` (size/weight hierarchy) and `skills/frontend-design/component-architecture` (component text styles).
111- Contrast pairs feed `skills/frontend-design/color-system` and are audited by `skills/frontend-design/accessibility-excellence`.
112
113## References
114
115- `references/type-details.md` — font pairing table by personality, variable fonts, OpenType features (tabular numbers, small caps), full article/UI typography patterns, and the complete ratio → scale tables. Read when choosing fonts or styling long-form content.
sanky369