typography-expert

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Typography Expert

Typography 专家

Master typographer specializing in font pairing, typographic hierarchy, OpenType features, variable fonts, and performance-optimized web typography.

资深排版专家，专注于字体搭配、排版层级、OpenType特性、可变字体以及性能优化的网页排版。

When to Use This Skill

何时使用该技能

✅ Use for:

Font pairing recommendations for brand identity
Typographic hierarchy for design systems
Performance-optimized web font implementation
Variable font integration with CSS custom properties
Type scale calculations (modular, fluid, responsive)
Font loading strategies (FOUT/FOIT/FOFT prevention)
OpenType feature implementation (ligatures, small caps, numerals)
Accessibility compliance for typography (WCAG contrast, sizing)
Dark mode typography compensation
Multilingual typography support (RTL, CJK, diacritics)

❌ Do NOT use for:

Logo design or wordmark creation → use design-system-creator
Icon font implementation → use web-design-expert
General CSS styling unrelated to type → not a typography issue
Image-based or rasterized typography → different domain
Brand strategy or naming → this is visual implementation only
Motion graphics with text → use native-app-designer

✅ 适用场景：

品牌视觉的字体搭配建议
设计系统的排版层级搭建
性能优化的网页字体实现
结合CSS自定义属性的可变字体集成
字体制式计算（模块化、流式、响应式）
字体加载策略（避免FOUT/FOIT/FOFT问题）
OpenType特性实现（连字、小型大写字母、数字样式）
排版无障碍合规（WCAG对比度、尺寸要求）
深色模式排版适配
多语言排版支持（RTL、CJK、变音符号）

❌ 不适用场景：

标志设计或文字商标创建 → 请使用design-system-creator
图标字体实现 → 请使用web-design-expert
与排版无关的通用CSS样式 → 不属于排版问题范畴
基于图像或光栅化的排版 → 属于不同领域
品牌策略或命名 → 本技能仅负责视觉实现
含文字的动态图形 → 请使用native-app-designer

Core Expertise

核心专业能力

Font Selection Psychology

字体选择心理学

Serif vs Sans-Serif Decision Tree:

IF formal/traditional/authoritative needed → Serif (Garamond, Minion, Crimson)
IF modern/clean/technical needed → Sans-Serif (Inter, Helvetica, Roboto)
IF humanist/friendly/approachable → Humanist Sans (Gill Sans, Fira Sans, Source Sans)
IF geometric/structured/tech-forward → Geometric Sans (Futura, Avenir, Poppins)
IF editorial/long-form reading → Transitional Serif (Georgia, Charter, Lora)

Pairing Rules (Expert Knowledge):

Contrast, not conflict - Pair fonts with distinct personalities but compatible x-heights
Same designer rule - Fonts from same designer/foundry often pair well (Baskerville + Franklin Gothic)
Historical compatibility - Fonts from same era share design DNA (Didot + Bodoni: both Didone)
Superfamily shortcut - Use superfamily (Alegreya + Alegreya Sans) for guaranteed harmony

衬线与无衬线字体决策树：

IF 需要正式/传统/权威风格 → 衬线字体（Garamond, Minion, Crimson）
IF 需要现代/简洁/科技风格 → 无衬线字体（Inter, Helvetica, Roboto）
IF 需要人文/友好/易亲近风格 → 人文主义无衬线字体（Gill Sans, Fira Sans, Source Sans）
IF 需要几何/结构化/前沿科技风格 → 几何无衬线字体（Futura, Avenir, Poppins）
IF 需要编辑类/长文本阅读风格 → 过渡衬线字体（Georgia, Charter, Lora）

搭配规则（专业经验）：

对比而非冲突 - 搭配风格鲜明但x高度兼容的字体
同设计师规则 - 同一设计师/字体厂牌的字体通常搭配和谐（Baskerville + Franklin Gothic）
历史兼容性 - 同一时代的字体共享设计基因（Didot + Bodoni：均为Didone风格）
超级家族捷径 - 使用超级家族字体（Alegreya + Alegreya Sans）确保视觉和谐

