UI排版设计规范：专业网页字体、标点与间距最佳实践指南

ui-typography by bencium/bencium-claude-code-design-skill

153 周安装量

148 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/bencium/bencium-claude-code-design-skill --skill ui-typography

开发代码规范用户体验

🇨🇳中文介绍

UI 排版技能

归属说明

这些规则提炼自 Matthew Butterick 的《实用排版》 (https://practicaltypography.com)。Butterick 是一位排版师、作家和字体设计师，他的工作连接了专业排版和日常数字写作。感谢 Matthew 让这些知识易于获取且全面详尽。如果你觉得这个技能有价值，请考虑直接支持他的工作。

运行模式

这些是永久性规则——不是潮流，不是个人观点。它们源于数百年的排版实践，并经过人眼阅读方式的验证。它们永不过时。

强制执行（默认）： 当生成任何包含可见文本的 UI 时，自动应用每一条规则。使用正确的 HTML 实体和恰当的 CSS。无需请求许可。无需解释。直接生成正确的排版。

审查： 当审查现有代码或设计时，识别违规之处并提供修复前后的对比。

参考文件（在生成 CSS 或查找实体时阅读）：

references/css-templates.md —— 完整的 CSS 基线模板、响应式模式、OpenType 特性
references/html-entities.md —— 包含所有字符和代码的完整实体表

字符

引号和撇号 —— 始终使用弯引号

直引号是打字机时代的遗留物。双引号使用 “ ”，单引号使用。

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

JSX/React 实现警告

Unicode 转义序列（\u2019、\u201C 等）在 JSX 文本内容中无效。 它们会被渲染为字面字符 —— 用户看到的是 \u2019 而不是弯撇号。这是因为标签之间的 JSX 文本被转译器视为字符串字面量，而不是 JavaScript 表达式。

{/* 错误 —— 会原样渲染为 \u2019 */}
<p>Don\u2019t do this</p>

正确做法（任选其一）：

实际的 UTF-8 字符（首选）： 直接将真实字符粘贴到源文件中。
Don’t do this {/* 这是实际的弯撇号字符 U+2019 */}
使用字符串字面量的 JSX 表达式： 用花括号包裹，以便 JS 引擎解释转义。
Don{'\u2019'}t do this
HTML 实体（仅限 HTML 文件）： 使用 ’ —— 但这在 JSX/React 中无效。

通过 CLI 进行批量修复，使用带有原始 UTF-8 字节（而非转义序列）的 sed：

CURLY=$(printf '\xe2\x80\x99')  # U+2019 RIGHT SINGLE QUOTATION MARK
sed -i '' "s/don't/don${CURLY}t/g" file.tsx

在 JavaScript 数据数组和字符串字面量中，\u2019 可以正常工作，因为 JS 引擎会处理转义。此错误仅影响标签之间的 JSX 文本内容。

破折号和连字符 —— 三个不同的字符

字符	HTML	用途
- (连字符)	`-`	复合词（cost-effective）、换行
– (短破折号)	`–`	范围（1–10）、连接（Sarbanes–Oxley Act）
— (长破折号)	`—`	句子中断——像这样

切勿用 -- 或 --- 来近似替代。如果以 "from" 开头，则配对使用 "to" 而非短破折号。复合姓名用连字符（marriage）；合著者用短破折号。长破折号通常紧邻文字；如果过于拥挤，可添加  。在应使用短破折号的地方不要使用斜杠。短语形容词需加连字符（five-dollar bills）。-ly 副词后不加连字符。

省略号 —— 一个字符

使用 …（…），而非三个句点。前后加空格；在紧邻文本的一侧使用  。对于中断的对话，优先使用长破折号而非省略号。

乘法使用 ×，减法使用 −。使用键盘上的 + 和 =。短破折号可作为简单的减号。尺寸：8.5″ × 14″ 使用 ×。

英尺和英寸标记 —— 弯引号规则的一个例外。必须使用直引号：英尺用 '，英寸用 "。数值之间使用  ：6' 10"。

段落和章节标记

§ (§) 和 ¶ (¶) 后始终跟  ：§ 1782。在句子开头时拼写出来。复数形式用双符号：§§。

带重音符号的字符

专有名词：重音符号是必需的（François Truffaut, Plácido Domingo）。外来词：查字典 —— 有些已本土化（naive），有些则没有（cause célèbre）。

分号连接独立分句。冒号引出补充说明。不要混用它们
问号：使用不足 —— 用它们简化主题句
感叹号：使用过度 —— 长篇文档中限制使用一个。切勿连续使用多个
& 符号：仅用于专有名称。正文中写 "and"
括号/方括号：不要采用所包围内容的格式
表情符号/颜文字：在电子邮件/Slack 中可用。切勿在正式文档或专业 UI 文案中使用

标点后一个空格 —— 始终如此

任何标点符号后恰好一个空格。切勿两个。无可争议。两个空格会产生空白河流并破坏文本平衡。句点本身已包含视觉空白。

  防止换行。用于数字引用前（§ 42、Fig. 3）、© 后（© 2025）、尊称后（Dr. Smith）、英尺/英寸数值之间。

需求	工具
单词间的空格	一个单词空格（空格键）
防止换行	` `
新行，同一段落	`<br>`
新段落	`<p>` 标签
新页面（打印）	`page-break-before: always`
建议断字点	``

切勿长按空格键。切勿用双回车换行来增加间距。切勿在输出中使用制表符缩进。HTML 将所有空白折叠为单个空格（  除外）。

规则 1：粗体或斜体。互斥。切勿同时使用。规则 2：尽可能少用。如果所有内容都强调，就等于没有强调。

衬线字体：斜体用于温和强调，粗体用于强烈强调。无衬线字体：仅用粗体 —— 无衬线斜体几乎不突出。切勿将整个段落加粗。切勿使用引号进行强调。

下划线 —— 永不使用

切勿在文档或 UI 中使用下划线。这是打字机时代的变通方法。使用粗体或斜体。对于网页链接，使用微妙的样式：text-decoration-thickness: 1px; text-underline-offset: 2px。

全大写 —— 少于一行，始终添加字母间距

大写字母更难阅读（均匀的矩形 vs 多变的小写轮廓）。适用于短标题、标签、说明文字。始终添加 5–12% 的字母间距。始终确保开启字距调整。切勿将整个段落大写。CSS 中使用 letter-spacing: 0.06em。

小型大写字母 —— 仅限真实字体

切勿伪造（缩小的常规大写字母）。对具有真实小型大写字母（OpenType smcp）的字体使用 font-variant-caps: small-caps。系统字体通常没有。添加字母间距和字距调整。

印刷：10–12pt。网页：15–25px。默认的 12pt 是打字机时代的遗留。半磅的差异也很重要。使用最小的增量进行强调。使用 clamp() 进行流畅的网页尺寸调整。

全大写和小型大写字母额外增加 5–12%。小写字母不添加。切勿将字母间距拉大到字母之间可以容纳空隙的程度。CSS：letter-spacing: 0.05em 到 0.12em。

字距调整 —— 始终开启

没有例外。font-feature-settings: "kern" 1; text-rendering: optimizeLegibility;

仅在 fi/fl 视觉上冲突时必须使用。检查粗体和斜体时也要注意。否则可选。CSS：font-feature-settings: "liga" 1。

数据表格使用等宽数字（"tnum"）。正文使用旧式数字（"onum"）。默认数字适用于大多数情况。数字表格使用 font-variant-numeric: tabular-nums lining-nums。

专业工作中不使用古怪字体（新奇字体、手写体、书法体、马戏团字体）
正文不使用等宽字体 —— 仅用于代码（而 Courier 是最差的等宽字体）
印刷正文：强烈推荐衬线字体
网页正文：现代屏幕上衬线或无衬线字体均可
InDesign 中使用度量间距，切勿使用视觉间距（视觉间距会破坏字距调整）

最多 2 种字体。每种字体有固定的角色。可以混合衬线+衬线或无衬线+无衬线。很少在段落内混合字体。低对比度通常比高对比度更有效。

在设置其他任何内容之前，先设置正文。四个决定决定一切：字体、字号、行距、行长。所有其他元素都根据这些进行校准。

行长 —— 45–90 个字符

设计师最容易犯的第一大可读性因素。响应式网页布局的第一大缺陷。以字符数衡量，而非英寸。字母表测试：每行容纳 2–3 个小写字母表。CSS：在文本容器上使用 max-width: 65ch。

行距 —— 字号的 120–145%

line-height: 1.2 到 1.45。单倍行距（约 117%）太紧。双倍行距（约 233%）太松。文字处理器的"单倍"和"双倍"都偏离了最佳范围。

对于比例字体，一英寸是不够的。印刷：12pt 字体下 1.5–2.0 英寸。网页：文本容器上的 max-width 加上 padding。不要害怕留白 —— 宽裕的页边距显得专业。

网页左对齐（默认）。两端对齐需要 hyphens: auto —— 浏览器引擎很粗糙。居中：谨慎使用，仅用于短标题（< 1 行）。切勿将整个文本块居中。

段落分隔 —— 缩进或间距，二者选一

首行缩进： 1–4 倍字号。text-indent: 1.5em。第一段可选。段间距： 字体大小的 50–100%。margin-bottom: 0.75em。切勿使用双   标签。

标题 —— 最多 3 级

不要将所有标题全大写（除非非常短且添加了字母间距）
不要给标题加下划线
不要居中标题（极少数例外）
用上下间距来强调 —— 微妙而有效
使用粗体，而非斜体 —— 更突出
使用所需的最小字号增量（正文 11pt → 标题 13pt，而非 18pt）
标题上使用 hyphens: none
上方间距 > 下方间距（标题与后续文本相关）
保持标题与下一段落在一起（page-break-after: avoid）
使用分级数字（1.1, 2.1）而非罗马数字（I.A.1.a.i）

略微减小字号和行距。缩进 2–5em。不加引号（缩进表示引用）。保持行长可读。谨慎使用 —— 长块引用表明写作懒惰。

使用语义标记（<ul>、<ol>），切勿手动添加项目符号。优先使用空心项目符号。星号作为项目符号太小。不要过度缩进。

表格 —— 移除边框，增加内边距

数据本身就构成了隐含的网格。边框会增加杂乱感。仅保留表头行下方的细线。padding: 0.5em 1em。数字列使用等宽数字。数字右对齐。

首先尝试上下增加间距。边框粗细：0.5–1pt。不要使用图案边框。粗线是图表垃圾。

寡行（段落的最后一行单独出现在页面顶部）和孤行（段落的第一行单独出现在页面底部）。CSS 打印：orphans: 2; widows: 2。标题：page-break-after: avoid。对于断字引擎容易混淆的单词，使用软连字符 。

印刷分栏：信纸尺寸上 2–3 栏，切勿 4 栏。网页分栏：效果不佳（底部边缘不确定）。网格起指导作用，而非保证 —— 更简单的网格能强制执行更多一致性。将丑陋的内容对齐到网格上，结果仍然是丑陋的。

响应式网页排版

规则不随屏幕尺寸改变。 相同的行长、行距、层级。

同时缩放 font-size 和容器 width
文本容器始终使用 max-width —— 切勿让文本紧贴边缘
不要使用 ch 单位进行精确测量（它只测量零宽度）
使用 clamp() 进行流畅缩放：font-size: clamp(16px, 2.5vw, 20px)
移动端最小值：文本容器上使用 padding: 0 1rem
常见失败：图像/导航缩放仔细，正文文本却被忽略

现代屏幕渲染字体的效果几乎与印刷品一样好。"屏幕使用无衬线字体"的说法在 72dpi 时代是正确的，但现在已过时。衬线字体在现代屏幕上效果良好。深色模式：略微减轻字重。在 macOS 和 Windows 上测试（抗锯齿效果不同）。

正文优先 —— 其 4 个属性决定一切
前景与背景 —— 不要让装饰喧宾夺主
最小的可见增量 —— 半磅也很重要
如有疑问，两者都试 —— 制作样本，不要空谈理论
一致性 —— 相同的事物看起来相同
将新元素与现有元素关联 —— 每个元素都约束下一个
保持简单 —— 3 种颜色和 5 种字体？再想想
模仿你喜欢的事物 —— 效仿现实世界中的优秀排版

🇺🇸English

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.

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 “ ” for double, ‘ ’ for single.

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

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:

{/* WRONG — renders literally as \u2019 */}
<p>Don\u2019t do this</p>

What works (pick one):

Actual UTF-8 characters (preferred): Paste the real character directly into the source file.
```
Don\u2019t do this {/* This is the actual curly apostrophe character U+2019 */}
```
JSX expression with string literal: Wrap in curly braces so the JS engine interprets the escape.
```
Don{'\u2019'}t do this
```
HTML entity (HTML files only): Use ’ — but this does NOT work in JSX/React.

For bulk fixes via CLI , use sed with raw UTF-8 bytes (not escape sequences):

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)	`–`	Ranges (1–10), connections (Sarbanes–Oxley Act)
— (em dash)	`—`	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   if crushed. No slash where en dash belongs. Hyphenate phrasal adjectives (five-dollar bills). No hyphen after -ly adverbs.

