文档返回官网官网

文档基础

字体与字号阶梯

中英文站的字体角色、字号阶梯、行高。

现行· VI Spec v1.2 · 来源 HAJI-8 · 2026-10-23

字号阶梯样例

样例用站点自托管的字体渲染,每行可复制对应的 CSS 简写。

Display 72 · Noto Sans SC Black 900 · 行高 1.12

把品牌,做成大家抢着要的东西

72px / 900

H2 48 · Noto Sans SC Black 900

四类周边,一站搞定

48px / 900

H3 24 · Noto Sans SC Bold

品牌周边定制

24px / 700

Lead 18 · Noto Sans SC Regular · 行高 1.6

从创意、打样到量产交付,50 件起订,最快 7 天打样。

18px / 400

Body 16 / Small 14 / Tiny 13 · Noto Sans SC

正文最小 14px;辅助说明可用 13px,但不用于关键信息。

16px / 400

Number · Unbounded Bold

300+ · 120万+ · 7 天

40px / 700

Eyebrow 14 · Unbounded SemiBold · 字距 1.5

WHAT WE DO

14px / 600

字体栈

全部是 Google Fonts,免费可商用。字体栈与官网 global.css 一致。等宽字体只用于代码和参数值,不用于标题,不违反红线 12。

用在哪里CSS
中文站font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif
英文站标题font-family: 'Unbounded', 'Noto Sans', 'Noto Sans SC', system-ui, sans-serif
英文站正文font-family: 'Noto Sans', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif
代码和参数值(文档专用)font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace

字体角色

角色中文站英文站
展示标题(Hero、区块标题)Noto Sans SC Black 900Unbounded Bold 700
小标题、按钮Noto Sans SC 700Unbounded 600 / 700
正文Noto Sans SC 400 / 500Noto Sans 400 / 500
数字、中文里夹的英文词Unbounded BoldUnbounded Bold

Spec 原文

全部是 Google Fonts,免费可商用。

角色 中文站 英文站
展示标题(Hero、区块标题) Noto Sans SC Black 900 Unbounded Bold 700
小标题、按钮 Noto Sans SC 700 Unbounded 600 / 700
正文 Noto Sans SC 400 / 500 Noto Sans 400 / 500
数字、中文里夹的英文词 Unbounded Bold Unbounded Bold

字号阶梯

  • 中文:72 / 48 / 32 / 24 / 18 / 16 / 14,另有 13 只用于标签和辅助说明。
  • 英文:Hero 56、区块标题 40,这两档字距 −1px;其余和中文一样。
  • 正文行高 1.6。

站酷快乐体(ZCOOL KuaiLe)停用。 它的手写稚气和自绘几何字标不是一家人,中文标语也已经用 Noto Sans SC Black。中文标题和标语用同一个字族。

Token 板

中文站和英文站各一版,点按钮切换。

设计 Token 板(中文)(中文站) · 1442 × 1971下载原图 · 304 KB
Design tokens board (EN)(英文站) · 1442 × 1963下载原图 · 324 KB
目录

下载原图