apply-typography-scale

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill: Apply Typography Scale

Skill：应用排版比例

Purpose

目的

Create clear typographic hierarchy using a hand-crafted set of font sizes, weights, and colors.

使用手工设定的字体大小、字重和颜色创建清晰的排版层级。

Core Rules

核心规则

Hand-crafted, not mathematical — Avoid modular scales with fractional pixels
Use px or rem, never em — Prevents compounding issues
Minimum 25% jumps — 16px → 20px (25%), not 16px → 18px (12.5%)
Two weights only — 400/500 normal, 600/700 bold
Never < 400 for UI — Too hard to read at small sizes

手工设定，而非数学计算 — 避免使用带小数像素的模块化比例
使用px或rem，绝不使用em — 避免复合问题
最小25%的跨度 — 16px → 20px（25%），而非16px → 18px（12.5%）
仅使用两种字重 — 400/500为常规，600/700为粗体
UI文本字重绝不低于400 — 小尺寸下可读性太差

Recommended Scales

推荐比例

Marketing Page

营销页面

Hero:     48-60px,  weight 700,  line-height 1.1
H1:       36-40px,  weight 700,  line-height 1.2
H2:       28-32px,  weight 600,  line-height 1.3
Body:     16-18px,  weight 400,  line-height 1.6
Small:    14px,     weight 400,  line-height 1.6
Caption:  12px,     weight 400,  line-height 1.5

Hero:     48-60px,  weight 700,  line-height 1.1
H1:       36-40px,  weight 700,  line-height 1.2
H2:       28-32px,  weight 600,  line-height 1.3
Body:     16-18px,  weight 400,  line-height 1.6
Small:    14px,     weight 400,  line-height 1.6
Caption:  12px,     weight 400,  line-height 1.5

Application/Dense UI

应用/高密度UI

H1:     30-36px,  weight 700
H2:     24px,     weight 600
H3:     20px,     weight 600
H4:     16px,     weight 600
Body:   14-16px,  weight 400
Small:  12-13px,  weight 400

H1:     30-36px,  weight 700
H2:     24px,     weight 600
H3:     20px,     weight 600
H4:     16px,     weight 600
Body:   14-16px,  weight 400
Small:  12-13px,  weight 400

Line-Height Rules

行高规则

Inverse proportion to size:

Small text (12-14px): 1.6-1.7 (needs help finding next line)
Body text (16px): 1.5-1.6
Large headlines (30px+): 1-1.2 (needs less help)

与尺寸成反比：

小文本（12-14px）：1.6-1.7（需要辅助换行）
正文字体（16px）：1.5-1.6
大标题（30px+）：1-1.2（无需过多辅助）

Line Length

行长度

Optimal: 45-75 characters per line
Max-width: 20-35em for paragraphs
Wide paragraphs: Increase line-height to 1.8-2.0

最佳值：每行45-75个字符
最大宽度：段落为20-35em
宽段落：将行高增加至1.8-2.0

Decision Criteria

判断标准

PASS

通过

Scale uses a small set of intentional sizes with clear jumps between roles
Type hierarchy combines size, weight, line-height, and color
Body text remains readable across marketing, app, and content contexts
Line length and line-height fit the reading context

比例使用少量经过规划的尺寸，不同角色间有清晰跨度
排版层级结合了尺寸、字重、行高和颜色
正文在营销、应用和内容场景下均保持可读
行长度和行高符合阅读场景

FAIL

不通过

Scale relies on tiny increments that do not create hierarchy
Font weights are too light for UI text
Long-form text lines are too wide or cramped
```
em
```
sizing compounds unpredictably in nested elements

比例依赖微小增量，无法形成层级
UI文本字重过轻
长文本行过宽或过于拥挤
```
em
```
单位在嵌套元素中会产生不可预测的复合效果

Common Failure Modes

常见失败模式

Failure	Example	Fix
Em units	`1.25em` parent, `0.875em` child = 17.5px	Use `px` or `rem`
Micro-steps	16px, 18px, 20px	16px, 20px, 28px
Weight 300	Light body text	Minimum 400
Long lines	100+ characters	Constrain to 35em
Uniform line-height	1.5 for all	Vary by size

问题	示例	修复方案
Em单位	`1.25em` 父元素， `0.875em` 子元素 = 17.5px	使用 `px` 或 `rem`
微小步长	16px, 18px, 20px	16px, 20px, 28px
字重300	轻量正文	最小字重400
过长行	100+字符	限制为35em
统一行高	所有文本行高1.5	根据尺寸调整

Examples

示例

See

examples/typography-scale/

for scale implementations.

查看

examples/typography-scale/

获取比例实现示例。

References

参考资料

```
references/hand-crafted-scales.md
```
```
references/avoid-em-units.md
```
```
references/line-height-proportion.md
```

```
references/hand-crafted-scales.md
```
```
references/avoid-em-units.md
```
```
references/line-height-proportion.md
```