设计师必看的字体与排版指南（上）字体基础知识

时间：2023-10-05 04:42:02 | 来源：网站运营

时间：2023-10-05 04:42:02 来源：网站运营

设计师必看的字体与排版指南（上）字体基础知识：文字是界面中最核心的元素，是产品传达给用户的主要内容，它的承载体即是字体。全文12,736字，由于篇幅太长，这里分为上下两篇。

从字体的最基本属性（字族、字号、字重、大小写等）说起，熟悉字体的那些特征，了解字体在界面中的作用，以及ios与android系统字体的使用规范。




字体是界面设计的基石

字体是排版中最重要的元素，对用户的阅读体验有着至关重要的作用。一般来说，设计师需要了解的字体通常有中文字体和西文字体两种。西文字体由来已久，从最早的罗马字体到现在苹果手机中的SF-UI字体，经历了许多设计上的变革。而中文字体的发展并没有西文字体那么顺利，数量上也远远落后于其他字体。但中国设计正在崛起，我们也看到越来越多的设计团队和设计师加入字体设计的队伍，数量上正在呈指数级别增加。

设计是一门非常严谨的学科，里面蕴含了很多道理，就连最基础的字体选择和排版，都经过了将近千年的发展和演变，有非常多的专业知识。像平面设计一样，在UI设计中字体的使用也有相应的规范，设计师应懂得这些基础知识，才能将字体为自己所用。

本篇就从我们常用的设计软件（sketch、Figma、P hotoshop）字符面板开始，来聊聊有关字体的小知识。










Font 中文翻译为“字型”，是指字的粗细、宽度和样式，是一套具有同样风格和尺寸的字形。例如“Regular_16pt_SF-UI”。

Typeface 中文翻译为“字体”，是指一整套的字形，一个或多个字型的多尺寸的集合，例如“SF-UI”里有不同粗细（Regular、Blod、Light）和不同宽度（12pt、14pt、20pt）。

Glyph 中文翻译为“字形”，是指单个字的形体或是字体的骨骼。 同一字可以有不同的字形，而不影响其表达的意思，例如汉字中的「令」字，第三笔可以是一点或一撇， 最末两笔可以作「ㄗ」或「マ」。

Font和Typeface常常被混淆使用，其实可以这样理解，前者指一种设计，后者指具体的产品。




1.1 族类 GenericFamily

族类就是不同字体类型，例如阿里巴巴普惠体、方正新书宋、站酷酷黑体等。

而这些众多字体又可分为「衬线体」和「无衬线体」。

1.1.1 衬线体

宋体就是衬线体，特点就是笔画开始和末端的地方都有额外的装饰，且笔画的粗细有所不同。在传统的正文印刷中，普遍认为衬线字体能带来更加的可读性。常见的衬线体有宋体、Times New Roman、Georgia等。

衬线体一般在APP中比较少见，文字阅读类偏爱这种衬线体，例如「单读」，大标题用的是「華康標宋體」、正文内容用的是「苹方-纤细」而英文用的是「XCross Traditional Bold」




1.1.2 黑体

黑体是无衬线字体，特点是笔画没有额外的装饰，且笔画的粗细差不多。相比严肃的衬线体，简单干净的无衬线体给人一种休闲轻松的感觉。因此大多数App都是使用黑体作为默认字体。如冬青黑体、思源黑体、Myriad等。







1.2 字族 FontFamily

一个族类包含不同的字体，然而一个字体又可能有好几种字族。如果电脑安装了Helvetica，在Sketch字体选择器中会发现超过40多个前缀是Helvetica的字族。这是为了协助人们在不同的使用场景下表达合适的意思。







基本字族包括细体、标准、粗体、斜体，值得注意的是，斜体字常用在引用文本上，代表“本段文字引用的是另一个著作”的含义。

例如：“若我们能以满怀新鲜的眼神去观照日常，“设计”的意义定会超越技术的层面，为我们的生活观和人生观注入力量。”（引自原研哉的《设计中的设计》）




1.3 X-height（X字高）

在西文字体中，x高度是指字母的基本高度，就是基线和主线之间的距离。它指一个字体中小写字母的x高度，在现代字体设计领域，x高度代表了一个字体的设计因素，因此在一些场合字母x本身并不完全等于x字高。

除了字母a、c、e、m、n、o等高度一样，还有一些小写字母的字高都比x字高要大，并分为两类：一是含有升部的字母，字母笔画含有向上部分，如字母b、d、h；另一类是含有降部的字母，字母的笔画向下超过了基线，如字母g、p、q。




1.4 字号 Font-size

字号就是字体大小，通常在网页端使用px作为字号的单位。移动端兴起后，ios字体单位是pt，Android是sp。

以ios为例，正文字号不应小于11pt，这样才能被正常阅读，建议在14-18pt之间。在使用较大的字体来获得更好的易读性的同时，我们也应相应地减小字体的字重，考虑Light、Thin，因为过重的字体会太过醒目，影响其他内容的显示效果。




