接口打字

1）印刷师在产品中的作用

• 加快扫描速度，减少认知负荷，
• 形成层次结构并帮助导航状态，
• 提高转换（CTA，形式）并减少错误，
• 使界面易于访问且对本地化具有抵抗力。

2）基本参数

Kegl（主文本）：桌面上的16-18 px，移动上的15-16 px。
字符串间距（line-height）：1。45–1.桉文6，1。2–1.35标题。
字符串长度（measure）：45-80个字符；在边栏-36-60。
字母间距（跟踪）：普通文本为0-1％；对于帽子-+2-4％。
对比（WCAG）：普通文本≥ 4。5：1，大/脂肪≥ 3：1。
寄存器：避免永久性ALL CAPS；用于标签/芯片，补偿跟踪。

3）层次结构和尺寸标度

建议采用模块化方法：8-pt网格+印刷量表。

• Display: 40/48 (LH 1.15)
• H1: 32/40 (1.25)
• H2: 24/32 (1.25)
• H3: 20/28 (1.3)
• H4: 18/26 (1.4)
• Body/L: 18/28 (1.55)
• Body/M: 16/26 (1.55)
• Body/S: 14/22 (1.5)
• Caption: 12/18 (1.5)
• Mono/UI: 12–14/18–20

• 相邻水平之间是一个显着的步骤（最低12-16％）。
• 层次结构是通过大小，重量，线条，颜色（考虑对比度）和到相邻块的距离的组合构建的。

4）Capvysota，基线和光学

按标题的顶部对齐项目（图标方便）。
以4/8-pt步骤支持文本基线-水平节奏简化读取。
光学缩进：块上方的标头大于其下方（例如，顶部的+4-8 px）。

5）字幕和可变字体

最小集合：常规，中型，SemiBold（可选Bold）。
不要在UI中使用Ultra-Light/Thin。

• 车身：420-470（光学水平高于400）。
• UI labels: 500–550.
• Headers/CTA: 600–650.
• 当减小kegl-略微增加重量（补偿）。
• 在UI数中禁用装饰性连字；保留西里尔字母/拉丁字母的标准连字。

6）数字，表格和日期

包括总和，系数，计时器，等级的tabular figures（单弦数字）。
+/−标记-始终可见，并具有足够的对比度；不只是用颜色突出显示负值（图标/箭头/脂肪）。
对于现金值,使用狭窄的空格作为精简的放电分隔符（或本地格式）。
在表中，按小数点对齐；对于单声道专栏-单弦字体。
在车轴签名图中，≥ 12 px（移动）和≥ 13-14 px（桌面），LH 1。3;传说≥ 4。5：1到背景。

7）表格,inputs,消息

标签为12-14 px，LH 1。3–1.4、调控器或介质。
Placeholder不应该是"空气灰色"-目标3：1到背景，在视觉上与文本不同。
错误/成功/帮助文本12-14 px；不要仅仅依靠颜色（图标/文本）。

8）黑暗/光明主题

在黑暗话题中，避免#FFF在#000：将背景提升到L≈0。14–0.18，文本减少到L≈0。9-少眩光。
黑暗中的内部可能在+0。05上面是为了舒适。

黑暗中的链接/口音-降低饱和度并将光度提高0。02–0.04.

9）本地化和多语言

选择完全支持西里尔字母/拉丁字母/希腊语，重音符号和货币的家庭。
RTL：图标/对齐镜子，但不包括数字和拉丁字母；测试转移。
Autoperenos（"hyphens：auto"）仅包含在长内容区域中；在UI按钮中-禁止传输。
对于土耳其/阿塞拜疆人，请检查"İ/ı"表格。
对于格鲁吉亚语和泰国语，将基本凯格尔提高1 px（刻字功能）。

10）可用性（A11y）

