font pack · cjk-thin-type-system v1.0.0
THIN
一套中文细体排版语言:字号 4 档 · 字重 2 档 · 字距 3 档 · 行高 3 档 · 文字影 2 档。组件只继承,不再各写一套。
档位阶梯
giant · clamp(44px, 8.2vw, 122px) · w600 · lh 1.4 · 双层影
THIN
display · clamp(28px, 3.2vw, 44px) · w200 · lh 1.4 · 双层影
细体在大字号上才不溶解
title · clamp(20px, 2vw, 22px) · w200 · ls .02em · lh 1.35
区块标题 / 卡片标题
body · 17px · w200 · ls 0 · lh 1.6 · 单层影
正文十七字,中文正文不加字距,行高一点六。
label · 12px · w400 · ls .12em · 单层影(地板档)
eyebrow · 12px floor
字号 4 档 · 字重阶梯
| 字号档 | 值 | 字重 | 字距 | 行高 | 文字影 |
|---|---|---|---|---|---|
| giant | clamp(44px, 8.2vw, 122px) | 600 | 0 | 1.4 | 双层(≥28px) |
| display | clamp(28px, 3.2vw, 44px) | 200 | 0 | 1.4 | 双层 |
| title | clamp(20px, 2vw, 22px) | 200 | .02em | 1.35 | 单层 |
| body | 17px(细体地板) | 200 | 0 | 1.6 | 单层 |
| label | 12px(全站地板) | 400 | .12em | ≥1.35 | 单层 |
字距 3 档 · 行高 3 档 · 影 2 档
字距 0 / .02em / .12em
正文不加字距 zero
标题轻微开一点 .02em
label letter spacing
行高 1.4 / 1.35 / 1.6
大字行高一点四,标语与字标用。
标题行高一点三五,全站最小行高,不许再压。
正文行高一点六,中文正文的舒适区,四行以内读起来最稳。
文字影 单层 / 双层
单层影
双层扩散影
细体只配单层影;第二层扩散影只给 ≥28px —— 发丝笔画加双层影会糊成一团。
地板与硬规则
- 中文最小字号 12px;12px 起必须 400 字重,不许用细体。
- 越大越细:
200 ≥17px/300 ≥14px/400 ≤12px;同一字号只挂一种字重。 - 最小行高
1.35,行高绑字号档、不绑组件。 - 禁用
vw外推上限:响应式写进clamp()中段,上限一律绝对单位。 - CJK 禁斜体、禁
border-bottom当前下划线;中文正文禁两端对齐。 - 按钮不吃继承:
button,input,select,textarea{font:inherit}。 - 拉丁显示字族只给纯拉丁字标 —— 给中文元素会静默回落宋体。