typography

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Typography

排版设计

Professional typography for user interfaces.

面向用户界面的专业排版指南。

Output Contract

输出规范

—

字体系统建议输出格式：

For type system recommendations:

markdown

undefined

markdown

undefined

Type System

字体系统

Scale

比例设置

Base: [size, e.g., 16px]
Ratio: [e.g., Minor Third 1.200]
Rationale: [why this ratio]

基础字号: [例如：16px]
比例系数: [例如：小三度 1.200]
设计理由: [选择该比例的原因]

Hierarchy

层级结构

Level	Size	Weight	Line Height	Letter Spacing	Use
Display	...	...	...	...	Hero, marketing
H1	...	...	...	...	Page titles
H2	...	...	...	...	Section heads
Body	...	...	...	...	Paragraphs
Small	...	...	...	...	Captions, labels

层级	字号	字重	行高	字符间距	适用场景
展示级标题	...	...	...	...	首页横幅、营销板块
H1	...	...	...	...	页面标题
H2	...	...	...	...	板块标题
正文	...	...	...	...	段落文本
辅助文本	...	...	...	...	说明文字、标签

Fonts

字体选择

Primary: [font] - [rationale]
Secondary: [font, if applicable]
Mono: [font, if applicable]

主字体: [字体名称] - [选择理由]
次字体: [字体名称（可选）]
等宽字体: [字体名称（可选）]

Implementation

实现代码

css

/* Ready-to-use CSS variables */


For typography audits:

