排版

kit 的排版以 --pt-* 设计变量和这一页规范交付。 没有排版组件，也没有 .pt-text-xs 这类全局工具类 —— 组件内部的排版已经全部走变量， 使用方的页面排版用同一组变量即可。

数值来自仓库内的 tokens 构建包，完整清单见设计变量表。

字体栈

tokens 只声明一个变量 --pt-font-sans，它的值由语言决定：

适用范围	--pt-font-sans 的值
默认（英文及其它所有语言）	'Inter', system-ui, -apple-system, sans-serif
:lang(zh)	'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif
:lang(ja)	'Inter', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif

等宽字体另有 --pt-font-mono：ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace，不随语言变化。

Inter 在三套栈里都排第一：拉丁字母和数字三语统一用 Inter 渲染，Inter 里没有的 CJK 字符才往后落到 Noto Sans SC / JP 或系统字体。同一段中日混排里的数字、英文单词因此字形一致。

<html lang> 如何起作用

1. tokens.css 里只有三条规则：:root 给默认栈，:lang(zh) 与 :lang(ja) 各覆盖一次 --pt-font-sans。 :lang() 按语言前缀匹配，zh-CN、zh-TW 都命中 :lang(zh) —— 目前繁体中文也走 SC 栈。 英文没有单独的规则，lang="en" 就是默认栈。
2. 把变量落到 font-family 上是 @ptengine/ui 全局样式表的事： [lang] { font-family: var(--pt-font-sans), system-ui, sans-serif; }。<html lang="…"> 本身就带 lang 属性，所以整页继承这套栈；组件影子树内部则由 :host { font-family: var(--pt-font-sans) } 继承。
3. 嵌套的语言孤岛也会重新解析：在中文页面里写 <p lang="ja">…</p>，这一段的 --pt-font-sans 会切到 JP 栈，里面的汉字按日文字形渲染。

kit 只声明字体栈，不加载字体文件

Inter、Noto Sans SC / JP 需要使用方自己加载（<link>、fontsource、next/font 都行）。 没加载时按栈往后落到系统字体，不会报错，只是字形与设计稿不同。

字阶

十四档，字号与行高按档名一一配对：--pt-font-size-<档> 永远和 --pt-lh-<档> 一起用。 下表直接从 tokens 渲染，预览引用的是页面上真实的变量值（本站 lang="zh-CN"，所以预览走的是中文栈）。

档位	字号	行高	预览
2xs	--pt-font-size-2xs 12px	--pt-lh-2xs 16px	排版 Aa あ 12
xs	--pt-font-size-xs 13px	--pt-lh-xs 20px	排版 Aa あ 12
sm	--pt-font-size-sm 14px	--pt-lh-sm 20px	排版 Aa あ 12
base	--pt-font-size-base 16px	--pt-lh-base 24px	排版 Aa あ 12
lg	--pt-font-size-lg 18px	--pt-lh-lg 28px	排版 Aa あ 12
xl	--pt-font-size-xl 20px	--pt-lh-xl 32px	排版 Aa あ 12
2xl	--pt-font-size-2xl 24px	--pt-lh-2xl 36px	排版 Aa あ 12
3xl	--pt-font-size-3xl 28px	--pt-lh-3xl 40px	排版 Aa あ 12
4xl	--pt-font-size-4xl 32px	--pt-lh-4xl 48px	排版 Aa あ 12
5xl	--pt-font-size-5xl 40px	--pt-lh-5xl 56px	排版 Aa あ 12
6xl	--pt-font-size-6xl 48px	--pt-lh-6xl 72px	排版 Aa あ 12
7xl	--pt-font-size-7xl 56px	--pt-lh-7xl 72px	排版 Aa あ 12
8xl	--pt-font-size-8xl 64px	--pt-lh-8xl 96px	排版 Aa あ 12
9xl	--pt-font-size-9xl 72px	--pt-lh-9xl 128px	排版 Aa あ 12

xs 是 13px，不是 12px

12px 是 2xs 档。从 Tailwind 默认值（text-xs = 12px）迁过来的代码最容易在这里偏 1px。

控件另有一组跟尺寸档联动的字号，不在上表里：--pt-control-font-size-sm / md / lg 分别是 12 / 13 / 14px， 与控件高度 24 / 32 / 40px 配套（见设计变量表）。按钮、输入框、选择器用的是这组。

字重

tokens 只有三档：

