# Typography

> 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.

- Skill: `dreamlab-ai/typography` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add dreamlab-ai/typography`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dreamlab-ai/typography/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: dreamlab-ai (https://skillmd.com/u/dreamlab-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dreamlab-ai/typography

---


# 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`.

1. Prefer curly quotes over straight — `“` `”` for double, `‘` `’` for single
2. Three distinct dashes: hyphen (-), en dash (`–`), em dash (`—`) — don't approximate with `--`
3. One space after punctuation, not two
4. Line length 45–90 characters (`max-width: 65ch`)
5. 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.
6. Bold or italic, not both at once
7. Letterspace ALL CAPS (5–12%) with kerning on
8. Avoid underlining for emphasis in UI — use bold or italic
9. Keep to ~2 fonts, each with a consistent role
10. 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):
```jsx
<p>Don{'’'}t use straight quotes</p>
```

**Dashes:**
```html
<p>Pages 1&ndash;10</p>          <!-- range: en dash -->
<p>A bold claim&mdash;indeed</p>  <!-- break: em dash -->
```

**CSS baseline:**
```css
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.