```markdown

css

/* 可直接使用的CSS变量 */

undefined

Typography Audit

排版审计输出格式：

Issues

—

Element	Problem	Recommendation
...	...	...

markdown

undefined

Quick Wins

排版审计

—

问题清单

[Immediate improvement 1]
[Immediate improvement 2]

undefined

元素	问题	优化建议
...	...	...

Core Principles

快速优化点

Hierarchy & Structure

—

Establish clear visual hierarchy through size, weight, and spacing
Limit to 3-4 distinct heading levels in practice
Use weight contrast (not just size) to differentiate levels
Maintain consistent hierarchy patterns across the application

[可立即实施的优化项1]
[可立即实施的优化项2]

undefined

Readability First

核心原则

—

层级与结构

Optimize for scanning: users read in F-patterns
Left-align body text (centered only for short, formal text)
Ensure sufficient contrast (4.5:1 minimum, 7:1 preferred)
Test with real content, not lorem ipsum

通过字号、字重和间距建立清晰的视觉层级
实际应用中限制使用3-4个不同的标题层级
利用字重对比（而非仅依靠字号）区分层级
在整个应用中保持一致的层级模式

Restraint & Consistency

可读性优先

Use 1-2 font families maximum (one serif, one sans-serif if pairing)
Establish a type scale and stick to it
Avoid decorative fonts for functional UI text
Let whitespace do the work; resist the urge to fill

优化文本以适配用户的F型阅读模式
正文文本采用左对齐（仅短篇幅正式文本可居中）
确保足够的对比度（最低4.5:1，推荐7:1）
使用真实内容而非占位文本进行测试

Type Scales

克制与一致性

Modular Scales

—

Common ratios for harmonious sizing:

Minor Second (1.067): Subtle, conservative
Major Second (1.125): Gentle, professional
Minor Third (1.200): Balanced, versatile
Major Third (1.250): Bold, impactful
Perfect Fourth (1.333): Strong hierarchy
Golden Ratio (1.618): Dramatic, editorial

最多使用1-2种字体族（如需搭配，可选择一种衬线体+一种无衬线体）
建立字体比例并严格遵循
功能性UI文本避免使用装饰性字体
合理运用留白，避免过度填充

Practical Scale (Minor Third, base 16px)

字体比例

—

模块化比例

text-xs:   12px (0.75rem)
text-sm:   14px (0.875rem)
text-base: 16px (1rem)
text-lg:   18px (1.125rem)
text-xl:   20px (1.25rem)
text-2xl:  24px (1.5rem)
text-3xl:  30px (1.875rem)
text-4xl:  36px (2.25rem)
text-5xl:  48px (3rem)

打造和谐字号的常用比例：

小二度 (1.067): 细微、保守
大二度 (1.125): 温和、专业
小三度 (1.200): 平衡、通用
大三度 (1.250): 醒目、有冲击力
纯四度 (1.333): 层级分明
黄金比例 (1.618): 富有张力、适合编辑类内容

When to Deviate

实用比例示例（小三度，基础字号16px）

Marketing/hero sections can use larger jumps
Dense data interfaces may need tighter scales
Mobile often requires slightly larger base sizes

text-xs:   12px (0.75rem)
text-sm:   14px (0.875rem)
text-base: 16px (1rem)
text-lg:   18px (1.125rem)
text-xl:   20px (1.25rem)
text-2xl:  24px (1.5rem)
text-3xl:  30px (1.875rem)
text-4xl:  36px (2.25rem)
text-5xl:  48px (3rem)

Measure (Line Length)

特殊场景调整

Optimal Ranges

—

Body text: 45-75 characters (66 ideal)
Short-form: 40-60 characters
Wide layouts: Use columns or max-width constraints
Mobile: Full width is acceptable due to narrow viewport

营销/横幅板块可使用更大的字号跨度
数据密集型界面可能需要更紧凑的比例
移动端通常需要稍大的基础字号

Implementation

行宽（Line Length）

—

最优范围

css

/* Tailwind equivalents */
max-w-prose  /* ~65ch */
max-w-2xl    /* 672px, good for articles */
max-w-xl     /* 576px, compact content */

正文文本: 45-75个字符（理想值66）
短文本: 40-60个字符
宽屏布局: 使用分栏或最大宽度限制
移动端: 由于视口较窄，可使用全宽

Multi-Column Considerations

实现方式

Narrower columns = shorter measure acceptable
Gutters should be at least 20px (1.25rem)
Avoid orphaned words at column breaks

css

/* Tailwind 等效类 */
max-w-prose  /* ~65ch */
max-w-2xl    /* 672px，适合文章内容 */
max-w-xl     /* 576px，适合紧凑内容 */

Line Height (Leading)

多栏布局注意事项

Guidelines by Context

—

Body text: 1.5-1.7 (generous for readability)
Headings: 1.1-1.3 (tighter, especially large sizes)
UI labels: 1.2-1.4 (compact but legible)
Buttons: 1.0-1.25 (single line, tight)

栏宽越窄，可接受的行宽越短
栏间距至少为20px (1.25rem)
避免栏尾出现孤立单词

Adjustments

行高（Leading）

—

场景化指南

Increase line height for wider measure
Decrease for larger type sizes
Consider the x-height of the typeface
Dark mode may benefit from slightly more leading

正文文本: 1.5-1.7（宽松行高提升可读性）
标题: 1.1-1.3（紧凑行高，大字号标题尤其如此）
UI标签: 1.2-1.4（紧凑但清晰）
按钮文本: 1.0-1.25（单行文本，紧凑排列）

Letter Spacing (Tracking)

调整策略

General Rules

—

Body text: Default (0) or very slight increase
All caps: Always add positive tracking (+0.05em to +0.1em)
Large headings: Slight negative tracking (-0.01em to -0.02em)
Small text: Slight positive tracking for legibility

行宽越宽，行高应越大
字号越大，行高应越小
考虑字体的x高度（小写字母的高度）
深色模式下可适当增加行高

Tailwind Classes

字符间距（Tracking）

—

通用规则

tracking-tighter: -0.05em
tracking-tight:   -0.025em
tracking-normal:  0
tracking-wide:    0.025em
tracking-wider:   0.05em
tracking-widest:  0.1em

正文文本: 使用默认值（0）或轻微增大
全大写文本: 务必增加正向间距（+0.05em至+0.1em）
大字号标题: 轻微缩小间距（-0.01em至-0.02em）
小字号文本: 轻微增大间距以提升可读性

All-Caps Text

Tailwind 类名

Always use
```
uppercase tracking-wide
```
or
```
tracking-wider
```
Keep short (1-3 words ideal)
Common for labels, category tags, eyebrow text

tracking-tighter: -0.05em
tracking-tight:   -0.025em
tracking-normal:  0
tracking-wide:    0.025em
tracking-wider:   0.05em
tracking-widest:  0.1em

Font Selection

全大写文本规范

System Font Stacks

—

Performant and native-feeling:

css

/* Sans-serif (modern) */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

/* Serif */
font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;

/* Monospace */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

始终搭配
```
uppercase tracking-wide
```
或
```
tracking-wider
```
文本长度控制在1-3个单词为宜
常用于标签、分类标识、眉题文本

Web Font Considerations

字体选择

—

系统字体栈

Limit to 2-3 weights per family (400, 500/600, 700)
Use
```
font-display: swap
```
for performance
Variable fonts reduce file size for multiple weights
Self-host for privacy and reliability

性能优异且贴合原生体验：

css

/* 无衬线体（现代风格） */
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

/* 衬线体 */
font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;

/* 等宽体 */
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

Pairing Principles

Web字体注意事项

Pair by contrast (serif + sans-serif)
Match x-height for visual harmony
Use one font for headings, one for body
Ensure both have needed weights/styles

每个字体族限制使用2-3种字重（400, 500/600, 700）
使用
```
font-display: swap
```
优化性能
可变字体可减少多字重场景下的文件体积
优先选择自托管以保障隐私与可靠性

Safe Recommendations

字体搭配原则

Sans-serif: Inter, Source Sans Pro, Open Sans, Work Sans
Serif: Source Serif Pro, Lora, Merriweather, Literata
Monospace: JetBrains Mono, Fira Code, Source Code Pro

通过对比搭配（衬线体+无衬线体）
匹配x高度以实现视觉和谐
一种字体用于标题，另一种用于正文
确保两种字体都具备所需的字重与样式

Paragraph Spacing

安全推荐字体

Between Paragraphs

—

Use margin-bottom equal to line-height or slightly more
Typically 1em to 1.5em between paragraphs
First paragraph after heading: reduced or no top margin

无衬线体: Inter, Source Sans Pro, Open Sans, Work Sans
衬线体: Source Serif Pro, Lora, Merriweather, Literata
等宽体: JetBrains Mono, Fira Code, Source Code Pro

Between Sections

段落间距

—

段落之间

2-3x paragraph spacing between major sections
Use consistent spacing tokens from design system
Consider visual grouping via proximity

段间距设置为行高或略大于行高
通常为1em至1.5em
标题后的第一段可减少或取消上边距

Typographic Details

板块之间

Quotation Marks

—

Use curly quotes (" " ' ') not straight quotes (" ')
Proper apostrophes: it's, don't, '90s
Consider the locale (French guillemets, German quotes)

主要板块之间的间距为段落间距的2-3倍
使用设计系统中统一的间距变量
通过视觉邻近性实现内容分组

Dashes

排版细节

—

引号

Hyphen (-): Word breaks, compound words
En dash (–): Ranges (2020–2024), relationships (New York–London)
Em dash (—): Parenthetical statements, emphasis

使用弯引号（" " ' '）而非直引号（" '）
正确使用撇号：it's, don't, '90s
考虑地区差异（如法语的 guillemets、德语的引号）

Numbers

破折号

Use tabular (monospace) figures in tables for alignment
Use proportional figures in body text
Consider old-style figures for editorial content

连字符 (-): 单词换行、复合词
短破折号 (–): 表示范围（2020–2024）、关联关系（New York–London）
长破折号 (—): 插入语、强调内容

Ellipsis

数字

Use proper ellipsis character (…) not three periods
Add thin space before/after in formal typography

表格中使用等宽数字实现对齐
正文中使用比例数字
编辑类内容可考虑使用老式数字

Responsive Typography

省略号

Fluid Type

—

Scale font sizes smoothly between breakpoints:

css

/* clamp(min, preferred, max) */
font-size: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);

使用标准省略号字符（…）而非三个句号
正式排版中可在前后添加窄空格

Breakpoint Adjustments

响应式排版

—

流式字体

Increase base size slightly on mobile (17-18px)
Reduce heading scale on mobile
Increase line height for small screens
Reduce measure on tablets (prose can feel too wide)

在断点之间平滑缩放字号：

css

/* clamp(最小值, 首选值, 最大值) */
font-size: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);

Touch Targets

断点调整

Minimum 44x44px for tappable text elements
Generous padding around links in body text
Avoid text-only targets without visual indication

移动端可适当增大基础字号（17-18px）
移动端缩小标题的比例跨度
小屏幕设备增大行高
平板设备缩小行宽（避免正文过宽）

Dark Mode Typography

触摸目标

Adjustments

—

Reduce font weight slightly (medium instead of semibold)
Increase letter spacing marginally
Consider warmer white (#f5f5f5) over pure white (#fff)
Increase line height by ~0.1 for perceived lightness

可点击文本元素的最小尺寸为44x44px
正文链接周围保留充足内边距
避免使用无视觉标识的纯文本可点击目标

Contrast Considerations

深色模式排版

—

调整策略

Pure white on pure black is harsh; soften both
Aim for 10:1 to 15:1 contrast in dark mode
Test with actual users; perceived contrast differs

轻微降低字重（由半粗体改为中等字重）
略微增大字符间距
优先选择暖白色（#f5f5f5）而非纯白色（#fff）
行高增加约0.1以提升视觉轻盈感

Accessibility

对比度注意事项

Font Size Minimums

—

Body text: 16px minimum (don't go below)
Secondary text: 14px minimum, 12px absolute floor
Legal/caption: 12px with increased tracking

纯黑背景搭配纯白文本过于刺眼，需适当柔化
深色模式下目标对比度为10:1至15:1
结合真实用户测试；感知对比度与实际数值存在差异

User Preferences

可访问性

—

最小字号要求

Respect
```
font-size
```
from browser settings
Use relative units (rem) not fixed (px) for text
Provide text scaling options for dense UIs

正文文本: 最小16px（不得更小）
辅助文本: 最小14px，绝对下限12px
法律文本/说明文字: 12px并增大字符间距

Dyslexia Considerations

用户偏好适配

Avoid justified text
Prefer sans-serif with distinct letterforms
Generous line height and paragraph spacing
OpenDyslexic as optional font choice

尊重浏览器设置中的
```
font-size
```
配置
使用相对单位（rem）而非固定单位（px）设置文本
为密集型UI提供文本缩放选项

Common Mistakes

阅读障碍适配

Avoid

—

All-caps body text or long headings
Centered body paragraphs
Line length over 80 characters
Insufficient contrast for "aesthetic" reasons
Mixing too many font families
Decorative fonts for UI text
Justified text on the web (causes rivers)
Tiny gray text on white backgrounds

避免两端对齐文本
优先选择字母形态区分度高的无衬线体
采用宽松的行高与段落间距
提供OpenDyslexic字体作为可选方案

Watch For

常见错误

—

需避免

Orphans and widows in prominent text
Inconsistent heading hierarchy
Missing font fallbacks
Layout shift from web font loading
Underlined text that isn't a link

正文或长标题使用全大写
正文段落居中对齐
行宽超过80个字符
为了"美观"牺牲足够的对比度
混合使用过多字体族
功能性UI文本使用装饰性字体
网页中使用两端对齐文本（会导致文本河流）
白色背景上使用极小的灰色文本

—

需要注意

—

重要文本中出现孤立单词（孤儿词与寡妇词）
标题层级不一致
缺少字体降级方案
网页字体加载导致布局偏移
非链接文本添加下划线