变量	值	角色
--pt-font-weight-semibold	600	标题
--pt-font-weight-medium	500	标签、按钮文字、表头等次级强调
--pt-font-weight-normal	400	正文

组件里的实际用法（以代码为准）：

字重	用在哪里
600	标题：pt-modal、pt-sheet、pt-drawer、pt-card；分组标题：pt-menu-group、pt-menu-label、pt-option-group；pt-badge 的文字（例外，照源包）
500	按钮类文字：pt-button、pt-toggle、pt-tab、pt-pagination-item；标签类：pt-label、pt-field 与 pt-field-set 的标签；pt-alert 与 pt-item 的标题、pt-accordion-item 触发器、pt-command-group 标题、轻提示标题与按钮；pt-table 表头与表尾、pt-kbd、面包屑当前项；pt-empty-state 标题（例外，照源包）
400（显式）	显式重置回正文字重的地方：弹层面板（utils/popup-panel.css，不继承触发元素所在上下文的字重）、pt-field 的说明与错误文字、轻提示正文、面包屑分隔符
400（UA 默认）	pt-input / pt-textarea 的输入内容、pt-select 触发器文字 —— 原生表单控件只 font-family: inherit，字重取 UA 默认的 normal，不随宿主变
不声明	其余文字：选项、弹窗正文与描述、Tooltip、复选框 / 开关的标签文字 —— 继承宿主页面，页面没改过时是 400

与「600 标题 / 500 标签与选中项 / 400 正文」这条经验规则有几处出入，写在这里以免照抄出错：

• 正文不是固定 400。:host 只设 font-family，只有上表「400（显式）」那几处声明了 --pt-font-weight-normal， 所以放在 font-weight: 500/600 的容器（标题、强调文本）里时，上表「不声明」那一行的文字会跟着变粗 （输入内容不会，见上表「400（UA 默认）」那一行）。 需要固定时在外层容器上把 font-weight 设回 var(--pt-font-weight-normal)。
• 选中项不加粗。pt-option 这类列表项的选中态只靠行尾的勾选标记表达，文字不变色、不改字重 （packages/ui/src/utils/list-item.css 的约定）。选中项的底色见交互状态映射。
• 两个照源包（design-components）定的例外，不是笔误，迁移时不要「统一」掉：
  • pt-badge 的文字用 600，不是标签类文字通常的 500。
  • pt-empty-state 的标题用 500，不是标题通常的 600（源包 EmptyTitle 是 font-medium）。

正文默认档

kit 不设置页面级的默认字号。 tokens.css 只输出变量，@ptengine/ui 的全局样式表只设 font-family， <body> 的 font-size / line-height 完全由使用方决定。

组件各自声明字号，按用途是这几档：

用途	字号 / 行高	变量
控件默认档（md）：按钮、输入框、多行输入框、选择器	13 / 20	--pt-control-font-size-md + --pt-lh-xs
小标签：Badge、空状态描述；表格（照源包）	13 / 20	--pt-font-size-xs + --pt-lh-xs
成段内容：弹窗正文与描述、下拉选项、AI 输入框	14 / 20	--pt-font-size-sm + --pt-lh-sm
复选框 / 开关的标签文字	14 / 20	--pt-control-font-size-lg + --pt-lh-sm
辅助信息：Tooltip、小号控件（sm）	12 / 16	--pt-font-size-2xs + --pt-lh-2xs（控件 sm 为同值的 control 档）
弹窗标题	16 / 24	--pt-font-size-base + --pt-lh-base

页面正文如果要和控件的默认档对齐，用 xs（13 / 20）；成段阅读的内容区与组件内部保持一致用 sm（14 / 20）。

使用方要做的三件事

1. 加载 kit 样式表拿到变量：引入 @ptengine/ui/dist/ptengine-ui/ptengine-ui.css。 漏了不报错，只是所有 var(--pt-*) 都取不到值。

2. 只用变量写排版：

   .article {
     font-size: var(--pt-font-size-sm);
     line-height: var(--pt-lh-sm);
     font-weight: var(--pt-font-weight-normal);
   }

3. 不要在组件外再定义一套字阶。 自建的 $font-size-body: 13px 或另一份 fontSize 配置， 迟早会和 tokens 不同步。缺某个字号时先确认十四档里真的没有，再提给设计规范，而不是就地加一档。

相关：主题与设计变量 · 圆角 · 设计变量表