Type Scale Systems

字体制式系统

Modular Scale Ratios:

Ratio	Name	Use Case
1.067	Minor Second	Dense UIs, small screens
1.125	Major Second	General web content
1.200	Minor Third	Most common, balanced hierarchy
1.250	Major Third	Marketing, headlines
1.333	Perfect Fourth	Bold statements, hero sections
1.414	Augmented Fourth	Editorial, dramatic hierarchy
1.618	Golden Ratio	Classical, use sparingly (too large for most UI)

Fluid Typography Formula (2024 Best Practice):

css

/* Base: 16px at 320px viewport, 20px at 1200px viewport */
font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);

/* Heading: 32px at 320px, 64px at 1200px */
font-size: clamp(2rem, 1rem + 3.6vw, 4rem);

模块化比例：

比例	名称	适用场景
1.067	小二度	紧凑UI、小屏幕
1.125	大二度	通用网页内容
1.200	小三度	最常用，平衡的层级结构
1.250	大三度	营销内容、标题
1.333	纯四度	醒目效果、首屏区域
1.414	增四度	编辑类内容、戏剧性层级
1.618	黄金比例	经典风格，谨慎使用（对多数UI来说过大）

流式排版公式（2024最佳实践）：

css

/* 基准：视口320px时16px，视口1200px时20px */
font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);

/* 标题：视口320px时32px，视口1200px时64px */
font-size: clamp(2rem, 1rem + 3.6vw, 4rem);

Variable Fonts

可变字体

Axis Control (Expert Knowledge):

Axis	Tag	Range	Use Case
Weight	wght	100-900	Adjust weight without loading multiple files
Width	wdth	75-125	Responsive text that adapts to container
Slant	slnt	-12-0	Oblique without separate italic file
Optical Size	opsz	8-144	Auto-adjust stroke contrast for size
Grade	GRAD	-200-150	Adjust weight without reflowing (dark mode)

Critical: Dark Mode Compensation

css

/* Text appears lighter on dark backgrounds - compensate with grade or weight */
@media (prefers-color-scheme: dark) {
  body {
    /* If variable font supports grade: */
    font-variation-settings: "GRAD" 50;
    /* Or bump weight slightly: */
    font-weight: 450; /* Instead of 400 */
  }
}

轴控参数（专业知识）：

轴	标签	范围	适用场景
字重	wght	100-900	无需加载多文件即可调整字重
字宽	wdth	75-125	可根据容器自适应的响应式文本
倾斜	slnt	-12-0	无需单独斜体文件的倾斜效果
光学尺寸	opsz	8-144	根据文本尺寸自动调整笔画对比度
灰度	GRAD	-200-150	无需重排即可调整字重（深色模式适配）

关键技巧：深色模式适配

css

/* 深色背景上文本显得更浅 - 通过灰度或字重补偿 */
@media (prefers-color-scheme: dark) {
  body {
    /* 若可变字体支持灰度轴： */
    font-variation-settings: "GRAD" 50;
    /* 或略微提高字重： */
    font-weight: 450; /* 替代默认400 */
  }
}

Performance Optimization

性能优化

Font Loading Priority:

Critical CSS first - Inline @font-face for above-fold fonts

Preload primary -

<link rel="preload" as="font" crossorigin>

font-display: swap - Show fallback immediately, swap when loaded
Subset aggressively - Latin Extended covers most Western languages at ~30KB vs ~150KB full

Budget Guidelines:

Performance Tier	Total Font Budget	Files
Fast (Core Web Vitals)	Under 100KB	2-3 WOFF2
Balanced	100-200KB	4-5 WOFF2
Rich Typography	200-400KB	6-8 WOFF2

System Font Stack (Zero Budget):

css

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
             "Segoe UI Emoji";

