UI 设计中如何正确设置文字

版权申明：本文出自“小熊_Rain”原创，感谢“小熊_Rain”的原创文章分享！

大家在 UI 设计实际项目中，遇到最多问题可能就是文字排版。开发实现的页面总是与视觉稿有偏差，开发却说"都是按照视觉标注文件的参数来做的"，而你却不知道解决方法，只能坐在开发旁边和他一个像素一个像素的调整…

在大部分情况下UI设计也有点像平面设计中的排版，排版是平面设计中的重要手段之一，其本质就是画面中各个元素之间的关系。所以文字与其他元素之间对比、间距等就尤为重要。掌握好文字的使用，设计好页面的视觉只是第一步，但最最重要的是如何把你的设计准确无误的传达给开发，最后实现落地。

所以今天就聊一聊UI设计中如何正确的设置文字，才能提高前端开发的视觉还原度。

字体 CSS 基本属性

首先认识字体的 CSS 基本属性，Font-Family（字体家族名称）、Font-Weight（字体字重）、Font-Size（字体大小）、Line-Height（字体行高）等。前几期我专门介绍了 Font 的几个基本属性，如果大家感兴趣可以去看看。

Font-Family 字体家族名称：选对字体对一个页面的视觉呈现非常重要，依据整体的风格和品牌调性，选用最合适的字体。

FEVTE编注：更多UI设计教程，和UI设计理论知识请访问飞特网UI设计教程栏目：https://www.fevte.com/plan/UIdesign/

Font-Weight 字重：在西文排版里由于每单个字母所占空间比例差不多，每个单词的长度也不一样，可能字号越大，字重越小，即使大标题使用细号字重也不会影响阅读体验，但中文则不行。

Font-Size 字体大小：在同等字体大小的情况下，英文字母在视觉上会比中文字体小，所以根据汉字的特定合理调整字体大小。如在一个主标题里有英文或数字的情况下，要手动把其调大一点。

Line-Height 字体行高：重点来了…

在设计的时候，同样字体大小的情况下，不同的字体行高会有什么影响呢？如下图所示：左边的行高与字体大小一样，而右边的行高大于字体大小。

行高的不同会导致与其他元素的距离也会不同，所以行高对页面字体排版至关重要。

Sketch 文字属性设置面板

字体选择，首先把需要的字体文件安装到你的电脑系统里。自己设计的字体可以在 Glyphs 字体编码软件可以导出常用的 TTF、OTF 等格式文件。

简单介绍一下 OTF 格式文件的优点：增强的跨平台功能，更好的支持 Unicode 标准定义的国际字符集，支持高级印刷控制能力，生成的文件尺寸更小，支持在字符集中加入数字签名，保证文件的集成功能。主要的是 OTF—opentype 苹果机与 PC 机都能很好应用的兼容字体；TTF—truetype PC 机应用较好，苹果机兼容性很差！

设计师要注意的是，如果一段文字中需要多种字体时，设计师要把不同的字体各自分层，不然在导出标注文件时容易出错。因为不同的字体在设计的时候规格都不一样。

字间距，由于田字格中文字的特点，大部分情况下间距都默认为0，只有特殊情况或者特大标题字体时，可能根据需求手动调整字间距。

行高，之前说的行高就是通过这个参数来调整的，参数要≥字体大小，如下图所示：

段落，字有行间距，段落也有段间距，根据亲密性原则，段间距一定要大于行间距。