Font 字体
文字是重要的信息传达元素之一，它本身的视觉特性和品质影响着信息传递的质量和产品操作的效率。
根据过往的产品设计经验，我们提供了通用的字体、字重、行高、段间距建议。
字体
中文
用户通过文字来理解内容和完成工作，科学的字体系统应该具有良好的可读性。
无衬线体更加亲和，现代，清晰便于阅读，为网页中常用的字体类型。
产品中优先使用各个系统中默认的无衬线字体。
| Mac OS/IOS | Windows | Android |
|---|---|---|
| Pingfang/苹方 | Microsoft YaHei/微软雅黑 | Noto Sans/思源黑体 |
英文
| Mac OS/IOS | Windows | Android |
|---|---|---|
| Helvetica | Segoe UI | Roboto |
数字
| Mac OS/IOS | Windows | Android |
|---|---|---|
| Helvetica | Segoe UI | Roboto |
字色
| Example | Token | Value | Usage |
|---|---|---|---|
@color-neutral-900 | #252D37 | 一级文字 | |
@color-neutral-800 | #5C626A | 二级文字 | |
@color-neutral-700 | #91959B | 三级文字 | |
@color-neutral-500 | #C8CACD | 四级文字，一般用于禁用 |
字号
文字的大小，层级，对比度等都是影响视觉可读性和阅读效率的重要因素。
为保障文本的易读性，界面文字需满足以下要求：
- 最小可识别文字大小：
12px（移动端10px）。 - 字体层级：区分文本主副层级，字号差距需保持
2-4px。 - 一个产品中不要有过多的字体层级，建议选择在 3-5 种之间，对于需要用户关注的文本信息可通过增加字重的方式突出。
考虑我们产品界面的复杂性和通用性，在字号的选择上，我们将主字号定义为 12px ，移动端为 14px ，并提供了不同层级的字号以适配不同信息层级的展示需求。
标题 Title
| Example | Token | Value | Usage | Basic Properties 基本属性 | UI Properties UI 属性 | Long Content 长内容属性 |
|---|---|---|---|---|---|---|
设计 Design | --font-title-h1 | 48px (3rem) | 用于页面标题 | Font Weight: Bold(600) | Line Height: 56px Margin Top: -- | -- |
设计 Design | --font-title-h2 | 40px (2.5rem) | 用于页面标题 | Font Weight: Bold(600) | Line Height: 48px Margin Top: -- | -- |
设计 Design | --font-title-h3 | 32px (2rem) | 用于页面标题 | Font Weight: Bold(600) | Line Height: 40px Margin Top: -- | Line Height: 48px Margin Top: -- |
设计 Design | --font-title-h4 | 24px (1.5rem) | 用于页面标题 | Font Weight: Bold(600) | Line Height: 32px Margin Top: -- | Line Height: 40px Margin Top: -- |
设计 Design | --font-title-h5 | 20px (1.25rem) | 用于页面标题 | Font Weight: Medium(500) | Line Height: 28px Margin Top: -- | Line Height: 32px Margin Top: -- |
设计 Design | --font-title-h6 | 16px (1rem) | 用于页面标题 | Font Weight: Medium(500) | Line Height: 24px Margin Top: -- | Line Height: 28px Margin Top: -- |
设计 Design | --font-title-h7 | 14px (0.875rem) | 用于页面标题 | Font Weight: Medium(500) | Line Height: 20px Margin Top: 16px | Line Height: 24px Margin Top: -- |
设计 Design | --font-title-h8 | 12px (0.75rem) | 用于页面需要突出的正文 | Font Weight: Medium(500) | Line Height: 16px Margin Top: 16px | Line Height: 20px Margin Top: -- |
正文 Body
| Example | Token | Value | Usage | Basic Properties 基本属性 | UI Properties UI 属性 | Long Content 长内容属性 |
|---|---|---|---|---|---|---|
设计 Design | --font-body-md | 14px (0.875rem) | 用于需要突出的正文和大多数移动端正文 | Font Weight: Regular(400) | Line Height: 20px Margin Top: -- | Line Height: 24px Margin Top: -- |
设计 Design | --font-body-sm | 12px (0.75rem) | 用于 pc 端大多数正文 | Font Weight: Regular(400) | Line Height: 16px Margin Top: 8px/16px | Line Height: 20px Margin Top: -- |
行高
关于文字的行高，css 属性当中的 line-height ，在国际无障碍网页使用标准中给出了明确的指引 line-height=font size\*1.5。
行高是为了让上一行的文字和下一行的文字之间有呼吸的空间，基于呼吸空间一致，让不同字号之间的间距都保持相同，
通过逻辑得到这样一个公式：行高 = 字号 + n ，通过结合 2x 网格系统，以及常用业务、多语言场景，得出行高计算公式：
small：line-height = font size+4；
medium：line-height = font size+8；
large：line-height = font size+12。
| Example | Token | Value | Usage | UI Properties |
|---|---|---|---|---|
设计 Design | --line-height-small | 1.3 rem | 单行型文本。大多数的正文及标签，常用于紧奏型布局。 | Font Size: 12px； Line Height: 16px； |
设计 Design | --line-height-medium | 1.5 rem | 段落型文本，适用在紧凑型布局场景。 | Font Size: 14px； Line Height: 20px； |
设计 Design | --line-height-large | 1.8 rem | 段落型文本，需要给予透气感时，适用在宽松型场景。 | Font Size: 16px； Line Height: 28px； |
字重
同一个字体的不同字重能传达不同的信息权重和情绪。细的字体给人以细腻、轻快的感觉，而粗体则给人着重和严肃的认知。因此适合的场景使用合适的字重非常重要。
| Example | Token | Value | Usage |
|---|---|---|---|
设计 Design | --font-weight-regular | Regular 400 | 大多数的正文及描述文字。 |
设计 Design | --font-weight-medium | Medium 500 | 标题文字，或需要突出的文字。 |
设计 Design | --font-weight-bold | Bold/Semibold 600 | 展示性数据，常用于英文或数字加粗的情况。 |