mobile-typography

# 移动端排版参考 > 字号比例、系统字体、动态类型、无障碍性及深色模式排版。 > **排版失败是移动应用不可读的头号原因。** --- ## 1. 移动端排版基础 ### 为什么移动端排版与众不同 桌面端： 移动端： ├── 20-30 英寸观看距离 ├── 12-15 英寸观看距离 ├── 大视口 ├── 小视口，狭窄 ├── 悬停显示详情 ├── 点击/滚动显示详情 ├── 受控光照 ├── 可变光照（户外等） ├── 固定字体大小 ├── 用户可控缩放 └── 长时间阅读 └── 快速扫描 ### 移动端排版规则 | 规则 | 桌面端 | 移动端 | |------|---------|--------| | **最小正文字号** | 14px | 16px (14pt/14sp) | | **最大行长** | 75 字符 | 40-60 字符 | | **行高** | 1.4-1.5 | 1.4-1.6 (更宽松) | | **字重** | 多变 | 常规为主，加粗慎用 | | **对比度** | AA (4.5:1) | AA 最低，AAA 优先 | --- ## 2. 系统字体 ### iOS: SF Pro 系列 San Francisco (SF) 系列： ├── SF Pro Display: 大文本 (≥ 20pt) ├── SF Pro Text: 正文文本 (< 20pt) ├── SF Pro Rounded: 友好场景 ├── SF Mono: 等宽字体 └── SF Compact: Apple Watch, 紧凑 UI 特性： ├── 光学尺寸调整（自动） ├── 动态间距 ├── 表格/比例数字 ├── 出色的易读性 ### Android: Roboto 系列 Roboto 系列： ├── Roboto: 默认无衬线字体 ├── Roboto Flex: 可变字体 ├── Roboto Serif: 衬线选项 ├── Roboto Mono: 等宽字体 ├── Roboto Condensed: 窄体 特性： ├── 针对屏幕优化 ├── 广泛的语言支持 ├── 多种字重 ├── 小字号表现良好 ### 何时使用系统字体 ✅ 在以下情况使用系统字体： ├── 品牌未强制要求自定义字体 ├── 阅读效率是首要任务 ├── 应用需要原生/集成感 ├── 性能至关重要 ├── 需要广泛的语言支持 ❌ 在以下情况避免使用系统字体： ├── 品牌标识需要自定义 ├── 需要设计差异化 ├── 编辑/杂志风格 └── (但仍需支持无障碍性) ### 自定义字体考量 如果使用自定义字体： ├── 包含所有需要的字重 ├── 子集化以减小文件大小 ├── 在所有动态类型尺寸下测试 ├── 提供系统字体作为回退 ├── 测试渲染质量 └── 检查语言支持 --- ## 3. 字号比例 ### iOS 字号比例（内置） | 样式 | 字号 | 字重 | 行高 | |-------|------|-