UI Typography Skill
Applies timeless typographic correctness that LLMs routinely get wrong: proper quote
marks (curly, not straight), the three dashes (hyphen / en / em), spacing, hierarchy,
and page layout. Two modes:
- ENFORCEMENT (default): when generating any UI with visible text, apply the rules
automatically using correct HTML entities and CSS. No need to ask or explain — just
produce correct typography.
- AUDIT: when reviewing existing code or design, flag violations with before/after fixes.
These are strong, well-grounded defaults drawn from how the human eye reads (see
Attribution), not passing trends. Follow them by default; deviate deliberately when a
specific design calls for it, not by accident.
When to Use
- Any HTML/CSS/React/JSX artifact containing visible text
- Landing pages, components, dashboards, UI layouts
- Fixing typography or making an interface look professional
- Reviewing existing layouts for typographic issues
- Web design, presentation design, document generation
- Any task producing visible text for humans — apply even if typography isn't mentioned
When Not to Use
- Font pairing, type-scale selection, brand type systems → ui-ux-pro-max-skill
- On-screen UI body-text line-height (dashboards, apps, responsive web) → ui-ux-pro-max-skill's 1.5–1.75 rule; this skill's 120–145% line spacing rule is scoped to print/typeset body copy at a fixed point size
- Text accessibility audits (contrast, screen readers, WCAG) → bencium-controlled-ux-designer
- LaTeX typesetting / academic paper prep → latex-documents
- Plain markdown or text with no UI rendering → standard editing suffices
Core Rules (quick-path)
Apply these directly; the reasoning, edge cases, and full catalogue live in references/rules.md.
- Prefer curly quotes over straight —
“ ” for double, ‘ ’ for single
- Three distinct dashes: hyphen (-), en dash (
–), em dash (—) — don't approximate with --
- One space after punctuation, not two
- Line length 45–90 characters (
max-width: 65ch)
- Line spacing 120–145% of point size (
line-height: 1.2–1.45) — this is the print/typeset body copy rule (fixed point size, close reading distance on paper or a PDF page). For on-screen UI body text (dashboards, apps, responsive web copy), use the ui-ux-pro-max-skill skill's 1.5–1.75 range instead; don't apply this tighter print range to responsive UI text.
- Bold or italic, not both at once
- Letterspace ALL CAPS (5–12%) with kerning on
- Avoid underlining for emphasis in UI — use bold or italic
- Keep to ~2 fonts, each with a consistent role
- Set body text first — its 4 properties (font, size, line spacing, line length) drive everything else
Quick Examples
Curly apostrophe in JSX (escape sequences render literally between tags — see the JSX warning in the rules reference):
<p>Don{'’'}t use straight quotes</p>
Dashes:
<p>Pages 1–10</p> <!-- range: en dash -->
<p>A bold claim—indeed</p> <!-- break: em dash -->
CSS baseline:
body {
max-width: 65ch;
line-height: 1.4;
font-feature-settings: "kern" 1, "liga" 1;
text-rendering: optimizeLegibility;
}
References
Read on demand:
references/rules.md — full rule catalogue with reasoning and edge cases:
characters, spacing, text formatting, page layout, responsive, screen, maxims, and the
JSX/React unicode-escape correctness trap.references/css-templates.md — complete CSS baseline template, responsive patterns, OpenType features.references/html-entities.md — full entity table with characters and codes.
Attribution
Rules distilled from Matthew Butterick's Practical Typography (https://practicaltypography.com) —
professional typography made accessible for everyday digital writing. If this skill is useful, consider
supporting his work directly.
1---2name: typography3description: Correct typographic detail — curly quotes, en/em dashes, single spacing, hierarchy, line length, and layout — in generated or reviewed UI code. Use when writing or auditing HTML/CSS/React/JSX that renders visible text, or when making an interface's type read as professional.4---56# UI Typography Skill78Applies timeless typographic correctness that LLMs routinely get wrong: proper quote9marks (curly, not straight), the three dashes (hyphen / en / em), spacing, hierarchy,10and page layout. Two modes:1112- **ENFORCEMENT (default):** when generating any UI with visible text, apply the rules13 automatically using correct HTML entities and CSS. No need to ask or explain — just14 produce correct typography.15- **AUDIT:** when reviewing existing code or design, flag violations with before/after fixes.1617These are strong, well-grounded defaults drawn from how the human eye reads (see18Attribution), not passing trends. Follow them by default; deviate deliberately when a19specific design calls for it, not by accident.2021## When to Use2223- Any HTML/CSS/React/JSX artifact containing visible text24- Landing pages, components, dashboards, UI layouts25- Fixing typography or making an interface look professional26- Reviewing existing layouts for typographic issues27- Web design, presentation design, document generation28- Any task producing visible text for humans — apply even if typography isn't mentioned2930## When Not to Use3132- Font pairing, type-scale selection, brand type systems → **ui-ux-pro-max-skill**33- On-screen UI body-text line-height (dashboards, apps, responsive web) → **ui-ux-pro-max-skill**'s 1.5–1.75 rule; this skill's 120–145% line spacing rule is scoped to print/typeset body copy at a fixed point size34- Text accessibility audits (contrast, screen readers, WCAG) → **bencium-controlled-ux-designer**35- LaTeX typesetting / academic paper prep → **latex-documents**36- Plain markdown or text with no UI rendering → standard editing suffices3738## Core Rules (quick-path)3940Apply these directly; the reasoning, edge cases, and full catalogue live in `references/rules.md`.41421. Prefer curly quotes over straight — `“` `”` for double, `‘` `’` for single432. Three distinct dashes: hyphen (-), en dash (`–`), em dash (`—`) — don't approximate with `--`443. One space after punctuation, not two454. Line length 45–90 characters (`max-width: 65ch`)465. Line spacing 120–145% of point size (`line-height: 1.2`–`1.45`) — this is the **print/typeset body copy** rule (fixed point size, close reading distance on paper or a PDF page). For on-screen UI body text (dashboards, apps, responsive web copy), use the `ui-ux-pro-max-skill` skill's 1.5–1.75 range instead; don't apply this tighter print range to responsive UI text.476. Bold or italic, not both at once487. Letterspace ALL CAPS (5–12%) with kerning on498. Avoid underlining for emphasis in UI — use bold or italic509. Keep to ~2 fonts, each with a consistent role5110. Set body text first — its 4 properties (font, size, line spacing, line length) drive everything else5253## Quick Examples5455**Curly apostrophe in JSX** (escape sequences render literally between tags — see the JSX warning in the rules reference):56```jsx57<p>Don{'’'}t use straight quotes</p>58```5960**Dashes:**61```html62<p>Pages 1–10</p> <!-- range: en dash -->63<p>A bold claim—indeed</p> <!-- break: em dash -->64```6566**CSS baseline:**67```css68body {69 max-width: 65ch;70 line-height: 1.4;71 font-feature-settings: "kern" 1, "liga" 1;72 text-rendering: optimizeLegibility;73}74```7576## References7778Read on demand:7980- **`references/rules.md`** — full rule catalogue with reasoning and edge cases:81 characters, spacing, text formatting, page layout, responsive, screen, maxims, and the82 JSX/React unicode-escape correctness trap.83- **`references/css-templates.md`** — complete CSS baseline template, responsive patterns, OpenType features.84- **`references/html-entities.md`** — full entity table with characters and codes.8586## Attribution8788Rules distilled from **Matthew Butterick's *Practical Typography*** (https://practicaltypography.com) —89professional typography made accessible for everyday digital writing. If this skill is useful, consider90supporting his work directly.
dreamlab-ai