当字体大小为12-18pt时，建议使用Regular，18-24pt时，使用Light，24-32pt,使用Thin，当字体大小超过32pt时，建议使用Ultralight。

字号大小决定了信息的层级和主次关系，合理有序的字号设置能让界面信息清晰易读、层次分明；相反，糟糕无序的字号使用会让界面混乱不堪，影响阅读体验。







1.4.1 设计中的最小字号

我们都知道在界面设计中最小字号不能低于20px，那是因为，正常情况下，在手机距离眼睛30cm左右，使用视角计算公式，我们能识别到的最低的文字大小为h= 2*30·tan(0.3/2) ≈ 0.157cm ，拿我们经常使用iPhone7的尺寸1334×750为例。iPhone7的dpi为324，也就是一英寸上显示324个像素，1英寸为2.54cm，那么0.157cm=324*(0.157/2.54cm)= 20px。




1.4.2 字号的基数关系

我们在做设计时，字号的单位最好使用一个基数作为倍增，如2、4、6、8、10 或者3、6、9、12。但其实我们在做移动端设计时，单位需要遵循偶数原则，因为开发中的单位是以一倍图的基数来进行计算。那么其实在制定字体规范中，使用2为单位会导致字号过多，且2号字体的差异化不大。所以在字号方面我们使用4作为单位是比较合适的：一是适配后在@2x跟@3x不会出现半像素，二是使用4为单位，能满足字体大小的均衡。




1.5 字重 FontWeight

Weight，中文翻译为“字重”，是指字体笔画的粗细，字体中很重要一个概念，不同字重传递出来视觉感受完全不一样。一般在字体家族名后面注名Thin、Light、Regular、Blod、Black、Heavy等。不同的字体厂商划分字重各有不同，例如「苹方」字体就有6种不同的字重。







一般都有细体、正常、粗体三种基本字族。在应用场景上，通常「细体」多用于超大号字体；「正常」用于正文内容；「粗体」表示强调，多用于标题；




1.5.1 两种字重属性

轻字重：传递出轻盈放松的视觉感受，常配合粗的字重使用，在一些辅助信息，说明文案时候使用；

重字重：视觉感受庄重，很重要，常用在重点强调的文字，页面大标题，数字，引导行动操作点上等；

例如百度网盘「发现」页就用了Regular、Medium、Semibold三种字重以拉开信息层次对比；




需要注意的是：在进行界面设计时，不要用软件自带的文本加粗，它不仅破坏了字体本身的美感，还改变了文字原本的字宽，小字体下会模糊不清，合理的方式是使用字体本身的字重来控制粗细。







1.5.2 注意超细体的字体

字重超细的字体要谨慎使用。如果你设计的文本是装饰性倒还好，如果是需要用户能清晰阅读的，就要特别慎重，能不用就不用，否则在部分低分辨率的手机屏幕上看起来会非常糟糕。




1.6 字色 FontColor

字色即文字对应的颜色，不做过多解释。需要大家注意的是 远离纯黑色和纯灰色！

纯黑色就像没有生命力的深渊，能吞噬所有细节，使用户陷入冷冰冰的极端情绪中。纯黑色还会与白色产生强烈的对比度，看久了就会感觉疲劳，让用户产生焦虑情绪。




还有就是真实世界中是不存在纯黑色的。尝试在色彩中加入一些色相，这样就不会让页面看上去死气沉沉的。例如ios系统「设置」页面背景色就是加入了白色的低饱和度蓝色，看上去柔和自然。




1.7 字符样式 FontStyle

除了以上几个最常用的文字属性外，还有几个使用频率比较低的字体设置。例如带下划线的、删除线的文本。「下划线文本」一般出现在「文字按钮」或带链接的网址，而「删除线文本」一般会出现在商品橱窗的现价、原价

例如「CCtalk」的课程现价和原价的区分，原价用删除文本，「微信读书」文章底部“加入书架 随时阅读”就是带链接的下划线文本。




1.8 字符选项 Text options

Ps和Sketch都有文字（字符）选项一栏，主要针对西文字母大小写格式变换的设置。最常见有默认大小写、全部大写、全部小写和小型大写字母，Ps里面还有「上标」和「下标」。




默认大小写：即正常大小写格式，软件不做干预；

全部大写：如果输入的是小写字母，选择这个选项，软件会强制把小写改为大写；

全部小写：如果输入的是大写字母，或者只是首字母大写，选择这个选项，软件会强制把所大写改为小写；

小型大写字母：这个选项比较特殊，所谓“小型大写”就是，在字号一样的情况下，与小写字母一样高，外形与大写字母保持一致。




1.8.1 注意英文大写

纯大写的字母文本本身不太适合大篇幅阅读，会加大阅读障碍，用的时候注意要额外拉开字母之间的字间距，提升可读性。







1.9 全角与半角 Full-width and half-width

