Material Design 基础 - 文字排版
1. 文字系统 （The type system）
使用排版尽可能清晰有效地呈现您的设计和内容。
1.1. 文字类型标尺(Type scale)
质感设计的文字类型标尺包括一系列对比样式可满足产品及其内容的需求。
文字类型标尺是文字系统支持的十三种样式的组合。它包含可重用的文本类别，每个类别都有预期的应用和含义。
1.2. 文字类型标尺生成器
文字类型标尺生成器是用于创建类型刻度和相应代码的工具, 该生成器由Google字体 提供支持。您选择的任何字体都会根据Material排版指南自动调整大小和优化，以提高可读性。
在文字类型标尺中选择一个类别以查看字体的详细信息。通过右侧的菜单调整字体选择。
1.3. 文字类型标尺样例
此示例文字刻度将 Roboto 字体用于所有标题、字幕、正文和字幕，从而创建具有凝聚力的排版体验。层次结构通过字体粗细（浅、中、常规）、大小、字母间距和大小写的差异来传达。
| Scale Catagory | 字体(Typeface) | 粗细(weight) | 字号(Size) | 大小写 | 字母间距(Letter spacing) |
|---|---|---|---|---|---|
| H1 | Roboto | Light | Sentence | -1.5 | |
| H2 | Roboto | Light | Sentence | -0.5 | |
| H3 | Roboto | Regular | Sentence | 0 | |
| H4 | Roboto | Regular | Sentence | 0.25 | |
| H5 | Roboto | Regular | Sentence | 0 | |
| H6 | Roboto | Medium | Sentence | 0.15 | |
| Subtitle 1 | Roboto | Regular | Sentence | 0.15 | |
| Subtitle 2 | Roboto | Medium | Sentence | 0.1 | |
| Body 1 | Roboto | Regular | Sentence | 0.5 | |
| Body 2 | Roboto | Regular | Sentence | 0.25 | |
| BUTTON | Roboto | Medium | All caps | 1.25 | |
| Caption | Roboto | Regular | Sentence | 0.4 | |
| OVERLINE | Roboto | Regular | All caps | 1.5 |
字母间距值与Sketch兼容, Sketch 是用于数字设计的一体化平台 — 具有协作设计工具、原型设计和开发人员交接.
1.4. 字体大小单位
以下单位用于在 Android、iOS 和 Web 上表示字体大小。
| 平台 | Android | iOS | Web |
|---|---|---|---|
| 字体单位 | sp | pt | rem |
| 转换率 | 1.0 | 1.0 | 0.0625 (1/16) |
转换示例
| Android | iOS | Web |
|---|---|---|
| 10sp | 10pt | 0.625rem |
| 12sp | 12pt | 0.75rem |
| 24sp | 24pt | 1.5rem |
| 60sp | 60pt | 3.75rem |
Web 浏览器根据根元素大小计算 REM（root em 大小）。现代 Web 浏览器的默认值为 16px，因此转换为 SP_SIZE/16 = rem。
1.5. 字母间距
以下单位用于 UI 中的字母间距。
| Platform | Android | iOS | Web |
|---|---|---|---|
| 字母间距单位 | em | pt | rem |
| 转换率 | (Sketch字距 / 字体大小 (sp)) = 字母间距 | 1.0 | (Sketch字距 / 字体大小(px)) = 字母间距 |
字母间距转换示例
| Android | iOS | Web |
|---|---|---|
| (.2 tracking / 16sp font size) = 0.0125 em | -0.1 pt | (.2 tracking / 16px font size) = 0.0125 rem |
2. 应用文字类型标尺
文字类型标尺在组件和整体布局中显示为文本。文字属性可以对字体、字体、大小写、大小和字母间距使用自定义值。
2.1. 标题（headlines）
在文字类型标尺中，标题的范围从 1 到 6。标题是屏幕上最大的文本，保留用于简短的重要文本或数字。
对于标题，您可以选择富有表现力的字体，例如艺术字、手写或脚本样式。这些非常规的字体设计具有有助于吸引眼球的细节和复杂性。
2.2. 子标题(subtitles)
子标题比标题小。它们通常保留给长度较短的中等重点文本。serif或sans serif字体适用于字幕。
对于字幕，使用富有表现力的字体（包括艺术字、手写字体和脚本样式）时要小心,由于字体较小， 可读性会变差。
2.3. 正文
正文文本的范围为 1-2，通常用于长格式书写，因为它适用于小文本大小。对于较长的文本部分，建议使用serif或sans serif字体。
不要使用富有表现力的字体，包括艺术字、手写字体作为正文。
2.4. 说明文字和上划线文本
说明文字和上划线文本（上面有一行的文本）是最小的字体大小。它们很少用于注释图像或引入标题。
不要使用富有表现力的字体，包括艺术字、手写字体作为说明文字和上划线文本。
2.5. 按钮文本
按钮文本是不同类型的按钮（如文本、轮廓和包含的按钮）以及选项卡、对话框和卡片中使用的号召性用语。
按钮文本通常使用sans serif字体的全大写字母形式。
不要使用富有表现力的字体作为按钮文本，包括艺术字、手写和脚本样式。
3. 理解排版
3.1. 文字属性
字体是字母的集合。每个字母都是唯一的，某些形状在字母之间共享。字体表示字母集合中的共享模式。
根据其样式、易读性和可读性选择的字体在遵循排版设计的基本原则时最为有效。
字母形状部件的名称: aperture光圈, ascender, baseline基线, cap height, descender, leading行距, letter-spacing 字母间距, sans serif, serif, stem词干, stroke笔画, x-height (x 高度)
3.2. 基线(baseline)
基线是文本行所依赖的不可见行。在质感设计中，基线是测量文本和元素之间垂直距离的重要规范。
无论是使用 pt / sp 作为字体的单位，文本的基线都必须位于 4dp 网格上。行高必须是可被 4 整除的值才能维持4dp基线网格。
3.2.1. 从基线测量
指定与 UI 元素与基线的距离。
基线值与软件无关，因此它们适用于任何设计程序，并与网格一起使用。在 Android 和 iOS 上，代码可以从基线相关的规范转换为填充。对于 Web，使用 Sass 或 CSS 自动执行计算。
3.3. 大写字母高度（Cap height）
大写字母高度是指从基线开始测量字体中大写字母（如 M 或 I）的高度。圆形和尖头大写字母（如 S 和 A）通过绘制在大写字母高度上方的轻微过冲进行光学调整，以达到相同尺寸的效果。每种字体都有一个独特的大写高度。
3.4. X高度
X高度是指字体中小写 x 的高度，x 是字体中一个非常特色的字母，他是左右对称， 而且有中心点，占比均衡的之母， 它表示字体中每个字形的高矮。
具有高 x 高度的字体在小字体下具有更好的易读性，因为每个字母中的空白区域更清晰。
3.5. 顶线和底线(Ascenders 和 descenders)
顶线是字体盒子的上边缘，在某些小写字母中向上垂直笔画，其延伸范围向上超出了大写字母高度线直达顶线。底线是字体盒子的下边缘，有些字母的笔画底部笔画会会超出基线直达底线。在某些情况下，当线条高度（基线之间的垂直距离）太紧时，可能会发生顶线越过上一行底线的现象。
3.6. 字体粗细(Weight)
粗细是指字体笔划的相对粗细。字体可以有很多Weight;典型字体一般会有4-6种粗细不同的字体。
常用粗细:
- 细
- 常规
- 中等
- 粗体
4. 字体分类
4.1. 衬线体(Serif)
名词解释: 衬线字体，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。另外，无衬线体在中文通常称为黑体.
无衬线体是无衬线字体，没有这些额外的装饰，而且笔画的粗细差不多。
用途: 在传统印刷中，衬线字体用于正文印刷，因为它被认为比无衬线体更易于阅读，是比较正统的。相对的，无衬线体用于短篇和标题等，能够引起读者注意，或者提供一种轻松的气氛。
一般来说，人们倾向在长篇文章中使用衬线字体，如书籍、报纸和杂志等等。虽然在欧洲比北美更经常使用无衬线体，但在正式场合衬线字体还是使用最多的类型。
印刷制品更多趋向使用衬线字体以方便阅读，但是在计算机领域中倾向使用无衬线字体以方便在显示器上显示。此外，衬线字体從審美角度較為正式優美，然從眼睛的感受並不及不採用襯線的黑體字，因為襯線體在筆劃上有過多的點綴（筆劃末端的小三角）很容易造成視覺疲勞（尤其是顯示在螢幕上時）。出于上述原因，大部分网页使用无衬线字体。因此，Windows Vista中的中文預設字体已经从原来的衬线字体（宋体或细明体）改变成了无衬线字体（微软雅黑或微软正黑体）。另外，为了更好解决衬线字体的显示问题，新的反锯齿和次像素显示（如ClearType）等技术开始广泛运用。但是目前最一般的显示器解析度也不过每英寸100像素，这是屏幕显示衬线体可读性的瓶颈所在。
衬线字体分为以下几种类型:
- 旧体衬线体（英語:old style）
类似于墨水书写，带有:
粗描边和薄描边之间的对比度低
笔画中的对角线应力
小写上升器上的倾斜衬线
*过渡衬线体（Transitional）
具有:
粗描边和薄描边之间的高对比度
中高 x 高
笔画中的垂直应力
带括号的衬线
- Didone或新古典主义衬线具有:
厚描边和薄笔触之间的对比度非常高
笔画中的垂直应力
“球”末端行程。
- Slab衬线具有:
重衬线笔画粗细变化不明显
最少或无包围曝光
4.2. 无衬线体(sans serif)
没有衬线的字体被称为无衬线字体，来自法语单词“sans”，意思是“没有”。完全抛弃装饰衬线，只剩下主干，造型简明有力，更具现代感，起源也很晚。适用于标题、广告，瞬间的识别性高。
无衬线可归类为以下几种类型:
早期的无衬线体（Grotesk，哥德体）:厚描边和薄描边之间的对比度低，垂直或无可观察到的应力
人文无衬线体:厚薄笔触之间的中等对比度，倾斜的应力
几何:厚描边和薄描边之间的对比度低，具有垂直应力和圆形圆形
4.3. 等宽字体(Monospace)
等宽字体显示具有相同宽度的所有字符。
4.4. 手写体
手写字体是非常规的，具有自然的手写感觉。这些通常在类型刻度中用作 H1 - H6。它们具有以下形式:
黑色字母:高对比度，窄，具有直线和棱角分明的曲线
草体:复制书法写作风格（更正式）
手写:复制手写内容（不太正式）
4.5. 艺术体
仅适用于在较大点大小下使用的所有分类类型的杂项类别。显示字体通常在文字刻度中用作 H1 - H6。
5. 可读性
可读性由字体中的字符决定，可读性是指阅读单词或文本块的难易程度，这受字体样式的影响。
5.1. 字母间距 Letter-spacing
字母间距（Letter-spacing）也称为tracking，是指对一段文本中字母之间的间距。
较大的文字大小（如标题）使用更紧密的字母间距来提高可读性并减少字母之间
对于较小的文字大小，较宽松的字母间距可以提高可读性，因为字母之间的空间越大，每个字母形状之间的对比度就越大。所有大写字母的文本（即使是小字体）都因其增加了字母间距而提高了可读性。
5.2. 表格数字
在值可能经常更改的表或位置中使用表格数字（也称为等宽数字），而不是比例数字。
表格数字使值保持光学对齐，以便更好地扫描。
5.3. 行长（Line Length）
正文文本的行长度通常在 40 到 60 个字符之间。在行长较宽的区域（如桌面），包含最多 120 个字符的较长行需要将行高从 20sp 增加到 24sp。
对于英文正文文本，理想的行长度为每行 40-60 个字符。
短行英语文本的理想行长为每行 20-40 个字符。
5.4. 行高(Line Height)
行高（也称为行距）控制文本块中基线之间的间距量。文本的行高与其文字大小成正比。
5.5. 段落间距(Paragraph spacing)
将段落间距保持在文字大小的 .75x 和 1.25x 之间。
5.6. 类型对齐方式
文字对齐方式控制文本在其显示空间中的对齐方式。有三种类型对齐方式:
左对齐:当文本与左边距对齐时
右对齐:当文本与右边距对齐时
居中对齐:当文本与设置文本的区域的中心对齐时
5.6.1. 左对齐
左对齐文本是从左到右的语言（如英语）的最常见设置。
5.6.2. 右对齐
右对齐文本是从右向左书写的语言（如阿拉伯语和希伯来语）最常用的设置。
从左到右的语言可以使用右对齐的文本，尽管它最适合区分布局中的短版式元素（如侧注释），并且不建议用于长副本。
5.6.3. 居中对齐
居中文本最适合用于区分布局中的短版式元素（如拉引号），不建议用于长副本。
6. 系统字体
系统字体预安装在您的计算机或设备上。它们通常具有广泛的语言支持，并且开发人员无需支付许可成本。在应用字体中使用系统默认字体可将平台的一致性与应用的外观结合起来。但是，由于它们出现在设备上的许多位置，因此它们可能不会脱颖而出。
6.1. 使用系统字体
本机系统字体应用于大型文本块和低于 14sp 的任何文本。 Roboto是Android的默认系统字体。对于 Android 和 Web 产品以外的平台，请使用该平台上首选的系统字体。例如，iOS应用程序应使用Apple的San Francisco字体。
7. 语言支持
语言大小和显示样式因字符集是类似英语、高还是密集而异。
7.1. 语言注意事项
7.2. 字形（glyphs）
每种书面语言都使用自己的一组字符，称为字形glyphs。
如果你的 UI 使用多种语言，则你的版式布局应因语言而异。语言具有不同的平均单词长度和高度，这会影响它在 UI 中的显示方式
7.3. 长度
不同语言的字长可能会有很大差异，即使是那些使用类似字形的语言，如英语和德语。
英语通常比其他欧洲语言短。例如，德语有许多较长的复合词，需要更多的行或行间距。
7.4. 对齐
某些书写系统（如阿拉伯语和希伯来语）显示字符时从右到左显示。在相同的字体大小下，这些字体可能看起来比拉丁语字体小，需要调整行距和对齐方式，以便版式在所有语言的 UI 中都能正常工作。
7.5. 高度
许多书写系统需要比英语更多的垂直空间，因此您的 UI 应为这些不同的系统提供足够的垂直空间。
7.6. 立式排版
垂直排版虽然很少使用，但可以垂直而不是水平显示字符。
中国、日本和韩国的排版通常是等宽的，这意味着每个字母占用的空间与其他字母相同。它通常从左到右，从上到下设置。它也可以垂直设置:从上到下和从右到左。
7.7. 语言选项
当每种语言使用不同的书写系统时，可能需要在同一 UI 中使用多个字体来显示多语言内容。
书写系统可分为三类:
类似英语（English-like）
高（Tall）
密集（Dense）
7.7.1. 类似英语的字体
西欧，中欧和东欧以及非洲大部分地区的语言通常用拉丁字母书写。越南语是一个值得注意的例外，因为它使用拉丁书写系统的本地化形式，但其重音字形可能比西欧语言中的字形高得多。希腊语和西里尔文的书写系统与拉丁语非常相似。
7.7.2. 高字体
需要额外行高以容纳较大字形的语言脚本，包括南亚、东南亚和中东语言，如阿拉伯语、印地语、泰卢固语、泰语和越南语。
7.7.3. 密集字体
需要额外行高以容纳较大字形（包括中文、日语和朝鲜语）的语言文字。
7.8. Noto指导
Noto 是 Roboto 未涵盖的所有语言的默认字体。它源自Droid，旨在通过兼容的高度和笔触厚度跨语言和脚本实现视觉和谐。
该系列在 Unicode 版本 6.0 中定义了 93 个脚本。
7.9. 密集脚本注意事项
Noto中文、日文和韩文 （CJK） 有七种与 Roboto 匹配的权重，其权重设置与英语相同。
小于标题样式的文字大小应调整拉丁文字标尺。
7.10. 廋高文字注意事项
Noto 支持南亚、东南亚和中东语言（包括阿拉伯语、印地语和泰语）中使用的高字。请使用常规粗细，因为中粗在 Noto 中不可用。避免使用粗体重量，因为粗体太重。
小于标题样式的文字大小应调整拉丁文字刻度。
较高的脚本行高度略大于基于拉丁语的字符。
7.11. 语言类别参考
为了便于国际化，谷歌将语言分为三类:类似英语，高大和密集。
类似英语:拉丁语（越南语除外）、希腊语、西里尔文、希伯来语、亚美尼亚语和格鲁吉亚语。
高:需要额外行高以容纳较大字形的语言脚本，包括南亚、东南亚和中东语言，如阿拉伯语、印地语、泰卢固语、泰语和越南语。
密集:需要额外行高以适应较大字形但指标与高脚本不同的语言脚本。包括中文、日文和韩文。
Material Design 系列文章
最新更新以及更多Material Design相关文章请访问 鹏叔的技术博客-Material Design
8. 参考文档
成也排版败也排版:一个选择的过程
The type system
排版术语
How to Properly Adjust Font Settings in Sketch
衬线体
Material Design 基础 - 文字排版