字体加载优先级：

优先内联关键CSS - 对首屏字体内联@font-face规则

预加载主字体 - 使用

<link rel="preload" as="font" crossorigin>

font-display: swap - 立即显示回退字体，加载完成后替换
激进子集化 - Latin Extended子集覆盖多数西方语言，大小约30KB，远小于完整包的150KB

预算指南：

性能层级	总字体预算	文件数量
快速（符合Core Web Vitals）	100KB以下	2-3个WOFF2文件
平衡	100-200KB	4-5个WOFF2文件
丰富排版	200-400KB	6-8个WOFF2文件

系统字体栈（零预算方案）：

css

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
             "Segoe UI Emoji";

Common Anti-Patterns

常见反模式

Anti-Pattern: Too Many Typefaces

反模式：使用过多字体家族

What it looks like: 4+ different font families on one page Why it's wrong: Creates visual chaos, destroys hierarchy, massive performance hit What to do instead: Maximum 2 families (heading + body), use weight/style variations

表现： 单页面使用4种及以上不同字体家族 问题： 造成视觉混乱，破坏层级结构，严重影响性能 解决方案： 最多使用2种字体家族（标题+正文），通过字重/样式变化实现差异化

Anti-Pattern: Ignoring x-Height Matching

反模式：忽略x高度匹配

What it looks like: Body text and fallback system font have visibly different sizes at same px Why it's wrong: CLS (Cumulative Layout Shift) when web font loads What to do instead: Use

size-adjust

in @font-face to match fallback x-height

css

@font-face {
  font-family: "Inter";
  src: url("inter.woff2") format("woff2");
  size-adjust: 107%; /* Matches Arial x-height */
}

表现： 正文文本与回退系统字体在相同像素值下视觉尺寸明显不同 问题： 网页字体加载时会导致CLS（累积布局偏移） 解决方案： 在@font-face中使用

size-adjust

匹配回退字体的x高度

css

@font-face {
  font-family: "Inter";
  src: url("inter.woff2") format("woff2");
  size-adjust: 107%; /* 匹配Arial的x高度 */
}

Anti-Pattern: Weight Jumps Too Large

反模式：字重跨度太大

What it looks like: Using 400 for body and 700 for headings (300-point jump) Why it's wrong: Creates harsh hierarchy, especially at large sizes What to do instead: Use closer weights: 400/600 or 350/500 for subtle hierarchy

表现： 正文使用400字重，标题使用700字重（跨度300） 问题： 造成生硬的层级对比，大尺寸下尤为明显 解决方案： 使用更接近的字重：400/600或350/500，实现柔和的层级过渡

Anti-Pattern: Line Height as Unitless Number Everywhere

反模式：全局使用无单位行高

What it looks like:

line-height: 1.5

applied globally Why it's wrong: Headings need tighter line-height (1.1-1.2), body needs looser (1.5-1.7) What to do instead: Set line-height per type level

表现： 全局设置

line-height: 1.5

问题： 标题需要更紧凑的行高（1.1-1.2），正文需要更宽松的行高（1.5-1.7） 解决方案： 针对不同文本层级设置行高

Anti-Pattern: Fixed Font Sizes

反模式：固定字体尺寸

What it looks like:

font-size: 16px

hardcoded Why it's wrong: Breaks user preferences, accessibility issues, no responsive scaling What to do instead: Use rem units with clamp() for fluid sizing

表现： 硬编码

font-size: 16px

问题： 破坏用户偏好设置，存在无障碍问题，无法实现响应式缩放 解决方案： 使用rem单位结合clamp()实现流式尺寸

Anti-Pattern: Loading Full Character Sets

反模式：加载完整字符集

What it looks like: Loading 800KB font file with Cyrillic, Greek, Vietnamese Why it's wrong: 90%+ of file unused for English-only sites What to do instead: Subset to Latin or Latin Extended (~30KB)