文本的对比：参见§2。
焦点样式-无颜色可见：底线，框架，阴影，位移。
字体大小是系统缩放的（OS文本大小支持）。
不要仅通过颜色/重量来编码含义-添加显式签名和图标。

11）字体下载和表演

目标：最大限度地减少锁定，提供可预测的FOUT和稳定的CLS。

子集（subset）：拉丁文、西里尔文、数字/符号是单独的文件。
格式："woff2"（主要），"woff"作为后退。
"字体显示：交换"（或次要家庭的"选择性"）。

html
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Inter-UI-subset. woff2">

可变字体而不是3-4静态-重量通常更有利可图。
预算：≤ 150-200 KB到关键路径（在gzip/brotli之后）。
渲染：避免文本上的多个阴影/面具；节省使用系统效果。

12）印刷代币（设计系统）

type. scale.{role}     # h1, h2, body, caption, mono type. weight.{role}    # regular, medium, semibold type. leading.{role}    # line-height type. tracking.{role}   # letter-spacing type. feature. numeric   # tabular, lining

json
{
"type": {
"family": { "ui": "InterVariable", "mono": "JetBrainsMonoVariable" },
"scale": { "h1": 32, "h2": 24, "h3": 20, "body": 16, "caption": 12 },
"leading": { "h1": 40, "h2": 32, "h3": 28, "body": 26, "caption": 18 },
"weight": { "body": 450, "label": 520, "cta": 620 },
"numeric": { "figures": "tabular", "zeros": "slashed" }
}
}

css
:root {
--font-ui: "InterVariable", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: "JetBrainsMonoVariable", ui-monospace, SFMono-Regular, Menlo, monospace;

--fs-h1: 32px; --lh-h1: 40px; --w-h1: 600;
--fs-h2: 24px; --lh-h2: 32px; --w-h2: 600;
--fs-h3: 20px; --lh-h3: 28px; --w-h3: 550;
--fs-body: 16px; --lh-body: 26px; --w-body: 450;
--fs-caption: 12px; --lh-caption: 18px; --w-caption: 450;

--tracking-caps: 0. 04em;
--tracking-default: 0em;
}
.u-num {
font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

13）Verstka和节奏

8-pt垂直模块；段落之间的距离=1 ×基本步骤。
清单：标记缩排与文本基线对齐。
按钮和字段-高度是基本网格线（例如40/48/56 px）的倍数。

14） iGaming特点（研讨会）

系数/赔率，平衡，计时器-在关键列中使用tabular数字monoshirin。
排名/排名：按等级排列，单一货币格式，明确的"↑/↓"。
负责任的通知（18+，限制，风险）-对比度最低的AAA，不使用ALL CAPS。
促销横幅：仅在带有对比度控制的专栏/覆盖物上的文本。

15）反模式

Light/Thin on little cegles。
颜色背景上的灰色文本,不检查对比度。
两个或更多耳机"为了美丽"。

长线（>90个字符）和密集线路<1。35.

表中比例宽度的数字/"跳跃"总和。
按键/标签强制携带。

16）检票单review

可读性

• Body 16-18 px；LH ≥ 1.45.
• 字符串45-80的长度。

层次结构

• 步幅≥ 12%的比额表；缩进与网格一致。

数字/表

• 总和/系数的Tabular-nums；小数对齐。

可用性

• 实现了WCAG的对比；焦点样式在没有颜色的情况下可见。

表演表演

[] Subset/woff2; `font-display: swap`;预算≤ 200 KB。

本地化

• 支持西里尔字母/拉丁字母/RTL；已验证的携带/变音符号。

17） A/B和指标

测试：Body cegle ± 1 px，标题音阶步骤，CTA重量，线间。
测量：read time, scroll depth, CTR CTA,表单错误,CLS（文本稳定性）。

简短摘要

打字机是接口的骨架。设置可预测的音阶，保持对比度和节奏，使用可变字体和图形，优化下载。然后，UI将快速阅读，稳定运行并扩展到主题和语言。