文字有着源远流长的发展历史，是我们生活中必不可少的一部分，也是搭建UI界面排版的基本模块，一个页面的设计会使用多种字体，而且会将我们需要传达的语义通过不同的字体类型展示出来，给予使用者不同的交互体验。因此，可以说字体让文字有了视觉形态。

UI设计需要十分严谨，既要符合当前行业的设计创意，又要进行合理的交互设计。同时，对字体不需要过渡修饰，且图文作为主要的传播途径，字体的使用是否规范合理将直接影响着信息传播的优先级、重要程度以及用户的接收质量和效率。所以字体是UI界面中不可忽视的核心元素，对用户的视觉体验有着至关重要的作用。

本文将围绕着UI设计中字型、字号、字距、字重等几个属性，针对各方面深度解析。

一、 字体的基本特征

1.1 使用前的思考

UI设计中文字将我们想要传达的信息直接清晰地表达出来。优秀的字体运用、配合版式搭配会让整体页面看起来更加舒适和谐，设计感更加有协调性，而不适当的字体会降低整体页面的整洁和统一性。

1.2 为什么要使用黑体

不同类型的字体传达出不同的气质。综合来讲，字体可分为黑体、宋体、圆体、书法体这四类。在UI设计中，绝大多数的文字排版用的是黑体，诸如思源黑体、阿里巴巴普惠体、苹方（IOS）、微软雅黑（PC web）等都是标准的黑体。另外，特定场景卡片、banner、专题头图、引导页等，对使用字体类型不会有太大的限制，在避免商用侵权的前提下，符合产品气质即可。

黑体是无衬线字体，结构清晰，给人简单干净的感觉，没有额外的装饰，笔画横平竖直、粗细均匀。大多数移动端都使用黑体作为默认字体，它的可塑性强，可以使界面显得庄重有现代感。

二、不同系统的字体使用

由于系统的差异性，不同的设备存在屏幕，兼容等适配性的差异。因此，针对不同系统相关UI设计，字体也有不一样的使用规范。

2.1 iOS 文字规范

2.1.1 可用字体

在 iOS 中中文和英文都有各自的官方字体，中文字体使用“苹方”，苹方中也有携带英文字符，当需要中英文混排时就不需要特意设置英文字体。

英文以黑体SF Pro和衬线New York为主。其中 SF Pro Text 和 SF Pro Display 用于苹果手机和 ipad 客户端UI设计中。而这两个字体的区别，在于当我们使用的字号小于 20px 时，使用前者；大于或等于 20px时，则使用后者。

2.1.2 字体设置

导航栏标题： 32-36PX

标题文字： 30-32px

内容区域文字：24-28px

辅助性文字： 20-24px

这是做UI设计时一个常见的字体大小规范，可以在内部沿用，同时也需要根据实际情况来制定规范。

2.2 Android 文字规范

2.2.1 可用字体

根据Google 为 Material Design 系统指定的字体可以了解到，Android 系统中文可用思源黑体，英文用Roboto。

2.2.2 文字设置

UI设计中常用字号排版，每行英文建议60字符左右。短文本，建议每行英文30字符左右。

2.2 PC端、web端字体规范

UI设计中一个页面的字体种类使用超过三款，会显得界面不严谨，除非有banner或者推广位。通常会将微软雅黑作为PC端、web端备用字体。针对UI设计PC端和web端界面中文字优先选择使用思源黑体简体、苹方简体，其次使用冬青黑体简体。英文优先使用Helvetica、helvetica neue，其次使用arial。

三、字体的基本属性

3.1 字体大小

字体大小可以突显出信息的层次和权重，不合理的字体大小规范，会产生不好用户的体验且影响使用。因此在建立UI字体大小规范时，需注意最小值和递增值。

最小值决定页面的可读性，在设计过程中，可以通过设备实时预览，因为同样的字号在不同的环境、色值、背景下，其视觉效果都有所区别。

递增值决定信息层级区分的明显程度，遵循字号越大、递增值越大的原则，常用字号数量控制在6种左右。iOS和Android都是采用的2倍数栅格系统，为了让字体大小的层级区分更明显，字体大小要避开奇数且最小递增值不要低于4px。

