字体 Typography

字体是文字信息的载体，优秀的阅读体验是用户高效、愉快地使用产品的前提。

字体选用

优先使用各平台/系统默认的界面字体。

平台	西文	中文
macOS / iOS	San Francisco	Ping Fang SC
Android	Roboto	Noto Sans CJK
Windows	Segoe UI	Microsoft YaHei

字体回退机制

通用场景

我们提供了一套回退机制来保证字体在不同平台及浏览器内始终保持良好的易读性和可读性。

font-family: -apple-system , BlinkMacSystemFont , "Segoe UI" , Roboto , "Helvetica Neue", "PingFang SC", "Noto Sans" , "Noto Sans CJK SC" , "Microsoft YaHei" , "微软雅黑" , sans-serif;

代码片段场景

使用 Mono（等宽）字体来显示代码片段信息。

font-family: source-code-pro, "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, Courier, monospace;

字体样式

颜色 Color

我们使用透明度来区分字体层级。当字体应用于浅色背景时，以 #000 为基础来调整透明度；当应用于深色背景时，以 #FFF 为基础。

字体类型	常用场景	透明度（浅色背景）	透明度（深色背景）	WCAG 对比度
T1	标题、正文	85%	100%	15:1 AAA
T2	正文	65%	85%	7:1 AAA
T3	描述	45%	65%	3.3:1 AA
T4	禁用、占位文字	25%	45%	1.8:1 Fail

T1 与 T2 满足 WCAG 2.0 AAA 标准。

链接文字颜色可按场景选择对应的主题色，其状态颜色也由设计师按场景定义。

尺寸与行高 Size and Line Height

我们使用 rem 机制来匹配字体尺寸与行高，root font-size = 16px。

尺寸	rem	行高	rem
12px（天基默认）	0.75	16	1.25
14px（Aone 默认）	0.875	20	1.25
16px	1	24	1.5
18px	1.125	26	1.625
20px	1.25	28	1.75
24px	1.5	32	2
28px	1.75	36	2.25
32px	2	40	2.5
36px	2.25	44	2.75

字重 Font Weight

常规体常用于正文阅读场景，请勿在正文场景大量使用中黑体及细体。

倾斜 Italic

由于中文字体几乎没有为斜体做过视觉优化和修正，我们应避免使用斜体中文字。

在使用西文斜体时，往往用于在句子中对部分字词做出强调，如作品的名称、技术用语、设备名称等专有名词。

数字 Figures

字体中的数字有比例（Proportion Figure）、表格（Tabular Figure）两种属性。比例数字更适合横向正文阅读场景，表格数字则适用于纵向对比的场景，如表格。在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums，来保证阅读体验。

下图清晰体现了表格数字在表格场景中的阅读体验优于比例数字。

段落样式

对齐 Alignment

请勿使用阅读体验不佳的 justify（两端对齐）方式

缩进 Indent

缩进值请设置为 4 的倍数。