全角是指一个字符占用两个标准字符的位置。中文字符、全角的英文字符、国标GB2312-1980中的图形符号、特殊符号都是全角字符。半角是指一个字符占用一个标准字符的位置。

通常情况下，英文字母、数字、符号等都是半角字符。半角和全角主要是针对标点符号来说的，因为正常情况下没有打全角英文的需求。










在设计作品时也一定要记得中文搭配全角符号，英文使用半角符号。否则会出现诸如“你好.”或者“t h a n k s。”这样的错误。可按键盘“capslock”键切换全角和半角。这个小知识点虽然非常基础，却也是设计中经常出错的地方。










众所周知，iOS和Android两大阵营都有各自的设计系统，要作出符合平台规范的设计，设计师应熟读各平台的设计规则。因为本篇以讲字体为主，我们就来看看iOS和Android各自字体的规范是什么样的。







2.1 ios字体规范

可用字体

在iOS系统规范中，中文字体是「苹方」字体。英文字体是「San Francisco」也简称「SF-UI」，英文还有另外一个衬线体「NewYork」。除了在iOS和Mac OS上，还单独为Watch OS单独对字体进行了调整，命名为 San Francisco Compact。




字体设置

因为在英文字体下，字体环境比较复杂，为了让字体在任何地方看起来都最佳，苹果官方针对不同字号开发了两套「SF-UI Text」和「SF-UI Pro」字体，而每套字体下面又分为Text（文本模式）与Display（展示模式）两种属性，Text只有6个字重，而Display则有9个字重。

这么多类型的字体我们该怎么用呢？ios的建议是，在字号小于20pt时，使用SF-UI Text，大于或等于20pt时，则使用SF-UI Display。这需要我们在界面设计时手动切换。




对于「NewYork」，小于20点的文本使用小号，20到35点之间的文本使用中号，36到53点之间的文本使用大号，54点或更大的文本使用特大号。

苹方字体提供了6个字重供设计开发者使用。所以从iOS11开始，ios使用Semibold中粗体、大字号作为界面的标题变的更为流行起来，较为明显的有 iOS 中的一些原生APP，比如App Store、Apple Music...










在ios中，默认字体单位是「pt」，正文字号不应小于11pt，建议在15-18pt之间。在使用较大的字体来获得更好的易读性同时，也应该相应地减小字体的字重，因为过重的字体会太过醒目厚重，影响其他内容的显示效果。




iOS更全面的文字设置

动态类型可以通过让读者选择他们喜欢的文本大小来提供额外的灵活性，除了标准的动态类型大小之外，iOS系统还为有阅读大字体的需求的用户提供了许多字号上的调整（可在系统字体显示大小设置）

iOS中设置字体大小：




「苹方」和「SF-UI」字体可在iOS规范网站免费下载

网址：https://developer.apple.com/fonts/










2.2 android字体规范

可用字体

在Android设备中，Android始祖Google为了更好的追求视觉效果，联合了Adobe设计发布了「思源黑体」(Noto)来作为中文默认字体，「Roboto」为英文字体。




字体类型

思源黑体，英文名为「NotoSans CJK」。该字体不仅仅在字形上更易于在屏幕阅读，并且拥有7种字重，充分满足了设计的要求。

英文「Roboto」字体，只有6个字重，视觉语言与思源黑体Noto保持一致。该字体具有“现代的”和“平易近人”的气质，是「Material Design」设计风格下的推荐字体。







字体设置

Material Design字体规范，字体类型比例支持的十三种样式的组合。它包含可重用的文本类别，每种类别都有预期的应用程序和含义。

注：Web浏览器根据根元素大小计算REM（根em大小）。 现代网络浏览器的默认值为16px，因此转换为SP_SIZE / 16 = rem。

△Material Design设计类型比例。（字母间距值与Sketch兼容。）




值得注意的是，在安卓的字体单位中，不再以px，pt作为单位而是统一的使用了sp，换算方式是：

px = sp*ppi/160 ，sp = px / (ppi / 160)




以iPhone7为例，尺寸是750x1334，密度326ppi 来换算，那么Android的1dp = 1 * 326/160 ≈ 2px

「思源黑体」和「Roboto」字体可在GoogleFonts免费下载，并且可以商用。




网址：http://www.googlefonts.cn/




2.3 话题扩展

值得一提的是，越来越多的手机厂商，为了能够强化自身的品牌形象，推出了定制款的字体。

比如小米的「小米兰亭」：

OPPO的「OPPO Sans」：

三星的「SamsungOne」：




03 字体基础知识总结

正如开头所说，文字是界面中最核心的元素，字体作为基本语言，是设计中体现品牌很重要一点，字体选择非常重要，字体也是设计中占比（约 80%）最大的内容，所以我们一定要熟练掌握，下篇我将从文字行高、字间距、行间距等说起，围绕字体排版继续聊。

码字不易，感谢阅读，觉得有帮助点赞收藏哦～