3.2 字体间距、行高

字符间距：指两个字符之间的横向间隔距离。在界面排版中，除了英文的字间距调整需求较大外，中文通常保持默认，根据UI界面的实际情况进行调整，没有固定的规律，给用户视觉上的舒适易读即可。

行高：行与行之间文本垂直方向的高度，这个高度和字体本身高无关，文字内容默认处于这个高度的水平居中位置。

在UI设计中，英文字体因高度的参差不齐，本身就能制造出视觉上的上下空间，通常行高为字体大小的1.2倍，而中文字体没有上下间隙的延伸，行高则较大，一般在1.5倍左右。一般默认行高比字号本身更大，如果行高和文字同高或更小，那么在多行文本状态下就无法正常显示。

3.3 字重

字重简单理解就是UI设计中文字的的粗细，不同的字段类型对字重的要求不同，在UI设计中标题往往需要比较粗的笔画，注释文字需要比较细的笔画等等。

像苹方、思源、阿里巴巴普惠字体一般都会有极细体、细体、常规体、黑体、粗体等多个字重，在UI设计中，实用的就常规体、加粗两个字重，再通过色彩、字号使其成为对立关系，明显的拉开文字内容层级。

3.4 字体颜色

在UI设计色彩规范中，通常使用#333用于标题字体、#666用于正文内容字体、#999提示字体、#ccc占位符，这也是UI通用的文字色用色规范，不同的字号需用色规律。除此之外，也会给出三到四个辅助颜色，保持字体颜色统一，可以有效的辨别信息重要性。

UI设计中标题的主要作用是让用户以最快的速度了解界面主要信息，需要时刻吸引用户的注意力，移动端中的导航栏、状态栏、标签栏等，字体一般会控制在30px以上并加粗显示，使用颜色#333。这是最简单直接地表现出视觉冲击力。

在特殊情况下，标题也可以使用主体色值，但要注意颜色保持统一，不能太多与花哨影响信息的传递。

3.5 正文

UI设计中正文主要是提供标题的注释、设备简介以及设备详细说明。

当背景色为浅色时，便于用户仔细阅读，一定要注意颜色不能太深，不然显的主次不分，正文内容字体颜色使用#666。当背景色为深色时，正文内容字体颜色使用# FFF。

3.6 提示语

提示类文字使用场景就相对较多，告诉用户界面或设备的当前状态，给出正确合理的引导。通常使用#999、#ccc，特殊情况会根据界面的整体来设计字体的颜色。

文字链接在字号、色值上没有一定的限制，但需要一个特定的辅助元素/属性来提示用户这是可点击的。

移动端登录页面，找回密码、注册、获取验证码等，大部分都是用主体色、图标等方式强化可操作入口，而PC端和web端中文字链接的表现方式有下划线、蓝色字体、列表中的操作文字链接。

3.7 文本区域

UI设计中包含一个矩形的视图。文本区域设置和软件中的设置是非常一致的，文本区域分水平适应、定宽模式、固定尺寸三种。

3.8 对齐模式

UI设计中对齐模式是文字内容在文本区域中的对齐方向，最常规的左中右对齐，如果一个文本区域大于文字的高度，那么文字就会水平方向居中。在列表、详情页面或者说明页面中表现明显。

四、字体对比

根据上文描述，将字体的基本属性大小、粗细、结构、形状、方向和颜色相结合，形成字体对比，不仅是为了美观，还可以加强信息的表达。

字体对比设计不是让其产生冲突，要确保UI界面的可读性和易读性。UI设计不应该要求用户去寻找页面的重点信息，内容构成，信息流程等，而是用户在第一次使用UI产品时界面可以明确的传达出信息，一目了然。

总结

字体是日常生活中重要的记录符号，也在UI设计中承担着重要的视觉传播作用。不仅仅是信息的载体，也是情感表达的媒介。与世界万物都有着千丝万缕的联系。以上是我对针对不同系统，在UI设计过程中对字体进行排版和设置内容的浅薄见解。

参考文章：“https://www.zcool.com.cn/article/ZMTQ5MDIzMg==.html#kuak”