7.1 字体系统（Material基础）
本文介绍了Material基础中的字体系统
字体系统
利用文字排版可以尽可能清晰有效地展示你的设计和内容。
目录
字体格式
格式应用
字体格式
Material Design字体格式包含一系列可支持产品及其内容需求的对比样式。
字体格式由字体系统所支持的13种样式组成。它包含可重复使用的文本类别，每个类别都有倾向的应用场景和含义。
Material Design字体格式。（字距与Sketch兼容）
下载
使用Sketch中的字体样式来获取字体格式。*
*本文附件中有相关文件
*链接：谷歌字体Roboto
字体大小单位
以下单位用于表示Android、iOS和web的字体大小。
转换示例
Web浏览器基于根元素大小计算REM（根em大小）。现代Web浏览器的默认值是16px，因此转换方式为SP_SIZE/16=rem*。
*SP=1/16rem=0.0625rem
字距单位
以下单位用于UI中的字距。
*此处字距为”tracking“的翻译，等号后边的字距为”letter-spacing“的翻译，熟悉CSS的童鞋应该都知道letter-spacing这个参数，维基百科上的解释是”tracking“主要用于排版系统，和电子显示系统中的”letter-spacing“意思一致。附维基百科链接Letter-spacing。
字距示例
格式应用
字体格式在组件和整体布局中以文本形式出现。字体属性可在字体、字型、大小写、字号和字距上使用自定义值。
1. 格式类别
2. 实际值
标题
在字体格式中，标题跨度范围为1到6。标题是界面中最大的文本，一般用于简短、重要的文本或数字。
对于标题，你可以选择一款富有表现力的字体，比如display（展示）、handwritten（手写）或 script（手迹） 等风格。这些非传统字体的设计具有丰富的细节和特色，有助于吸引眼球。
标题2使用了display类型字体
标题3使用了Script类型字体。
衬线和无衬线字体都适用于标题，特别是小字型。*
*本文中衬线和无衬线字体与”表现力类“等其余字体互属于并行类别。
标题6（H6）使用了无衬线字体。
副标题
副标题普遍小于标题。它们通常用于较短的中等强调文本。衬线和无衬线字体都适用于副标题。
副标题1使用了无衬线字体
对于副标题，应谨慎使用具有丰富表现力的字体，包括display、handwritten和script风格等。
谨慎使用
在副标题上应谨慎使用具有表现力的字体。
正文
正文文本的范围是1到2，由于它适用于小字型文本，所以通常用于撰写长篇文字。对应文本中的较长部分，推荐使用衬线或无衬线字体。
正文1（Body 1）使用了衬线字体
正文2（（Body 2）使用了无衬线字体
不要在正文中使用表现力丰富的字体，包括display、handwritten或 script等。
错误示例
不要在正文中使用表现力丰富的字体。
说明文和上划线
说明文和上划线文本（文本上有条线）是所有字体中最小的。它们被少量地用于图像注释或标题引入。
说明文本（Caption）使用了衬线字体
上划线（OVERLINE*）使用了无衬线字体
不要在说明文和上划线文本中使用表现力丰富的字体，包括display、handwritten和script风格等。
错误示例
不要在上划线文本中使用表现力丰富的字体。
按钮
按钮文本是一种操作引导，它使用了不同的类型（如文本、线框和填充按钮等）并应用在选项卡、弹框和卡片中。
按钮文本通常是全大写的无衬线体。
按钮文本上使用一款全大写的无衬线体
按钮文本可以是首字母大写的无衬线或衬线体。
谨慎使用
当按钮文本与非交互文本有明显区别时应谨慎使用，例如上图中下边的无衬线字体按钮。
不要在按钮文本中使用表现力丰富的字体，包括display、handwritten和script风格等。
错误示例
不要对按钮文本使用display风格的字体。
*参考书籍：小林章《西文字体》《西文字体2》
*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考
