UI设计选字体，先判断字能否辨认、信息层级是否清楚、换设备后能否正常显示，再考虑品牌风格。中文功能界面通常可以从清晰的黑体类字体开始，标题、正文和说明建立少量稳定样式；阅读页面、品牌标题则可以有不同选择。
字体名称只是起点。同一款字体，字号、字重、行高和容器宽度改变后，阅读感也会变化。把真实中文、英文、数字和错误提示放到页面里，往往比收藏更多字体更能解决排版问题。
字体确定后，还应把它放回整个界面观察；可结合UI质感的色彩、留白与排版技巧调整文字与其他元素的比例。
UI设计中常见字体类型
在UI设计中，字体既承担信息阅读，也表达产品气质。衬线与无衬线是理解字体形态的入口，但不能直接推导“无衬线一定更清晰”或“衬线一定适合长阅读”。还要看字符本身、字号、字重和显示环境。
无衬线字体：功能界面的常用选择
无衬线字体的笔画末端通常没有衬线装饰，常用于导航、表单、按钮、仪表盘和SaaS界面。Helvetica、Arial、Roboto主要用于拉丁文字；PingFang（苹方）、HarmonyOS Sans等可以作为中文界面的候选。使用前要确认字符覆盖、所需字重与授权方式。
中文和英文经常由不同字体实际渲染。只写“使用Inter”，不能解释中文将由哪种字体显示；只规定“使用苹方”，也不能保证所有Windows设备都能取得相同字体。
衬线字体：阅读与品牌表达
Times New Roman、Georgia、思源宋体等常被用于阅读内容或品牌表达。中文宋体的横竖笔画差异能形成不同的文字质感，但在小字号、浅色背景对比不足或细字重下，也可能不易辨认。不要把某一种字体名称直接等同于“护眼”或“专业”。
页面里可以让展示标题使用有风格的字体，功能标签继续使用易读的字体。两套字体是否协调，要一起比较字面高度、字重和标点，而不只看标题截图。
数据密集的界面还应观察0与O、1与l、金额的小数点和负号。金融数字、库存数量或验证码里，相近字形辨认困难会比字体不够时髦更影响使用。
字号怎样区分标题、正文和说明
先给文字命名用途，再设置样式。标题并不是“越大越醒目越好”：如果在手机上换成四行，反而会挤走用户要看的内容。视觉字号与HTML的H1、H2语义也不是一回事。
| 文字角色 | 中文Web界面的试排起点 | 搭配方式 |
|---|---|---|
| 页面主标题 | 20–28 CSS px | 用字重与上方留白突出，不靠字号无限放大 |
| 分组标题 | 16–20 CSS px | 与下一段内容靠近，与前一组拉开 |
| 功能正文 | 14–16 CSS px | 保持稳定对比度和可用行高 |
| 连续阅读正文 | 16–18 CSS px | 同时限制行长，避免超宽段落 |
| 辅助说明 | 12–14 CSS px起试排 | 价格条件、错误原因等关键信息不应弱化到难以辨认 |
这些数值用于Web试排，原生iOS和Android应分别按平台逻辑单位处理。先建立三至五种明确角色，确实需要时再增加样式，不必让每个区域都有独立字号。
字重、字距、行高的使用技巧
字重：正文可从Regular开始，标题再尝试Medium或Bold。实际可用字重取决于字体文件；不能在设计稿选了600，就认定上线时一定加载了对应字重。整段加粗会削弱局部重点，过细字重配浅灰色也可能让文字难以辨认。
行高：中文多行正文可从字号的1.5–1.8倍尝试。例如16px文字分别配24px、26px、28px行高，放入同一段真实文字比较。短标签和按钮单独处理，不要把文章正文行高套到所有组件。
字距：中文正文优先使用默认字距。英文展示标题的字距可以有设计感，但长中文段落、邮箱与按钮标签不应因此被整体拉散。标点和括号的视觉空间也需要一起看。
行长：如果一行内容很长，增大行高未必能解决回到下一行困难的问题。应同时约束正文容器宽度；手机空间有限时，则让文字自然换行，不把字号持续缩小。
对齐与留白怎样影响阅读
中文界面的长段落通常采用左对齐，扫描时更容易找到每行起点。页面主标题或短促的宣传语可以居中，金额列可以按右侧或小数点对齐。重点是同一种内容采用同一种规则，而不是全页只能用一种对齐。
可打开图中页面对应的原型素材，先观察标题与正文、卡片与卡片之间的距离。相关内容距离更近，不同组之间更远，用户才能看出哪些说明属于哪个操作。
中英文混排时，要注意单位、英文大写、小数与中文标点是否“跳高”或“下沉”。表格里的金额如果需要逐行比较，可在字体支持时使用等宽数字特性，而不是为了排齐金额把整页都换成代码字体。
颜色也不能代替层级。按WCAG文字对比度说明，一般文字的AA门槛为4.5:1，大号文字为3:1，并有标志等例外。辅助文字、占位提示仍应按适用要求检查；不要让“次要”变成“看不见”。
UI设计新手常见字体使用误区
- 用一个字号解决整页：不同信息没有主次。先明确文字角色，再用字号、字重与间距共同区分。
- 长标题一律缩小：为了维持单行，把内容缩到难读。先调整宽度、允许换行，只有明确规则的短标签才考虑截断。
- 把“14px以上”当作易读保证：字号只是一个因素，字体字面、对比度、设备与用户设置同样重要。
- 用装饰字体承担所有功能文字：品牌气质压过识别效率。把装饰性字形留给适合的展示位置。
- 认为所有人电脑都装了同一种字体：上线后替换字体造成换行、按钮宽度和对齐变化。交付时应写明回退方案。
拿真实文案试排，比只看字体名称有效
复制下面这组文字到设计文件，用同一组内容比较候选字体。它覆盖长标题、中文标点、数字、英文和两行提示。
账户与隐私设置
修改信息后，请点击“保存并继续”。
联系邮箱：design.team@example.com
订单 A108 · ¥1,280.00 · 剩余 50%
易混字符：0 O 1 l I · −128.00
请输入有效的邮箱地址，用于接收通知与找回账户。
先看0/O、1/l是否易区分，再看金额与中文单位是否协调；把文本容器变窄，观察长邮箱、引号和提示文案是否溢出。最后放大文字，确认下一组字段能够下移，而不是被固定高度压住。
W3C文字间距说明要求关注用户调整行距、字距等之后是否丢失内容，不代表每个界面默认都应采用同一套间距数字。容器重排可结合响应式UI设计教程继续处理。
字体回退与交付，怎样避免上线后变样
设计稿里看到的字体不一定等于浏览器最后使用的字体。团队要确认字体从哪里加载、是否覆盖中文、是否拥有所需字重、加载失败时使用什么替代。品牌字体还需要核对网页嵌入、App打包等具体授权范围。
Web项目可以按font-family的回退顺序，与开发讨论下面这样的系统字体列表，再按目标设备确认实际效果：
font-family: system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;这会优先使用各系统可用的界面字体，因此不同设备不保证字形完全相同。若品牌要求更强的一致性，应选择有相应授权和语言覆盖的字体资源，并检查加载速度、缺字回退及加载前后的换行。
交付时将“页面标题、正文、说明”等样式名称与字体、字重、字号、行高一起记录。需要允许系统文字放大的界面，别把组件高度固定到仅容纳默认字体。
实用工具与资源推荐
文字样式管理：墨刀设计可用于整理文字样式与组件；墨刀原型用于展示页面和交互。Figma也可用于管理文字样式，选择时优先考虑团队已有文件与协作习惯。字体能在工具中使用，不等于自动获得商用授权。
- Google Fonts：筛选字体、语言与字重，下载时同时保留具体许可文件。
- Fontpair：观察标题和正文搭配，中文项目应另外试排中文回退字体。
- Typewolf：查看实际网页中的字体应用，区分灵感参考与可直接使用的字体资源。
- Modular Scale：探索字号比例，再根据真实UI内容减少不必要的层级。
