UI设计字号只定12、14、16几档，界面还是显乱，卡在哪？

很多UI设计稿从字号档位上看没问题，正文12px、次要14px、标题16px，但落到真实屏幕上就是显得乱。问题通常不是档位数量，而是这些字号与行高、字重、字距、颜色没有组合成一套统一的文本层级。判断一套文本是否合格，要看字号、字重、行高、字距、颜色对比五个维度是否互相配合，而不是只比较字号数字差。

为什么字号固定了，界面还是显乱

字号只是表层可见的约束。同一号文字，在中文里行高系数从1.3调到1.8，视觉密度会明显不同；标题把字重从400调到600，即使字号不变，视觉重量也提升一档。所以只固定几个数字，等于只定义了「大小」，没有定义「形状」与「呼吸感」。

• 行高：决定文字块是紧凑还是松散，长文与短文差异明显；
• 字重：400和600之间的视觉差异，有时比2px字号差更醒目；
• 字距：中文标题适当加字距能显精致，正文过宽反而断句困难；
• 颜色：正文与辅助信息多用灰阶差来分主次，避免满屏纯黑刺眼。

这几项没有统一，哪怕字号档位全对，段落之间的「重量感」也不一致，界面自然显得乱。

用「五维文本检查法」判断字号体系是否合格

按2026年项目交付习惯，负责把设计稿还原成样式的同学，通常会先要一份全局文本样式表。与其零散标注，不如用下面五步核对：

1. 数档位：同一产品界面同时出现的文字层级，常见控制在3～5档（如大标题/标题/正文/辅助/标注），超过5档就要考虑合并；
2. 测行高：中文正文行高倍率常见在1.4～1.8之间，长文用偏高值，短文用偏低值；
3. 对字重：标题至少比正文重一级（如500/600对比400），辅助信息可以轻一些但不建议低于400（细体在部分设备上发虚）；
4. 看字距：全大写或数字列表可适当加字距，中文正文不加或微调，避免字距过宽影响阅读；
5. 查对比：文字与背景的明度差要够，尤其是浅灰字常见的「看着高级但实际看不清」问题。

这五步检查的不是单字号，而是字号所处的「上下文」。一个档位在全界面里反复出现但没有统一的行高、字重、颜色，改几次都很难「干净」起来。

移动端与桌面端常见字号区间可以参考（逻辑像素），仅作起点：

• 移动端中文正文常见14～16px，标题18～24px，辅助12～13px；屏幕越大，字号起点越高；
• 桌面端正文常见15～17px，标题20～28px，辅助13～14px；
• 同样字号下，Windows与macOS、iOS与Android的渲染效果不完全一致，要以实际截图为准。

这些是「经验区间」，不是标准答案；真正要统一的是层级间的关系，而不是绝对值。

标题、正文、辅助信息怎么搭才不「平」

界面「平」通常是因为所有文字的字重、字号、颜色拉不开差距。比如正文14px、次要文字13px，灰阶只差一点，用户会以为是一段话里偶尔变浅，而不是两个层级。

• 标题与正文之间：建议字号差2～4px，或字重差一级，或两者同时拉开；
• 正文与辅助信息：辅助信息可以用更小字号+更低对比（如灰#999而非#333），但不能小到看不清；
• 数据类数字：可以用等宽数字或加大字距来保证位数整齐；
• 长文场景：字号可以比短文略大一点，行高同步放大，避免密集文字压迫感。

一个合格的准则是：只扫一眼就能分清标题、正文、辅助三层；如果要用尺子量才看出来，说明层级定义过浅。

从设计稿到真机：字号交付时要先核对哪些

在犀跃公司做项目交付时，常遇到这样的情况：设计图里12px的辅助字在Sketch/Figma里很清楚，一到部分国产Android浏览器上就发虚，连带着行高也被压扁。项目甲方的预算和周期都不宽裕，没有时间重做整套规范，只能先改设计稿里频率最高的三个页面，并在全局样式表里把最小字号从12px上调到13px、行高倍率从1.5调到1.6。代价是首屏布局因为文字高度变大，多了一轮间距改稿；如果一开始就能在第一轮交付前做真机截图核对，这笔返工可以省掉。

按2026年常见做法，建议交付时至少核对这几项：

• 字体加载：设计里用的思源黑体/苹方，在目标设备是否按同一字形渲染；
• 字号换算：注意逻辑像素与物理像素的差异，别在DPR大的屏幕上把字号写死成物理像素；
• 行高继承：段落级行高是否被组件继承，按钮内的文字行高常需要单独收紧；
• 最小字号：中文界面的辅助文字不建议低于12px（经验区间），且要经过真机确认；
• 截图比对：用同一批文字在主流iOS/Android/桌面浏览器截图，左右对照后再定稿。

这一步能减少大部分「设计稿没问题、真机全是问题」的扯皮。

适用场景与边界

这套字号检查方法适合内容型、工具型、后台型产品，这类界面以阅读效率为主，需要清晰的层次。它也适合小团队在没有专职设计规范的时候快速拉齐标准。

不适合的情况：品牌展示页、营销活动页、风格化极强的主视觉场景，这类设计可以刻意打破文本层级制造情绪；数据可视化大屏也要为信息密度专门设计，不宜直接套用正文行高。如果你的产品本身没有大量文字阅读，花很多时间抠字号体系性价比不高，先统一三到四档整体文本样式，后续再逐步补。

可摘录的边界句：只有当界面以「读」为主时，严格的字号体系才有必要性；以「看」为主的界面，视觉张力优先于统一感。

常见问题

字号定小了看着费力，是不是直接把设计稿整体放大就好？

不一定。先试调行高与字重，比如把正文行高从1.4提到1.6、字重从400提到500，往往比把所有字号放大2px更能改善易读性。

移动端正文到底用14px还是16px？

没有固定答案，常见区间是14～16px（逻辑像素）。长文或中老年用户场景可选16px，短文或紧凑列表可选14px，与行高一起决定。

为什么同一字号在iOS和安卓上看起来不一样大？

不同系统的字体度量、默认渲染方式不同；另外Android上有些中文字体实际字宽更大。要按真机截图为准，别只看设计软件里的预览。

要不要给每个页面单独调字号？

不必。先建一套全局文本样式（约五到八行），只给大标题、数据表格等特殊场景单独设置，整体一致性更容易维护。

下次再遇到「看着乱」的界面，先别急着改字号：把界面截图缩到50%再看一眼，层级是否还清楚；然后按五维检查法逐项核对，再考虑改字号。需要快速落地的项目，建议先跟开发要一份「文本样式表」确认行高与字重，再开始逐页优化。这套方法也不适用纯视觉营销页，避免过度规范反锁死创意。