设计稿字号层级怎么设定？一文搞懂UI设计中的字体排版规范
📖 目录导读
- 为什么字号层级设定如此重要？
- 基础原则：从可读性到视觉层次
- 主流字号层级体系（Web端 vs 移动端）
- 如何建立自己的字号层级系统？
- 常见设计稿字号设定问答（FAQ）
- 总结与最佳实践
为什么字号层级设定如此重要？
如果你曾打开一个设计稿，发现标题、正文、注释的字号看起来“差不多”，或者阅读时眼睛不知道该往哪里看——那很可能是因为字号层级没有合理设定。
字号层级（Typography Hierarchy）是UI设计中决定信息视觉优先级的核心手段，它不仅影响用户的阅读流畅度，还直接关系到产品的品牌感和可用性，一个好的字号系统可以让用户在0.3秒内判断出页面中哪些内容是标题、哪些是正文、哪些是辅助信息。
根据Nielsen Norman Group的研究，用户在网页上平均只阅读20%-28%的文字内容，这意味着设计稿必须通过视觉层级引导用户快速捕获关键信息，而字号,正是实现这一目标最直观的工具之一。
基础原则：从可读性到视觉层次
要设定合理的字号层级,首先需要理解三个核心原则：
1 最小可读字号原则
- Web端：正文字号建议不小于 14px（中文环境下16px更安全）
- 移动端：正文字号通常建议 15-17px（iOS标准为17pt,Android推荐16sp）
- 辅助信息（如标签、注释）：最小不低于 11px（中文建议12px起步）
2 黄金比例与节奏感
字号层级之间最好遵循一定的倍数关系,常见的有：
- 25倍节奏（主要字体比例）：16px → 20px → 25px → 31px
- 333倍节奏（更明显的层级）：16px → 21px → 28px → 37px
这种数学化的节奏可以让页面看起来更和谐统一,而不是随意堆砌。
3 层级数量控制
一个设计稿中，建议将字号层级控制在 3-5层（不含极端大标题）：
- 层级1（H1）
- 层级2（H2/H3）
- 层级3：正文（Body）
- 层级4：辅助文字（Caption/Small）
- 层级5：标签/微交互文字（极少使用）
层级过多会让用户疲劳,过少则无法区分信息权重。
主流字号层级体系（Web端 vs 移动端）
🔹 Web端（桌面端 & 响应式）
| 层级 | 名称 | 字号（px） | 行高（px） | 使用场景 |
|---|---|---|---|---|
| H1 | 32-48 | 2-1.4倍 | 页面级大标题 | |
| H2 | 24-32 | 3倍 | ||
| H3 | 20-24 | 4倍 | ||
| Body | 16-18 | 5-1.6倍 | ||
| Small | 辅助文字 | 14 | 4倍 | 注释、时间、来源 |
| Caption | 12 | 3倍 | 标签、按钮、小提示 |
注意：中文环境下，由于汉字笔画结构复杂，最小字号建议比英文大1-2px。
🔹 移动端（iOS & Android）
| 层级 | iOS (pt) | Android (sp) | 中文建议（px/rem） | |------|----------|--------------|-------------------|| 17-18 | 18-20 | 18-20px || 15-17 | 16-18 | 16-18px || 15-17 | 14-16 | 15-17px（常用16px） || 13-14 | 13-14 | 13-14px | | 辅助文字 | 11-12 | 11-12 | 12px |
关键区别：移动端由于屏幕尺寸小、阅读距离近，字号可以略大于等比例缩小的桌面端字号，同时建议使用 sp/pt单位,以便系统字体设置可以自动缩放。
如何建立自己的字号层级系统？
如果你不想每次做设计都重新选字号，强烈建议建立一套 可复用的字号层级系统（Typography Scale）,以下是具体步骤：
Step 1：确定基数字号（Base Size）
- Web端推荐 16px（浏览器默认字号）
- 移动端推荐 16sp（Android）或 17pt（iOS）
Step 2：选定递增比例
- 保守型：1.25倍（适合信息型网站）
- 节奏型：1.333倍（适合创意/品牌型页面）
- 激进型：1.5倍（适合仅需2-3层级的极简设计）
Step 3：生成层级数值（以1.25倍为例）
16px × 1.25 = 20px (H3)
20px × 1.25 = 25px (H2)
25px × 1.25 = 31px (H1)
31px × 1.25 = 39px (大标题)同时向下延伸：
16px ÷ 1.25 ≈ 13px (辅助文字)
13px ÷ 1.25 ≈ 10.5px → 改为12px (标签)Step 4：结合行高（Line Height）行高 = 字号的 2-1.4倍行高 = 字号的 5-1.7倍（中文建议1.5-1.8倍）
- 行高过小导致拥挤,过大则浪费空间。
Step 5：设定颜色与字重配合
字号层级不能单独孤立使用,建议结合：
- 字重用Bold（600-700），正文用Regular（400），辅助用Light（300）
- 颜色用深色（如#1A1A1A），正文用中性色（#333），辅助用灰色（#888）
只有字号+字重+颜色的三合一,才能构成真正的视觉层级。
常见设计稿字号设定问答（FAQ）
❓ Q1：设计稿中正文到底用16px还是14px？
A：对于中文网站，强烈建议正文基础字号用16px，14px在中文环境下偏小，长时间阅读容易疲劳，如果你的受众偏年轻（如Z世代），16-18px更友好,14px适合做辅助文字或副文本。
❓ Q2：移动端设计稿字号与最终开发字号不一样，怎么同步？
A：设计师应在设计稿中标注 sp/pt单位，开发人员按照设计稿的数值直接使用，现代UI框架（如Figma的Auto Layout）支持以pt为单位的标注，注意：移动端设计稿中不要直接换算成px,因为不同设备分辨率下px不等于视觉尺寸。
❓ Q3：大标题（如Banner图）是否要有独立字号？
A：是的，在促销页、落地页、品牌首页中，大标题（Hero Title）通常需要 48px-72px 甚至更大，这类字号不纳入常规层级系统，属于“展示层级”，但建议这类大字也遵循你系统的倍数规律（如4倍、5倍基数字号）,保持品牌统一感。
❓ Q4：字号层级需要适配不同屏幕尺寸吗？
A：必须，响应式设计中，建议使用 clamp()函数（CSS）或 百分比/vw单位 实现字号弹性缩放。font-size: clamp(16px, 2vw, 24px);，在移动端，正文可适当缩小1-2px,但不要低于12px。
❓ Q5：有没有现成的字号层级工具推荐？
A：推荐几个主流工具：
- Type Scale（typescale.com）：在线生成字号层级比例
- Figma插件：Typographic Scale、Font Setter
- Material Design Type Scale：Google官方推荐体系，可直接复用
总结与最佳实践
好的字号层级设定，不是一次性的数学计算，而是优先级的设计决策,以下是几条最重要的最佳实践：
1️⃣ 出发，再定字号：先想清楚页面中哪些信息最重要,再决定用哪个字号层级去表达。
2️⃣ 保持层级间差异明显：相邻层级字号差值至少 4px（中文环境下建议6-8px）,否则视觉上无法区分。
3️⃣ 测试真实阅读场景：在设计稿中放入实际内容（中文长段落），在不同设备上预览效果,而不是只盯着单个标题看。
4️⃣ 统一管理，建立文档：将字号层级系统写入设计系统的“Typography”章节,方便团队协作和后期迭代。
5️⃣ 宁少勿多，保持克制：层级数量建议3-5层,多一个层级多一分混乱。
最后记住一句话：好的字号系统是隐形的，用户不会注意到它，但会感受到页面的清晰和舒适。
💡 如果你正在搭建自己的设计系统，不妨从本文的桌面对照表复制到你的Figma变量中,稍作调整即可落地使用。
标签： 字号层级
