字体的粗细和大小在信息分级中扮演着重要的角色。尤其在作品集排版时，我们往往需要花费大量时间去寻找适用于不同信息层级的字体样式，从而确保信息传达地足够清晰。👀 今天 UXD 将与大家分享一些技巧，利用 Material Design 和 Figma，在短时间内轻松创建一套字体样式！抓紧来看！！

• Typography in Material

01-什么是Type Scale？

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

Material Design 的排版系统以 Type Scale 为核心。Type Scale 是一组可以在应用程序中重复使用的字体样式，提供了足够的风格灵活性以适应一系列的目的，并保持一致和可识别性。

Material Design 的 Type Scale 包括一系列可重复使用的样式，从标题到说明文字，还包括专门为按钮等组件设计的样式。

当改变一个字体样式时，变化会反映到所有使用该样式的组件中。例如，更改“按钮”样式将影响使用按钮字体样式的所有组件，如对话框、扩展的悬浮操作按钮和选项卡标签。

其他样式则更加灵活。例如，Type Scale 包括多种标题样式，以适应丰富的信息层次结构，并提供多种选项来呈现标题内容。

Fortnightly 的封面主要采用了 H4 标题样式。较小的标题样式适用于这里，因为有许多文章标题需要阅读，所以空间和注意力非常宝贵。但是在单独的文章页面上，如上图，却用到了更具表现力的 H3 样式。它比封面上的样式更大、更粗、更有主见，因为文章有足够的空间来表达更生动的内容。

在呈现具有不同目的或含义但大小相似的内容时，拥有多个正文样式会更方便。在 Fortnightly 中，「正文1」的样式用于文章文本，而「正文2」则用于补充文章文本的附加信息。

Fortnightly 使用了两种字体的组合——Libre Franklin和 Merriweather，在标题和正文风格中都有出现。虽然基本字体是以 Roboto 为基础的，但添加第二种字体可以创造更多的区别层次。以这种方式搭配字体可以帮助用户了解他们在整个 APP 中看到的内容类型，并更方便地拆解这些信息。

在上面的例子中，文本 "US – Poverty "被设置为 Libre Franklin，从而区别于周围的 Merriweather 文本，这种区别有助于用户认识到它是文章内容的次要部分，是导航性质的，而不是说明或标题的一部分。

• Creating your type theme

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

（以内容和基调为准：

如何为你的 APP 建立品牌字体风格？与创建颜色主题类似，一个好的起点是思考你的 APP 的性质和语气。具体来说，你需要考虑 APP 所呈现的内容，以及它是如何促进 APP 的个性和声音的。在其他的 Material Studies 中，你可以看到基于内容和个性的各种字体风格。

你的 App 是否像电子邮件 App Reply 一样：基于任务，希望让用户尽可能有效地使用他们的收件箱？建议使用适合阅读的字体的 Type Scale，利用单一字体系列的多种样式，以一致的方式呈现内容，避免干扰。

你的 App 是否有要表达的编辑意见，就像新闻 App Fortnightly？那么你可以考虑在应用程序的关键时刻和内容中，将高度可读的字体与更具表现力的字体搭配起来。

如果你的 App 通过颜色和图像有非常强烈的视觉表达，就像教育应用程序 Owl 一样，你可以使用一个可读的字体，并保持一些俏皮感。Owl 在整个 Type Scale 上使用较重的 Rubik，模仿其 LOGO 中的形状，同时保持简单和可预测性。

如果你的 App 的声音和内容想要传达优雅和现代感，就像购物 App Shrine 一样，那么你要选择的 Type Scale 需要侧重于较大尺寸的较轻字重，同时确保正文、标题和副标题样式的可读性。

在寻找可使用的字体时，可以考虑从 Google Fonts 开始，里面有数以千计的免费字体可供使用。

● 如何选择配对字体？

如果你已经找到了适合你的 App 的字体，但想用另一种字体来扩大你的 Type Scale，一种技巧是把它们想象成存在于一个色轮之上。

试着寻找一种与你的第一种字体相邻或相关的特征（例如相似的末端形状或字形），或者一种与这些特征形成对比的字体（例如将有衬线字体和无衬线字体配对，或者将一种人性化的、富有表现力的字体与更理性的内容配对）。

🙋下面我们来看一下如何快速创建一整套适用于不同信息层级的字体样式：


⚫️ ⚫️ ⚫️

• Create your type scale

03-创建你的Type Scale

（从Material Design中获取数据：

如果你使用 Google Fonts，你可以点击进入下方的网址，快速创建一个 Type Scale，只需要在右边的面板上选择你想要用的字体（输入字体的名称可以自动完成）。这一技巧可以帮助你探索字体在排版中的合理样式。

• Visualizing your theme

04-视觉化你的主题

（用Figma进行测试：

在有了可能的 Type Scale 之后，你可以在设计环境中对此进行可视化。首先，复制 Figma Community 中的 Material 2 Design Kit。在 Material Theme 页面上，你会看到一个名为 Typography 的画框，它全面展示了你的 Type Scale。

接下来，你可以在右侧的 Text Styles 中，参考上一步在 material.io 上的字体比例，在相应样式中复制每一个数值。

这样 Stickersheet 页面上的每个组件中的字体形式都会同步修改，可以帮助你做一个全面的效果测试。

更多知识干货以及其他海外留学的资讯可以关注UXD交互工业产品设计分享或者添加小助手，还可获取讲座直播哦~

|福利大放送 | WELFARE 
对于设计初学者，完成从0开始创作几乎是不可能的，就像学习过程中书读百遍其义自见一样。有了大量的积累，才能在脑海里建立素材库，这些素材库能帮助同学们完成最初的设计想法积累，基于这样的基础再进行个性化的创作，最终才能做出高质量的作品集。全球院校最新作品集免费拿！添加小助手即可获取：

UXD交互工业产品设计学院是尤克斯国际旗下的一家专注于交互、服务、工业、产品设计专业的顶级设计学院。除了一对一设计课、基础技能课程、小组课题、设计评图、联合教学外，我们提供不定主题的公开课和内部小组课，教学计划课程由三大部分组成，包括基础软件技能教学、设计理论系统讲座、申请必备知识解析等。

本文版权归UXD尤克斯所有

部分图片来自于网络

如有侵权请与我们联系