在兰亭妙微多年 UI 设计项目中，文字排版是设计师与前端对接时高频出问题的环节：视觉稿精致清晰，开发还原后却错位、拥挤、层级混乱，反复像素级微调浪费大量时间。
文字不只是信息载体，更是界面秩序的骨架。本文以兰亭妙微实战标准，完整讲解 UI 文字从属性设置、软件操作、层级规划到交付规范的全流程，帮你彻底解决设计与开发不一致的痛点。
一、先搞懂：决定还原度的 4 个 CSS 核心属性
前端最终实现，完全依赖这 4 个基础参数，设计时必须精准对应：
- Font-family 字体家族
优先选用系统无衬线字体：iOS 用苹方 - 简，Android/Windows 用思源黑体、微软雅黑，保证跨端渲染一致；特殊品牌字体需提供字体包并做好分层。
- Font-weight 字重
中文≠西文：西文可轻细，中文必须保证识别度。
兰亭规范：
- 标题：Medium (500) / Bold (700)
- 正文：Regular (400)
- 辅助说明：Light (300)
- Font-size 字号
同字号下，英文 / 数字视觉更小，混排时需手动放大 1–2px；移动端常用20px–36px，以4 的倍数递增，适配栅格与开发适配。
- Line-height 行高
还原偏差头号元凶。设计软件与开发工具默认行高不同，必须手动指定，严禁用自动行高。
二、设计软件文字设置：兰亭标准操作
以主流设计工具为例，严格按以下流程设置，避免标注错误。
1. 字体与分层原则
- 字体文件提前安装到系统，自定义字体导出OTF 格式（跨平台兼容最优）。
- 多字体必须分层：不同字体单独图层，否则导出标注错乱，前端无法识别。
2. 字间距（字距）
- 正文、说明文字默认0；
- 超大标题、品牌标语可适度微调，增强气势。
3. 行高：必须≥字号，公式化设置
兰亭妙微通用公式：
行高 = 字号 + 行间距
行间距建议：
字号的 50%–100%，阅读最舒适。
示例：正文 28px → 行高 56px；标题 32px → 行高 64px。
- 行间距 = 行高 − 字号
- 段间距必须大于行间距，遵循亲密性原则。
4. 段落与对齐
- 不用空格 / 换行分段，统一用段落值控制；
- 正文常用左对齐，标题居中对齐，保持界面整洁。
三、实战流程：从原型到视觉的文字权重规划
兰亭妙微设计师标准工作流：
- 打散原型权重
不直接照搬原型文字样式，按业务目标重新梳理信息优先级。
- 建立基础层级
先用字重、字号、颜色拉开对比，在无图无色状态下验证层级清晰性。
- 强化视觉对比
加入颜色、间距、背景，突出核心信息，弱化次要内容。
- 统一文字规范
定稿前输出文字规范文档，锁定所有层级参数，全局复用。
四、核心痛点解决：为什么设计稿总对不上？
1. 根源：默认行高不一致
- Sketch/Figma 28px 文字自动行高≈40px
- iOS/Xcode 28px 文字默认行高≈34px
参数不同 → 界面必然偏差。
解决方案：所有文字手动指定行高，同步给前端。
2. 单行 / 多行文字行高统一
- 以多行阅读为基准设置行高；
- 同层级文字（如列表、标题）共用同一行高，提升代码复用率，减少还原误差。
3. 带行高文字与组件对齐
行高会产生上下留白，直接按数值对齐会视觉偏移。
设计时要计算
半行距：
- 标题 32px / 行高 48px → 半行距 8px
- 辅助文 24px / 行高 36px → 半行距 6px
用半行距做间距补偿，实现数值精准 + 视觉舒适。
五、兰亭妙微・可直接复用的文字规范
我们沉淀了移动端 @2x 通用标准，适配绝大多数 APP / 小程序 / H5：
| 文字层级 |
字号 |
行高 |
字重 |
使用场景 |
| 特大标题 |
36px |
72px |
Bold |
头部主标题、弹窗标题 |
| 大标题 |
32px |
64px |
Medium/Bold |
页面标题、模块标题 |
| 小标题 |
28px |
56px |
Medium |
卡片标题、列表标题 |
| 正文 |
28px/32px |
56px/64px |
Regular |
页面主体内容 |
| 辅助说明 |
24px |
48px |
Regular/Light |
提示、备注、时间 |
| 标注文字 |
20px |
40px |
Light |
版权、小提示、底部说明 |
文字颜色规范（兰亭通用色值）
- #333333：主文本（最高权重）
- #666666：二级文本（中等权重）
- #999999：辅助文本（低权重）
- #007FFF：品牌主色
- #FF004B：警告 / 错误
- #00CC8E：成功 / 完成
六、特殊场景适配：不照搬规范
紧凑列表、商品卡片、标签栏等空间有限场景，可适度收紧行高（如 24px 字号→行高 36px），随组件统一规则，不破坏整体一致性。
七、交付前端：确保 100% 还原的 3 个动作
- 输出完整文字规范文档：列明字体、字号、行高、字重、颜色、使用场景。
- 标注必须带行高：不省略任何文字行高参数。
- 建立组件样式：在设计工具中创建文字样式，一键复用，避免手动修改出错。
结语
文字是 UI 界面的基础语言，规范的文字系统，既能提升用户阅读体验，又能大幅降低协作成本，让设计完美落地。
兰亭妙微始终坚持像素级严谨 + 体系化规范，把每一处文字细节做到位，用专业交付保障产品体验与品牌质感。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。