表现： 加载包含西里尔文、希腊文、越南文的800KB字体文件 问题： 英文站点90%以上的字符未被使用 解决方案： 子集化为Latin或Latin Extended（约30KB）

OpenType Features

OpenType特性

Features Worth Enabling:

css

/* Proper numerals for tabular data */
font-feature-settings: "tnum" 1; /* Tabular numerals */

/* Proper fractions */
font-feature-settings: "frac" 1; /* 1/2 → ½ */

/* Small caps for abbreviations */
font-feature-settings: "smcp" 1, "c2sc" 1;

/* Stylistic alternates for brand */
font-feature-settings: "ss01" 1; /* Check font for available sets */

Modern CSS Alternative:

css

font-variant-numeric: tabular-nums;
font-variant-numeric: diagonal-fractions;
font-variant-caps: small-caps;

值得启用的特性：

css

/* 表格数据的规范数字样式 */
font-feature-settings: "tnum" 1; /* 等宽数字 */

/* 规范分数样式 */
font-feature-settings: "frac" 1; /* 1/2 → ½ */

/* 缩写的小型大写字母 */
font-feature-settings: "smcp" 1, "c2sc" 1;

/* 品牌风格的替代样式 */
font-feature-settings: "ss01" 1; /* 请查看字体支持的可用样式集 */

现代CSS替代方案：

css

font-variant-numeric: tabular-nums;
font-variant-numeric: diagonal-fractions;
font-variant-caps: small-caps;

Vertical Rhythm & Baseline Grid

垂直韵律与基线网格

Expert Approach:

Set base line-height (e.g., 1.5 × 16px = 24px)
All spacing (margin, padding) as multiples of 24px
Headings snap to baseline (line-height: 48px for h1 at 36px)

css

:root {
  --baseline: 1.5rem; /* 24px */
}

h1 {
  font-size: 2.25rem;
  line-height: calc(var(--baseline) * 2); /* 48px */
  margin-bottom: var(--baseline);
}

p {
  line-height: var(--baseline);
  margin-bottom: var(--baseline);
}

专业实现方法：

设置基准行高（例如：1.5 × 16px = 24px）
所有间距（margin、padding）均为24px的倍数
标题对齐基线（36px的h1使用48px行高）

css

:root {
  --baseline: 1.5rem; /* 24px */
}

h1 {
  font-size: 2.25rem;
  line-height: calc(var(--baseline) * 2); /* 48px */
  margin-bottom: var(--baseline);
}

p {
  line-height: var(--baseline);
  margin-bottom: var(--baseline);
}

Responsive Typography Breakpoints

响应式排版断点

Decision Tree:

Mobile (< 640px):
  - Base: 16px
  - Scale: 1.125 (Major Second)
  - Tighter hierarchy

Tablet (640-1024px):
  - Base: 17px
  - Scale: 1.2 (Minor Third)
  - Standard hierarchy

Desktop (> 1024px):
  - Base: 18-20px
  - Scale: 1.25 (Major Third)
  - Expanded hierarchy

Large Display (> 1440px):
  - Consider max-width on prose (65-75ch)
  - Don't keep scaling indefinitely

决策树：

移动端（< 640px）：
  - 基准尺寸：16px
  - 比例：1.125（大二度）
  - 紧凑层级结构

平板端（640-1024px）：
  - 基准尺寸：17px
  - 比例：1.2（小三度）
  - 标准层级结构

桌面端（> 1024px）：
  - 基准尺寸：18-20px
  - 比例：1.25（大三度）
  - 扩展层级结构

大显示屏（> 1440px）：
  - 考虑限制正文最大宽度（65-75ch）
  - 避免无限放大尺寸

Accessibility Requirements

无障碍要求

WCAG 2.1 AA Compliance:

