ui-typography

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI Typography Skill

UI排版技能

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.

这些规则提炼自Matthew Butterick所著的《实用排版》（https://practicaltypography.com）。 Butterick是一位排版师、作家和字体设计师，其作品连接了专业排版与日常数字写作。感谢Matthew，让这些知识变得易于获取且全面详实。如果您觉得本技能有价值，不妨直接支持他的工作。

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

这些是永久规则——并非潮流，也非个人观点。它们源自数百年的排版实践，经人类阅读视觉验证。永不过时。

**强制执行（默认）：**在生成任何包含可见文本的UI时，自动应用所有规则。使用正确的HTML实体、合适的CSS。无需征得许可，无需解释，直接生成正确的排版。

**审核：**在审查现有代码或设计时，识别违规内容并提供前后对比的修复方案。

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

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

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.

直引号是打字机时代的产物。双引号使用

&ldquo;

&rdquo;

，单引号使用

&lsquo;

&rsquo;

。

撇号始终向下——与闭合单引号

&rsquo;

完全相同。智能引号引擎常会在年代缩写（'70s）和词首缩约词（'n）前错误插入开引号，需用显式的

&rsquo;

修正。

当设置

<html lang="en">

时，

<q>

标签会自动应用弯引号。

夏威夷语中的okina符号向上——它是一个字母，而非撇号。可使用开单引号或按英语习惯处理。

JSX/React Implementation Warning

JSX/React实现注意事项

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):