Ellipses — One Character

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

Math and Measurement

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

Foot and inch marks — the ONE exception to curly quotes. Must be STRAIGHT: ' for foot, " for inch. Use   between values: 6' 10".

Trademark and Copyright

Paragraph and Section Marks

§ (§) and ¶ (¶) always followed by  : § 1782. Spell out at sentence start. Double for plurals: §§.

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

  prevents line break. Use before numeric refs (§ 42, Fig. 3), after © (© 2025), after honorifics (Dr. Smith), between foot/inch values.

White-Space Characters

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

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

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

No goofy fonts (novelty, script, handwriting, circus) in professional work
No monospaced for body text — code only (and Courier is the worst monospaced)
Print body: strongly prefer serif
Web body: serif or sans both fine on modern screens
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   tags.

Headings — Max 3 Levels

Don't all-caps headings (unless very short + letterspaced)
Don't underline headings
Don't center headings (rare exceptions)
Emphasize with space above and below — subtle and effective
Use bold, not italic — stands out better
Smallest point-size increment needed (body 11pt → heading 13pt, not 18pt)
hyphens: none on headings
Space above > space below (heading relates to text that follows)
Keep heading with next paragraph (page-break-after: avoid)
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  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.

Scale font-size and container width together
Always max-width on text containers — never edge-to-edge text
Don't use ch unit for exact measurement (only measures zero width)
clamp() for fluid scaling: font-size: clamp(16px, 2.5vw, 20px)
Mobile minimum: padding: 0 1rem on text containers
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

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

Weekly Installs

Repository

bencium/bencium…gn-skill

GitHub Stars

First Seen

12 days ago

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode24

github-copilot24

codex24

amp24

cline24

kimi-cli24

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

122,000 周安装