跳至主要内容

Font 字体

文字是重要的信息传达元素之一,它本身的视觉特性和品质影响着信息传递的质量和产品操作的效率。

根据过往的产品设计经验,KPay 提供了通用的字体、字重、行高、段间距建议。


字体

中文

用户通过文字来理解内容和完成工作,科学的字体系统应该具有良好的可读性。

无衬线体更加亲和,现代,清晰便于阅读,为网页中常用的字体类型。

产品优先使用各个系统中默认的无衬线字体。

Mac OS/IOSWindowsAndroid
Pingfang/苹方Microsoft YaHei/微软雅黑Noto Sans/思源黑体

英文

Mac OS/IOSWindowsAndroid
Pingfang/苹方Microsoft YaHei/微软雅黑Noto Sans/思源黑体

数字

Mac OS/IOSWindowsAndroid
KPay Rubik SemiboldKPay Rubik SemiboldKPay Rubik Semibold

字色

ExampleTokenValueUsage
@color-neutral-900#323843一级/标题文字
@color-neutral-800#535D6D二级/正文文字
@color-neutral-700#858A99三级/辅助文字
@color-neutral-500#C4C6CD四级/禁用文字

字号

文字的大小,层级,对比度等都是影响视觉可读性和阅读效率的重要因素。

为保障文本的易读性,界面文字需满足以下要求:

  • 最小可识别文字大小:12px
  • 字体层级:区分文本主副层级,字号差距需保持 2-4px
  • 一个产品中不要有过多的字体层级,建议选择在 3-5 种之间,对于需要用户关注的文本信息可通过增加字重的方式突出。

在字号的选择上,我们将主字号定义为 14px,并提供了不同层级的字号以适配不同信息层级的展示需求。

标题 Title

ExampleTokenValueUsageBasic Properties
基本属性
UI Properties
UI 属性
Long Content
长内容属性

設計系統

--font-title-h156px运营标题-大Font Weight:
Medium(600)
Line Height:
64px
Margin Top: 
--
--

設計系統

--font-title-h240px运营标题-中Font Weight:
Medium(600)
Line Height:
48px
Margin Top:
--
--

設計系統

--font-title-h332px运营标题-小Font Weight:
Medium(600)
Line Height:
40px
Margin Top:
--
--

設計系統

--font-title-h424px标题-大Font Weight:
Medium(600)
Line Height:
32px
Margin Top:
--
--

設計系統

--font-title-h520px标题-中Font Weight:
Medium(600)
Line Height:
28px
Margin Top:
--
--

設計系統

--font-title-h616px标题-小Font Weight:
Medium(600)
Line Height:
24px
Margin Top:
--
--

正文 Body

ExampleTokenValueUsageBasic Properties
基本属性
UI Properties
UI 属性
Long Content
长内容属性

設計系統

--font-body-md14px正文Font Weight:
Regular(400)
Line Height:
22px
Margin Top: 
--
--

設計系統

--font-body-sm12px辅助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
UsageUI Properties

設計系統

--line-height-small12px单行型文本。大多数的正文及标签,常用于紧奏型布局。Line Height:
16px;

設計系統

--line-height-medium14px段落型文本,适用在紧凑型布局场景。Line Height:
22px;

設計系統

--line-height-large16px段落型文本,需要给予透气感时,适用在宽松型场景。Line Height:
24px;

字重

同一个字体的不同字重能传达不同的信息权重和情绪。细的字体给人以细腻、轻快的感觉,而粗体则给人着重和严肃的认知。因此适合的场景使用合适的字重非常重要。

Example
Token
Value
Usage

設計系統

--font-weight-regularRegular 400大多数的正文及描述文字。

設計系統

--font-weight-mediumMedium 600标题文字,或需要突出的文字。