Actual UTF-8 characters (preferred): Paste the real character directly into the source file.
jsx
```
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.
jsx
```
Don{'\u2019'}t do this
```
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.

Unicode转义序列（
\u2019
、
\u201C
等）在JSX文本内容中无效。它们会被渲染为字面字符——用户看到的是

\u2019

而非弯撇号。这是因为标签之间的JSX文本会被转译器视为字符串字面量，而非JavaScript表达式。

错误示例：

jsx

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

正确方案（任选其一）：

**直接使用UTF-8字符（推荐）：**将真实字符直接粘贴到源文件中。
jsx
```
Don’t do this {/* 这是真实的弯撇号字符U+2019 */}
```
**用花括号包裹字符串字面量的JSX表达式：**用花括号包裹，让JS引擎解析转义序列。
jsx
```
Don{'\u2019'}t do this
```
**HTML实体（仅适用于HTML文件）：**使用
```
&rsquo;
```
——但此方法在JSX/React中无效。

通过CLI批量修复，使用

sed

配合原始UTF-8字节（而非转义序列）：

bash

CURLY=$(printf '\xe2\x80\x99')  # U+2019 右单引号
sed -i '' "s/don't/don${CURLY}t/g" file.tsx

在JavaScript数据数组和字符串字面量中，

\u2019

可正常工作，因为JS引擎会处理转义序列。该问题仅影响标签之间的JSX文本内容。

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

--

---

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

字符	HTML写法	用途
- （连字符）	`-`	复合词（cost-effective）、换行分隔
– （en破折号）	`–`	范围（1–10）、关联表述（Sarbanes–Oxley Act）
— （em破折号）	`—`	语句中断——例如这样

切勿用

--

或

---

近似替代。如果开头用了“from”，应搭配“to”而非en破折号。复合姓名（婚后冠姓）用连字符；联合作者用en破折号。em破折号通常无空格，若显得拥挤可添加

&thinsp;

。en破折号适用场景下切勿使用斜杠。短语形容词需加连字符（five-dollar bills）。以-ly结尾的副词后无需加连字符。

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.

使用

&hellip;

（…），而非三个句号。前后需加空格；靠近文本的一侧使用

&nbsp;

。对于中断的对话，优先使用em破折号而非省略号。

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;

乘法使用

&times;

，减法使用

&minus;

。加法

和等号

直接使用键盘输入。 En破折号可作为简易减号使用。尺寸标注：8.5″ × 14″需使用

&times;

。

英尺与英寸符号——这是弯引号规则的唯一例外。必须使用直引号：英尺用

&#39;

，英寸用

&quot;

。数值与符号间需加

&nbsp;

：

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;

使用真实符号：

&copy;

&trade;

&reg;

，切勿使用(c) (TM) (R)。™/®为上标字符，前面无需空格。 ©为行内字符，后面加

&nbsp;

Paragraph and Section Marks

段落与章节符号

&sect;

(§) and

&para;

(¶) always followed by

&nbsp;

&sect;&nbsp;1782

. Spell out at sentence start. Double for plurals:

&sect;&sect;

&sect;

（§）和

&para;

（¶）后必须紧跟

&nbsp;

：

&sect;&nbsp;1782

。句首需拼写完整。复数形式使用双符号：

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

专有名词：重音符号必须保留（François Truffaut、Plácido Domingo）。外来词：查阅词典确认——部分已本土化（naive），部分未本土化（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

分号用于连接独立分句。冒号用于引出补充内容。切勿混用
问号：使用不足——可用其简化主题句
感叹号：使用过度——长篇文档中建议仅使用一个。切勿连续使用多个
&符号：仅在专有名称中使用正确。正文文本中请写“and”
括号/方括号：无需沿用所包裹内容的格式
表情符号/emoji：在邮件/Slack中可使用。切勿用于正式文档或专业UI文案

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.

&nbsp;

用于防止换行。适用于数字引用前（

&sect;&nbsp;42

、

Fig.&nbsp;3

）、©符号后（

&copy;&nbsp;2025

）、尊称后（

Dr.&nbsp;Smith

）、英尺/英寸数值之间。

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

&nbsp;

需求	工具
单词间空格	单个空格（空格键）
防止换行	` `
换行但不换段	`<br>`
新段落	`<p>` 标签
分页（打印）	`page-break-before: always`
建议连字符位置	``

切勿长按空格键输入多个空格。切勿用两次回车来增加间距。输出内容中切勿用制表符缩进。 HTML会将所有空白折叠为单个空格（

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

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

衬线字体：斜体用于温和强调，粗体用于强烈强调。无衬线字体：仅使用粗体——无衬线斜体几乎无法凸显效果。切勿将整个段落设为粗体。切勿用引号表示强调。

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

文档或UI中切勿使用下划线。这是打字机时代的权宜之计。改用粗体或斜体。对于网页链接，使用柔和样式：

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.

全大写更难阅读（同质化矩形 vs 形态各异的小写字母轮廓）。适用于短标题、标签、说明文字。必须添加5–12%的字间距。必须启用字距调整。切勿将整个段落设为全大写。CSS中设置

letter-spacing: 0.06em

。

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.

切勿伪造（缩小常规大写字母）。配合支持真实小型大写的字体（OpenType

smcp

特性），使用

font-variant-caps: small-caps

。系统字体通常不支持此特性。需添加字间距和字距调整。

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.

印刷品：10–12pt。网页：15–25px。12pt默认值是打字机时代的遗留产物。0.5pt的差异也很重要。使用最小增量来实现强调效果。网页中使用

clamp()

实现流体字号。

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

0.12em

全大写和小型大写需额外添加5–12%的字间距。小写字母无需添加。切勿间距过大，导致字母间空隙可容纳其他字母。CSS设置：

letter-spacing: 0.05em

至

0.12em

。

Kerning — Always On

字距调整——始终启用

No exceptions.

font-feature-settings: "kern" 1; text-rendering: optimizeLegibility;

无例外。CSS设置：

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

仅当fi/fl视觉上重叠时才强制使用。同时检查粗体和斜体样式。其他情况可选。 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.

数据表格使用表格数字（

"tnum"

）。正文文本使用旧式数字（

"onum"

）。默认数字样式适用于大多数场景。数值表格使用

font-variant-numeric: tabular-nums lining-nums

。

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)

专业工作中切勿使用怪异字体（新奇字体、手写体、草书、马戏团风格字体）
正文文本切勿使用等宽字体——仅代码场景可用（Courier是最差的等宽字体）
印刷品正文：优先选择衬线字体
网页正文：现代屏幕上衬线和无衬线字体均适用
InDesign中使用度量间距，切勿使用光学间距（光学间距会破坏字距调整）

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.

最多使用2种字体。每种字体需承担固定角色。可混搭衬线+衬线或无衬线+无衬线字体。段落内极少混搭字体。低对比度通常比高对比度更有效。

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

行宽——45–90个字符

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.

这是设计师最常出错的头号可读性因素，也是响应式网页布局的头号缺陷。以字符数为单位衡量，而非英寸。字母测试：每行可容纳2–3个小写字母表的长度。 CSS设置：文本容器

max-width: 65ch

。

Line Spacing — 120–145% of Point Size

行高——字号的120–145%

line-height: 1.2

1.45

. Single-spaced (~117%) is too tight. Double (~233%) is too loose. Word processor "Single" and "Double" both miss the optimal range.

line-height: 1.2

至

1.45

。单倍行距（约117%）过密，双倍行距（约233%）过松。文字处理软件中的“单倍”和“双倍”行距均未达到最优范围。

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.

对于比例字体，1英寸的边距不够。印刷品：12pt字号下设置1.5–2.0″边距。网页：文本容器设置

max-width

并添加

padding

。不要惧怕留白——充足的边距更显专业。

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.

网页默认使用左对齐。两端对齐需配合

hyphens: auto

——浏览器引擎的连字处理仍较为粗糙。居中对齐：仅适用于短标题（少于一行），慎用。切勿将整个文本块设为居中对齐。

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.

**首行缩进：**1–4倍字号。

text-indent: 1.5em

。第一段可选不缩进。 **段落间距：**字号的50–100%。

margin-bottom: 0.75em

。切勿使用双

<br>

标签。

Headings — Max 3 Levels

标题——最多3级

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)

标题切勿全大写（除非极短且已添加字间距）
标题切勿添加下划线
标题切勿居中对齐（极少例外）
用上下间距实现强调——柔和且有效
使用粗体，而非斜体——更易凸显
使用最小的字号增量（正文11pt → 标题13pt，而非18pt）
标题设置
```
hyphens: none
```
标题上方间距 > 下方间距（标题与后续文本关联更紧密）
标题需与下一段落保持同页（
```
page-break-after: avoid
```
）
使用层级编号（1.1、2.1）而非罗马数字（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.

略微缩小字号和行高。缩进2–5em。无需加引号（缩进已表明是引用）。保持行宽可读。慎用长块引用——过长的块引用意味着写作偷懒。

Lists

列表

Semantic markup (

<ul>

<ol>

), never manual bullets. Prefer hollow bullets. Asterisks are too small for bullets. Don't over-indent.

使用语义化标签（

<ul>

、

<ol>

），切勿手动添加项目符号。优先使用空心项目符号。星号作为项目符号过小。切勿过度缩进。

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.

数据本身已隐含网格结构。边框会增加视觉杂乱。仅在表头行下方保留细边框。

padding: 0.5em 1em

。数值列使用表格数字。数字右对齐。

Rules and Borders

分隔线与边框

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

优先尝试用上下间距替代。边框粗细：0.5–1pt。切勿使用带图案的边框。粗线条属于多余的视觉噪音。

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.

孤行（页面顶部单独一行的段落末行）和寡行（页面底部单独一行的段落首行）。印刷品CSS设置：

orphans: 2; widows: 2

。标题设置：

page-break-after: avoid

。对于连字引擎无法正确处理的单词，使用软连字符

&shy;

。

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.

印刷品分栏：信纸大小的纸张最多2–3栏，切勿设为4栏。网页分栏：效果尴尬（底部边缘不确定）。网格用于引导，而非强制——简单的网格更易保证一致性。将丑陋的内容对齐到网格，结果依然丑陋。

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

规则不会随屏幕尺寸改变。行宽、行高、层级结构保持一致。

同步缩放
```
font-size
```
和容器
```
width
```
文本容器始终设置
```
max-width
```
——切勿使用通栏文本
切勿用
```
ch
```
单位进行精确测量（仅以零字符宽度为基准）

使用

clamp()

实现流体缩放：

font-size: clamp(16px, 2.5vw, 20px)

移动端最小值：文本容器设置
```
padding: 0 1rem
```
常见失误：图片/导航精心缩放，却忽略了正文文本

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

现代屏幕的字体渲染效果几乎与印刷品相当。“屏幕使用无衬线字体”仅在72dpi屏幕时代成立，如今已过时。衬线字体在现代屏幕上表现良好。深色模式：略微减轻字体重量。需在macOS和Windows系统上测试（抗锯齿效果不同）。

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

正文优先——其4项属性决定全局
前景与背景——切勿让装饰元素盖过正文文本
最小可见增量——0.5pt的差异至关重要
存疑时，两种方案都尝试——制作样例，而非空谈理论
一致性——相同元素外观一致
新旧关联——每个元素都受其他元素约束
保持简洁——3种颜色、5种字体？请三思
模仿优秀案例——借鉴现实中的优质排版