Material Design+Figma，一次完成你作品集中的字体设置！

在关于信息分级这件事情上，字体方面的粗细程度以及大小情况，起着相当重要的作用。特别是当处于作品集排版这个环节的时候，我们常常得耗费大量的时间，去寻觅那适用于不一样信息层级的字体样式，以此来保证信息能够传达得足够清晰。就在今天，UXD将会跟大家分享一些技巧，借助某种工具和Figma，在较短的时间之际不费吹灰之力地创建出一套的字体样式，赶紧过来瞧瞧！！

• in

01-什么是Type Scale？

（先来了解下 的排版系统：

排版系统的核心是以Type Scale为基础，Type Scale是一组字体样式，这些字体样式能够做到在应用程序里重复使用，它所具备的风格灵活性十分充足，足以适应一系列不同目的同时保有一种一致性和可识别性 。

The type scale

一系列可重复使用的样式，属于其 Type Scale，样式范围涵盖从标题到说明文字，且包含专门为按钮等组件所设计的样式。

在改变某一个字体样式之际，相应的变化会突显在都选用此样式的全部组件当中，举例来讲，将“按钮”样式予以更改，这会对运用按钮字体样式的每一个组件产生影响，像对话框，还有扩展型的悬浮操作按钮以及选项卡标签之类的 。

另外的样式会呈现出更为灵活动态的特点。比如说，Type Scale涵盖了好多不同种类的标题样式，其目的在于去适配那丰富多样的，并且有着不同层次的信息结构，同时这一类型还会给出多种可供选择的方式，以此来完成对于标题内容的呈现工作。

封面主要采用的是 H4 标题样式，较小的标题样式适宜于此，缘由是存在诸多需要阅读的文章标题，故而空间与注意力极为宝贵。然而在单独的文章页面上，就像上图那样，运用的却是更具表现力的 H3 样式。它相较于封面上的样式更大、更粗且更具个性，因为文章具备充足的空间去呈现更为生动的内容。

在去呈现那有着不同目的或者含义然而大小却相似的内容之时，拥有多个正文样式会更为方便。在其中，「正文1」的样式是被用来用于文章文本的，而「正文2」则是被用于补充文章文本的附加信息的。

's type scale

运用了两种字体的搭配方式，其中包括Libre和另一种字体 ，在标题风格里有呈现 ，在正文风格当中也有展示 。尽管基本字体是以 作为根基的 ，然而增添第二种字体能够缔造更多不同的层次区别 。以这样子的搭配置体的方法 ，能够助力用户知晓他们于整个APP里所看到的内容类别 ，并且更加便利地剖析这些信息 。

如上述，文本 “US – ”，它被设定成 Libre ，以此有别于周边文本，这般区别能助力用户认知到，它属于文章内容的次要部分，具备导航性质，并且不应是说明或者标题的构成一部分 。

• your type theme

02-字体风格应该如何拿捏？

（以内容和基调为准：

能够怎样针对你的 APP 去成功构建起品牌字体风格呢？和进行创建颜色主题相类比，存在着那样一批相对不错的起始点所在之处，那便是去思索你的 APP 的内在性质与独特语气倾向。确切而言，你必须要去详细考量 APP 所展示呈现出来的具体内容，以及它究竟是以怎样的方式去推动促进 APP 的个性以及声音的塑造彰显。在其他的情景状况之下，你能够见到基于内容以及个性而产生的各种各样的字体风格样式。

你的应用程序，是否类似于电子邮箱应用Reply那般，基于任务，期望促使使用者尽可能高效地运用他们的收件箱呢？建议采用适合阅读的字体的Type Scale，借助单一字体系列的多样样式，以统一的方式展示内容，防止产生干扰。

就如同新闻App那样，你的App有没有想要表达的编辑意见呢；要是有的话，在应用程序的关键时候以及内容当中，你能够思索把高度可读的字体和更具表现力的字体搭配到一块儿吗 ？

倘若你的应用程序借助颜色与图像存有极为强烈的视觉呈现，如同教育类应用程序 Owl 那般，你能够运用一种易读的字体，并且维持些许俏皮性。Owl 在整个字号体系上采用较重的 Rubik，去模仿其标志里的形状，与此同时保持简洁性与可预测性。

要是你的App的声音以及内容期望传达出优雅跟现代感喽就如同购物App那般，那么你所要选择的Type Scale得侧重于较大尺寸的较轻字重哟同时要确保正文、标题还有副标题样式的可读性呀 。

去寻觅可得使用的字体之际呀，能够思索起于Fonts，那里有着数以之千计免费的字体可被用来使用呢。

如何选择配对字体？

若是你已然寻得了契合你那款 App 的字体，然而却打算运用另外一种字体去拓展你的 Type Scale，有一种技巧便是将它们视作于一个色轮之上存有的 。

尝试寻觅一种跟你的第一种字体相邻或者相关的特性，比如相似的末端形态或者字形，亦或是一种对这些特性构成对比的字体，比方让有衬线字体与无衬线字体配对，又或者把一种具有人性化、富有表现力的字体和更具备理性的内容进行配对。

那么接下来，让我们一块儿瞧一瞧，怎样能够迅速地打造出满满一整套，适用于不一样信息层级的字体样式呢 ？

️ ️ ️

• your type scale

03-创建你的Type Scale

（从 中获取数据：

要是你运用Fonts，那你能够点击进入下面给出的网址，迅速创建一个Type Scale，仅需于右边的面板那儿挑选你打算使用的字体（输入字体名称便可自动完成）。此技巧能够助力你探寻字体在排版里的合理样式。

网址指路：

• your theme

04-视觉化你的主题

（用Figma进行测试：

在具备了有可能的字体比例之后，你便能于设计环境里针对此展开可视化操作。其一，复制界面设计工具Figma中的2套件。其二，于主题页面上，你会瞧见一个被称作的构图框架，它全方位呈现了你的字体比例。

网址给出方向提示：（），其类型为&且节点标识号是0减去11以及模式处于未知状态还有时间为负数0 。

下面，你能够于右侧的Text里，参照上一步在.io上具备的字体比例，于相应样式内复制每一个数值。

如此一来，页面之上每一个组件当中的字体样式都会共同进行修改，能够助力你做一场全方位的效果检测。

存在更多的那些知识干货，以及另外其他的海外留学资讯，能够去关注UXD交互工业产品设计公众号，或者添加小助手，并且能拿到作品集的相关资源以及讲座资源~。

|福利大放送 |

对于刚开始学设计的人而言，要从无到有去进行创作简直是不太可能的，这情形犹如读书时反复诵读许多遍之后含义自会明晰那般，具备大量点滴的累积，才能够于脑海之中构建起素材的集合，这些集合呀能够助力同学们完成起始阶段关于设计思路的积聚，依托类似这样的前提进而展开独到且具有个人风格的创作，最终才可以打造出具备较高质量的作品集。全球院校的最新作品集能免费拿到手！添加小助手微信就能够获取：

顶级名校作品集参考