接口打字

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將快速閱讀，穩定運行並擴展到主題和語言。