Minimum contrast: 4.5:1 for body text, 3:1 for large text (24px+ or 18.5px+ bold)
Resizing: Text must be resizable to 200% without loss of content
Line spacing: At least 1.5× font size
Paragraph spacing: At least 2× font size
Letter spacing: User must be able to override to 0.12× font size
Word spacing: User must be able to override to 0.16× font size

WCAG 2.1 AA合规标准：

最低对比度： 正文文本4.5:1，大文本（24px以上或18.5px以上粗体）3:1
可调整性： 文本可放大至200%且不丢失内容
行间距： 至少为字体尺寸的1.5倍
段落间距： 至少为字体尺寸的2倍
字母间距： 用户可将其调整至字体尺寸的0.12倍
单词间距： 用户可将其调整至字体尺寸的0.16倍

Integration with Other Skills

与其他技能的集成

Works well with:

design-system-creator - Typography tokens for design systems
vibe-matcher - Font selection based on brand vibe
web-design-expert - Implement typography in layouts
vaporwave-glassomorphic-ui-designer - Retro-futuristic type treatments

可与以下技能配合使用：

design-system-creator - 为设计系统提供排版令牌
vibe-matcher - 根据品牌风格选择字体
web-design-expert - 在布局中实现排版方案
vaporwave-glassomorphic-ui-designer - 复古未来主义排版处理

Evolution Timeline

发展时间线

Pre-2015: Web-Safe Fonts Era

2015年前：网页安全字体时代

Limited to Arial, Georgia, Times New Roman. "Modern" meant using Helvetica.

仅局限于Arial、Georgia、Times New Roman。“现代”意味着使用Helvetica。

2015-2019: Google Fonts Explosion

2015-2019：Google Fonts爆发期

Everyone used Open Sans, Roboto, Montserrat. Performance secondary to variety.

所有人都在使用Open Sans、Roboto、Montserrat。性能次于多样性。

2020-2022: Variable Fonts Adoption

2020-2022：可变字体普及期

Single file, multiple weights/widths. Inter became the new default.

单文件包含多种字重/字宽。Inter成为新的默认字体。

2023-Present: Performance-First Typography

2023年至今：性能优先排版时代

Core Web Vitals pressure. Subsetting, font-display, CLS prevention mandatory. System font stacks gaining popularity for zero-load-time.

受Core Web Vitals压力。子集化、font-display、CLS预防成为强制要求。系统字体栈因零加载时间重新流行。

Watch For

注意事项

LLMs may suggest deprecated approaches:

```
@import
```
for fonts (blocks rendering)
Non-variable font families with 8+ weights
Font Awesome for icons (use SVG sprites instead)

大语言模型可能会建议已过时的方法：

使用
```
@import
```
加载字体（会阻塞渲染）
包含8种以上字重的非可变字体家族
使用Font Awesome图标（建议使用SVG精灵替代）

Quick Reference

快速参考

Ideal Line Length: 45-75 characters (65ch is sweet spot)

Heading Sizes (Minor Third Scale):

h1: 2.986rem
h2: 2.488rem
h3: 2.074rem
h4: 1.728rem
h5: 1.44rem
h6: 1.2rem
body: 1rem

Safe Google Font Pairings:

Inter + Merriweather (Modern + Traditional)
Poppins + Lora (Friendly + Elegant)
Space Grotesk + Source Serif (Tech + Editorial)
DM Sans + DM Serif Display (Same designer harmony)

Typography is invisible when it works, but unforgettable when it doesn't.

理想行长度： 45-75个字符（65ch为最佳值）

标题尺寸（小三度比例）：

h1: 2.986rem
h2: 2.488rem
h3: 2.074rem
h4: 1.728rem
h5: 1.44rem
h6: 1.2rem
正文: 1rem

安全的Google Fonts搭配：

Inter + Merriweather（现代+传统）
Poppins + Lora（友好+优雅）
Space Grotesk + Source Serif（科技+编辑类）
DM Sans + DM Serif Display（同设计师和谐搭配）

排版在生效时无形，失效时却令人难忘。