Font 字体
文字是重要的信息传达元素之一，它本身的视觉特性和品质影响着信息传递的质量和产品操作的效率。
根据过往的产品设计经验，KPay 提供了通用的字体、字重、行高、段间距建议。
字体
中文
用户通过文字来理解内容和完成工作，科学的字体系统应该具有良好的可读性。
无衬线体更加亲和，现代，清晰便于阅读，为网页中常用的字体类型。
产品优先使用各个系统中默认的无衬线字体。
| Mac OS/IOS | Windows | Android |
|---|---|---|
| Pingfang/苹方 | Microsoft YaHei/微软雅黑 | Noto Sans/思源黑体 |
英文
| Mac OS/IOS | Windows | Android |
|---|---|---|
| Pingfang/苹方 | Microsoft YaHei/微软雅黑 | Noto Sans/思源黑体 |
数字
| Mac OS/IOS | Windows | Android |
|---|---|---|
| KPay Rubik Semibold | KPay Rubik Semibold | KPay Rubik Semibold |
字色
| Example | Token | Value | Usage |
|---|---|---|---|
@color-neutral-900 | #323843 | 一级/标题文字 | |
@color-neutral-800 | #535D6D | 二级/正文文字 | |
@color-neutral-700 | #858A99 | 三级/辅助文字 | |
@color-neutral-500 | #C4C6CD | 四级/禁用文字 |
字号
文字的大小，层级，对比度等都是影响视觉可读性和阅读效率的重要因素。
为保障文本的易读性，界面文字需满足以下要求：
- 最小可识别文字大小：
12px。 - 字体层级：区分文本主副层级，字号差距需保持
2-4px。 - 一个产品中不要有过多的字体层级，建议选择在 3-5 种之间，对于需要用户关注的文本信息可通过增加字重的方式突出。
在字号的选择上，我们将主字号定义为 14px，并提供了不同层级的字号以适配不同信息层级的展示需求。
标题 Title
| Example | Token | Value | Usage | Basic Properties 基本属性 | UI Properties UI 属性 | Long Content 长内容属性 |
|---|---|---|---|---|---|---|
設計系統 | --font-title-h1 | 56px | 运营标题-大 | Font Weight: Medium(600) | Line Height: 64px Margin Top: -- | -- |
設計系統 | --font-title-h2 | 40px | 运营标题-中 | Font Weight: Medium(600) | Line Height: 48px Margin Top: -- | -- |
設計系統 | --font-title-h3 | 32px | 运营标题-小 | Font Weight: Medium(600) | Line Height: 40px Margin Top: -- | -- |
設計系統 | --font-title-h4 | 24px | 标题-大 | Font Weight: Medium(600) | Line Height: 32px Margin Top: -- | -- |
設計系統 | --font-title-h5 | 20px | 标题-中 | Font Weight: Medium(600) | Line Height: 28px Margin Top: -- | -- |
設計系統 | --font-title-h6 | 16px | 标题-小 | Font Weight: Medium(600) | Line Height: 24px Margin Top: -- | -- |
正文 Body
| Example | Token | Value | Usage | Basic Properties 基本属性 | UI Properties UI 属性 | Long Content 长内容属性 |
|---|---|---|---|---|---|---|
設計系統 | --font-body-md | 14px | 正文 | Font Weight: Regular(400) | Line Height: 22px Margin Top: -- | -- |
設計系統 | --font-body-sm | 12px | 辅助 | Font Weight: Regular(400) | Line Height: 16px 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 |
|---|---|---|---|---|
設計系統 | --line-height-small | 12px | 单行型文本。大多数的正文及标签，常用于紧奏型布局。 | Line Height: 16px； |
設計系統 | --line-height-medium | 14px | 段落型文本，适用在紧凑型布局场景。 | Line Height: 22px； |
設計系統 | --line-height-large | 16px | 段落型文本，需要给予透气感时，适用在宽松型场景。 | Line Height: 24px； |
字重
同一个字体的不同字重能传达不同的信息权重和情绪。细的字体给人以细腻、轻快的感觉，而粗体则给人着重和严肃的认知。因此适合的场景使用合适的字重非常重要。
| Example | Token | Value | Usage |
|---|---|---|---|
設計系統 | --font-weight-regular | Regular 400 | 大多数的正文及描述文字。 |
設計系統 | --font-weight-medium | Medium 600 | 标题文字，或需要突出的文字。 |