Serif vs Sans-Serif：认知科学视角
Serif 衬线体
Aa Bb Cc
123 印刷
123 印刷
笔画末端有装饰线（衬线）。传统观点：衬线引导视线沿行移动→更适合长文阅读。但屏幕低DPI时代衬线反而模糊→数字界面偏好无衬线。
Sans-Serif 无衬线体
Aa Bb Cc
123 数字
123 数字
笔画末端无装饰线。现代观点：屏幕显示更清晰→UI界面首选。但长文阅读是否真的不如衬线？研究结果是"不确定"——个人习惯和熟悉度更重要。
研究总结（Beier & Dyson, 2022综述）：
• 衬线vs无衬线的阅读速度差异非常小，且被其他因素（字号、行高、字间距）掩盖
• 更重要的因素：x-height（x字高）、字重对比、字符间距
• 在高DPI屏幕上（Retina），衬线体显示效果已接近印刷
• 结论：选你喜欢的，然后优化字号/行高/间距
• 衬线vs无衬线的阅读速度差异非常小，且被其他因素（字号、行高、字间距）掩盖
• 更重要的因素：x-height（x字高）、字重对比、字符间距
• 在高DPI屏幕上（Retina），衬线体显示效果已接近印刷
• 结论：选你喜欢的，然后优化字号/行高/间距
📏 字号/行高/字间距的黄金比例
Display48px / 3rem
H132px / 2rem
H224px / 1.5rem
H320px / 1.25rem
Body16px / 1rem
Small14px / 0.875rem
Caption12px / 0.75rem
排版比例（Type Scale）：使用数学比例生成字号阶梯
• 小二度 (1.067): 16→17→18→20→21→23→24
• 大二度 (1.125): 16→18→20→23→25→28→32
• 大三度 (1.25) — 推荐: 16→20→25→31→39→49→61
• 完全四度 (1.333): 16→21→28→38→50→67→90
• 黄金比例 (1.618): 16→26→42→68→110→178→288
• 小二度 (1.067): 16→17→18→20→21→23→24
• 大二度 (1.125): 16→18→20→23→25→28→32
• 大三度 (1.25) — 推荐: 16→20→25→31→39→49→61
• 完全四度 (1.333): 16→21→28→38→50→67→90
• 黄金比例 (1.618): 16→26→42→68→110→178→288
🔗 字体配对的3条规则
规则1：衬线+无衬线
经典搭配：一个衬线体做标题，一个无衬线体做正文（或反之）。对比产生层次感。
Georgia 标题
System UI 正文文本，简洁易读的正文搭配优雅的衬线标题。
System UI 正文文本，简洁易读的正文搭配优雅的衬线标题。
规则2：对比但不要冲突
两个字体要有足够差异（不是两个几乎一样的无衬线），但风格要兼容（不要一个几何+一个人文）。
Courier 标题
Helvetica 正文——等宽+无衬线的强对比。
Helvetica 正文——等宽+无衬线的强对比。
规则3：最多2-3种字体
每增加一种字体都增加视觉噪音和加载时间。大多数设计系统只需要：1个标题字体+1个正文字体+1个等宽字体（代码）。
标题: Georgia
正文: System UI
代码: Monospace
正文: System UI
代码: Monospace
🇨🇳 中文排版的特殊性
1. 字号基准不同：中文正文字号通常16-18px（比英文14-16px稍大），因为中文字形更复杂，需要更多像素才能清晰显示。
2. 行高更大：中文行高建议1.7-2.0（vs 英文1.5-1.7），因为汉字笔画密集，需要更多"呼吸空间"。
3. 中英混排：中英文混排时，英文基线与中文对齐是个问题。常见方案：英文字号略小于中文，或用vertical-align调整。
4. 标点挤压：中文标点在行首/行尾需要特殊处理（避头尾规则）。CSS text-spacing和CSS Text Level 4的text-autospace属性逐步支持。
5. 字体回退链：CSS中中文font-family必须考虑多平台：如"PingFang SC"(macOS), "Microsoft YaHei"(Windows), "Noto Sans SC"(Web), sans-serif。
2. 行高更大：中文行高建议1.7-2.0（vs 英文1.5-1.7），因为汉字笔画密集，需要更多"呼吸空间"。
3. 中英混排：中英文混排时，英文基线与中文对齐是个问题。常见方案：英文字号略小于中文，或用vertical-align调整。
4. 标点挤压：中文标点在行首/行尾需要特殊处理（避头尾规则）。CSS text-spacing和CSS Text Level 4的text-autospace属性逐步支持。
5. 字体回退链：CSS中中文font-family必须考虑多平台：如"PingFang SC"(macOS), "Microsoft YaHei"(Windows), "Noto Sans SC"(Web), sans-serif。
🎮 排版参数调节器
排版预览
这是一段中文排版示例文本。字体大小、行高、字间距和段落间距都会影响阅读体验。好的排版应该让读者忘记排版本身——因为阅读太流畅了。
This is an English sample. Typography parameters affect both CJK and Latin scripts, but optimal values differ. Chinese typically needs larger font size and more line height than English.