UI排版

---
name: ui-typography
description: >-
  UI Typography: professional typography rules for UI design, web apps, software
  interfaces, and screen-based text — quotes, dashes, spacing, hierarchy, layout.
  ENFORCEMENT MODE: when generating any HTML/CSS/React/JSX UI with visible text,
  auto-apply silently. AUDIT MODE: when reviewing interfaces, flag violations and fixes.
  Trigger on UI/landing/component/dashboard/document generation or "fix the typography".
  NOT for: marketing copywriting strategy, print-only typesetting, or non-UI prose.
slug: ui-typography
version: 1.1.1
displayName: ui-typography
---

# UI Typography Skill

## Attribution

These rules are distilled from **Matthew Butterick's *Practical Typography*** (https://practicaltypography.com).
Butterick is a typographer, writer, and type designer whose work bridges professional typography and everyday
digital writing. Thank you, Matthew, for making this knowledge accessible and encyclopedic. If you find this
skill valuable, consider supporting his work directly.

## Mode of Operation

These are **permanent rules** — not trends, not opinions. They come from centuries of typographic practice,
validated by how the human eye reads. They do not go out of style.

**ENFORCEMENT (default):** When generating ANY UI with visible text, apply every rule automatically. Use
correct HTML entities, proper CSS. Do not ask permission. Do not explain. Just produce correct typography.

**AUDIT:** When reviewing existing code or design, identify violations and provide before/after fixes.

## Worked Example (shortest real run)

**Precondition:** a JSX component with visible text; nothing installed, no network needed.
**Invocation:** `Fix the typography in src/components/PricingCard.tsx`
**Output excerpt (what you should see back):**

```jsx
// Before
<p>Don't say "dynamic" — it's a 70's idea!</p>
// After
<p>Don&rsquo;t say &ldquo;dynamic&rdquo; &mdash; it&rsquo;s a &rsquo;70s idea!</p>
// (in JSX text nodes, paste the real characters ’ “ — not \u escapes)
```

**Done when:** every quote/dash/ellipsis in the touched file is a real typographic character (or a JSX-safe expression), and no straight `'`/`"` remains in rendered text.

## Failure Exits (closed set)

- **Reference file missing** (`references/css-templates.md` / `references/html-entities.md` not found): run `ls references/` in this skill's directory. If empty or renamed, stop and report the missing filename — do not invent entity codes from memory; fall back to pasting literal UTF-8 characters (always correct).
- **Wrong file type:** these rules target UI/screen text only. Print-only typesetting or marketing prose → out of scope, say so and stop rather than half-applying rules.
- **Ambiguous scope** (whole app vs one component): apply to the named file first, then list the other candidates — don't sweep the repo unasked.

## FAQ — wrong → fix

| Wrong | Why it fails | Fix |
|-------|--------------|-----|
| `\u2019` pasted into JSX text | Renders literally as `\u2019` | Paste the real `’` or use `{'\u2019'}` inside braces |
| `sed "s/'/’/g"` with escape sequences | Replaces code-string apostrophes too | Bulk-fix only text nodes; check diffs for broken string literals |
| Two spaces after a period | Creates rivers, breaks measure | Exactly one space |
| Straight `"` in shipped UI copy | Typewriter artifact | `“ ”` / `&ldquo;` `&rdquo;` |
| Letter-spacing on lowercase body text | Gaps split words apart | Letterspacing only on ALL CAPS / small caps (5–12%) |

**Boundary:** this skill fires on UI generation or "fix the typography" type requests. It never rewrites marketing strategy, print book layouts, or non-UI prose — if the request is really one of those, name the mismatch instead of editing.

**Reference files** (read when generating CSS or looking up entities):
- `references/css-templates.md` — Full CSS baseline template, responsive patterns, OpenType features
- `references/html-entities.md` — Complete entity table with all characters and codes

---

## Characters

### Quotes and Apostrophes — Always Curly

Straight quotes are typewriter artifacts. Use `&ldquo;` `&rdquo;` for double, `&lsquo;` `&rsquo;` for single.

Apostrophes always point down — identical to closing single quote `&rsquo;`. Smart-quote engines wrongly
insert opening quotes before decade abbreviations ('70s) and word-initial contractions ('n'). Fix with
explicit `&rsquo;`.

The `<q>` tag auto-applies curly quotes when `<html lang="en">` is set.

Hawaiian okina points upward — it's a letter, not an apostrophe. Use opening single quote or anglicize.

### JSX/React Implementation Warning

**Unicode escape sequences (`\u2019`, `\u201C`, etc.) do NOT work in JSX text content.** They render
as literal characters — the user sees `\u2019` instead of a curly apostrophe. This is because JSX text
between tags is treated as string literals by the transpiler, not as JavaScript expressions.

**What fails:**
```jsx
{/* WRONG — renders literally as \u2019 */}
<p>Don\u2019t do this</p>
```

**What works (pick one):**

1. **Actual UTF-8 characters (preferred):** Paste the real character directly into the source file.
   ```jsx
   <p>Don\u2019t do this</p>  {/* This is the actual curly apostrophe character U+2019 */}
   ```

2. **JSX expression with string literal:** Wrap in curly braces so the JS engine interprets the escape.
   ```jsx
   <p>Don{'\u2019'}t do this</p>
   ```

3. **HTML entity (HTML files only):** Use `&rsquo;` — but this does NOT work in JSX/React.

**For bulk fixes via CLI**, use `sed` with raw UTF-8 bytes (not escape sequences):
```bash
CURLY=$(printf '\xe2\x80\x99')  # U+2019 RIGHT SINGLE QUOTATION MARK
sed -i '' "s/don't/don${CURLY}t/g" file.tsx
```

**In JavaScript data arrays and string literals**, `\u2019` works correctly because the JS engine
processes the escape. The bug only affects JSX text content between tags.

### Dashes and Hyphens — Three Distinct Characters

| Character | HTML | Use |
|-----------|------|-----|
| - (hyphen) | `-` | Compound words (cost-effective), line breaks |
| – (en dash) | `&ndash;` | Ranges (1–10), connections (Sarbanes–Oxley Act) |
| — (em dash) | `&mdash;` | Sentence breaks—like this |

Never approximate with `--` or `---`. If you open with "from", pair with "to" not en dash. Hyphen for
compound names (marriage); en dash for joint authorship. Em dash typically flush; add `&thinsp;` if crushed.
No slash where en dash belongs. Hyphenate phrasal adjectives (five-dollar bills). No hyphen after -ly adverbs.

### Ellipses — One Character

Use `&hellip;` (…), not three periods. Spaces before and after; use `&nbsp;` on the text-adjacent side.
For interrupted dialogue, prefer em dash over ellipsis.

### Math and Measurement

Use `&times;` for multiplication, `&minus;` for subtraction. Use `+` and `=` from keyboard.
En dash is acceptable as simple minus. Dimensions: 8.5″ × 14″ uses `&times;`.

**Foot and inch marks** — the ONE exception to curly quotes. Must be STRAIGHT: `&#39;` for foot,
`&quot;` for inch. Use `&nbsp;` between values: `6&#39;&nbsp;10&quot;`.

### Trademark and Copyright

Use real symbols: `&copy;` `&trade;` `&reg;`, never (c) (TM) (R). ™/® are superscripts, no space before.
© is inline, followed by `&nbsp;` then year. "Copyright ©" is redundant — word OR symbol, not both.

### Paragraph and Section Marks

`&sect;` (§) and `&para;` (¶) always followed by `&nbsp;`: `&sect;&nbsp;1782`. Spell out at sentence start.
Double for plurals: `&sect;&sect;`.

### Accented Characters

Proper names: accents are MANDATORY (François Truffaut, Plácido Domingo). Loanwords: check dictionary —
some naturalized (naive), some not (cause célèbre).

### Other Punctuation

- **Semicolons** join independent clauses. **Colons** introduce completion. Don't mix them
- **Question marks**: underused — simplify topic sentences with them
- **Exclamation points**: overused — budget ONE per long document. Never multiple in a row
- **Ampersands**: correct in proper names only. Write "and" in body text
- **Parentheses/brackets**: do NOT adopt formatting of surrounded material
- **Emoticons/emoji**: OK in email/Slack. Never in formal documents or professional UI copy

---

## Spacing

### One Space After Punctuation — Always

Exactly one space after any punctuation. Never two. Not debatable. Two spaces create rivers and
disrupt text balance. The period already contains visual white space.

### Nonbreaking Spaces

`&nbsp;` prevents line break. Use before numeric refs (`&sect;&nbsp;42`, `Fig.&nbsp;3`), after ©
(`&copy;&nbsp;2025`), after honorifics (`Dr.&nbsp;Smith`), between foot/inch values.

### White-Space Characters

| Need | Tool |
|------|------|
| Space between words | One word space (spacebar) |
| Prevent line break | `&nbsp;` |
| New line, same paragraph | `<br>` |
| New paragraph | `<p>` tags |
| New page (print) | `page-break-before: always` |
| Suggest hyphenation point | `&shy;` |

Never hold spacebar. Never double carriage returns for spacing. Never tabs for indentation in output.
HTML collapses all whitespace to single space (except `&nbsp;`).

---

## Text Formatting

### Bold and Italic

**Rule 1**: Bold OR italic. Mutually exclusive. Never combine.
**Rule 2**: Use as little as possible. If everything is emphasized, nothing is.

Serif: italic for gentle, bold for strong. Sans serif: bold only — italic sans barely stands out.
Never bold entire paragraphs. Never use quotation marks for emphasis.

### Underlining — Never

Never underline in a document or UI. Typewriter workaround. Use bold or italic. For web links,
use subtle styling: `text-decoration-thickness: 1px; text-underline-offset: 2px`.

### All Caps — Less Than One Line, Always Letterspaced

Caps are harder to read (homogeneous rectangles vs varied lowercase contour). Suitable for short
headings, labels, captions. **ALWAYS** add 5–12% letterspacing. **ALWAYS** ensure kerning is on.
**NEVER** capitalize whole paragraphs. `letter-spacing: 0.06em` in CSS.

### Small Caps — Real Only

Never fake (scaled-down regular caps). Use `font-variant-caps: small-caps` with fonts that have
real small caps (OpenType `smcp`). System fonts lack them. Add letterspacing + kerning.

### Point Size

Print: 10–12pt. Web: 15–25px. The 12pt default is a typewriter relic. Half-point differences
matter. Use smallest increment for emphasis. Use `clamp()` for fluid web sizing.

### Letterspacing

5–12% extra on ALL CAPS and small caps. Nothing on lowercase. Never spread so far apart that
letters could fit in the gaps. CSS: `letter-spacing: 0.05em` to `0.12em`.

### Kerning — Always On

No exceptions. `font-feature-settings: "kern" 1; text-rendering: optimizeLegibility;`

### Ligatures

Mandatory only when fi/fl visually collide. Check bold and italic too. Otherwise optional.
CSS: `font-feature-settings: "liga" 1`.

### Alternate Figures

Tabular (`"tnum"`) for data tables. Oldstyle (`"onum"`) for body text. Default figures are fine
for most uses. `font-variant-numeric: tabular-nums lining-nums` for numeric tables.

### Font Selection

1. No goofy fonts (novelty, script, handwriting, circus) in professional work
2. No monospaced for body text — code only (and Courier is the worst monospaced)
3. Print body: strongly prefer serif
4. Web body: serif or sans both fine on modern screens
5. Metrics spacing in InDesign, never optical (optical mangles kerning)

### Mixing Fonts

Max 2 fonts. Each gets a consistent role. Can mix serif+serif or sans+sans. Rarely mix within
a paragraph. Lower contrast often more effective than high contrast.

---

## Page Layout

### Body Text First

Set body text BEFORE anything else. Four decisions determine everything: font, point size,
line spacing, line length. All other elements calibrate against these.

### Line Length — 45–90 Characters

The #1 readability factor designers get wrong. The #1 flaw in responsive web layouts.
Measure in characters, not inches. Alphabet test: fit 2–3 lowercase alphabets per line.
CSS: `max-width: 65ch` on text containers.

### Line Spacing — 120–145% of Point Size

`line-height: 1.2` to `1.45`. Single-spaced (~117%) is too tight. Double (~233%) is too loose.
Word processor "Single" and "Double" both miss the optimal range.

### Page Margins

One inch is not enough for proportional fonts. Print: 1.5–2.0″ at 12pt. Web: `max-width` on
text containers plus `padding`. Don't fear white space — generous margins look professional.

### Text Alignment

Left-align for web (default). Justified requires `hyphens: auto` — browser engines are crude.
Centered: sparingly, only for short titles (< 1 line). Never center whole text blocks.

### Paragraph Separation — Indent OR Space, Never Both

**First-line indent**: 1–4× point size. `text-indent: 1.5em`. Optional on first paragraph.
**Space between**: 50–100% of font size. `margin-bottom: 0.75em`. Never double `<br>` tags.

### Headings — Max 3 Levels

1. Don't all-caps headings (unless very short + letterspaced)
2. Don't underline headings
3. Don't center headings (rare exceptions)
4. Emphasize with **space above and below** — subtle and effective
5. Use **bold, not italic** — stands out better
6. Smallest point-size increment needed (body 11pt → heading 13pt, not 18pt)
7. `hyphens: none` on headings
8. Space above > space below (heading relates to text that follows)
9. Keep heading with next paragraph (`page-break-after: avoid`)
10. Tiered numbers (1.1, 2.1) over roman numerals (I.A.1.a.i)

### Block Quotations

Reduce size + line spacing slightly. Indent 2–5em. No quotation marks (indent signals the quote).
Keep line length readable. Use sparingly — long block quotes signal lazy writing.

### Lists

Semantic markup (`<ul>`, `<ol>`), never manual bullets. Prefer hollow bullets. Asterisks are too
small for bullets. Don't over-indent.

### Tables — Remove Borders, Add Padding

Data creates an implied grid. Borders add clutter. Keep only thin rule under header row.
`padding: 0.5em 1em`. Tabular figures for numeric columns. Right-align numbers.

### Rules and Borders

Try space above and below first. Border thickness: 0.5–1pt. No patterned borders. Thick lines
are chartjunk.

### Flow Control

Widows (last line alone at top of page) and orphans (first line alone at bottom). CSS print:
`orphans: 2; widows: 2`. Headings: `page-break-after: avoid`. Soft hyphens `&shy;` for
words that confuse hyphenation engines.

### Columns and Grids

Print columns: 2–3 on letter paper, never 4. Web columns: awkward (indefinite bottom edge).
Grids guide, not guarantee — simpler grids enforce more consistency. Aligning ugly to a grid
still produces ugly.

---

## Responsive Web Typography

**The rules don't change with screen size.** Same line length, line spacing, hierarchy.

1. Scale `font-size` and container `width` together
2. Always `max-width` on text containers — never edge-to-edge text
3. Don't use `ch` unit for exact measurement (only measures zero width)
4. `clamp()` for fluid scaling: `font-size: clamp(16px, 2.5vw, 20px)`
5. Mobile minimum: `padding: 0 1rem` on text containers
6. The common failure: images/nav scale carefully, body text ignored

---

## Screen Considerations

Modern screens render type nearly as well as print. "Sans serif for screens" was true for 72dpi
and is now obsolete. Serif fonts work fine on modern screens. Dark mode: reduce weight slightly.
Test on macOS and Windows (antialiasing differs).

---

## Maxims of Page Layout

1. **Body text first** — its 4 properties determine everything
2. **Foreground vs background** — don't let chrome upstage body text
3. **Smallest visible increments** — half-points matter
4. **When in doubt, try both** — make samples, don't theorize
5. **Consistency** — same things look the same
6. **Relate new to existing** — each element constrains the next
7. **Keep it simple** — 3 colors and 5 fonts? Think again
8. **Imitate what you like** — emulate good typography from the wild

## 中文速览（Quick Guide）

**这个技能做什么**：一套面向 UI/屏幕文本的常设排版规则——弯引号、三种连字符/破折号、省略号、行距 120–145%、行长 45–90 字符、全大写加字距等；默认 ENFORCEMENT 模式：生成任何带可见文本的 UI 时静默自动套用，AUDIT 模式用于审查存量界面并给前后对照修法。

**何时用**：生成或修复任何 HTML/CSS/React 界面的可见文本时；纯印刷排版、营销文案策略、非 UI 散文不适用。

**核心步骤**：
1. 确认范围（点名文件优先，不未经要求全仓扫）；
2. 逐项替换打字机字符：直引号→弯引号、`--`→en/em dash、三个句点→`…`；
3. 套版式规则：`line-height: 1.2–1.45`、`max-width: 65ch`、全大写标题加 5–12% 字距、kerning 常开；
4. JSX 文本节点直接粘贴真实 UTF-8 字符（`\u` 转义会字面渲染）；
5. 对照 FAQ 表自检：不留直引号、不双空格、小写正文不加字距。

**国内可达性边界**：主流程可离线完成——全部规则、实体表与 CSS 模板均为仓内本地文件；文首对 practicaltypography.com 的署名链接仅为出处致谢，规则本体自包含，链接不可达不影响执行。