インターフェイスタイポグラフィ

1）製品におけるタイポグラフィの役割

• スキャンをスピードアップし、認知負荷を軽減します、
• 階層を形成し、状態をナビゲートするのに役立ちます、
• 変換（CTA、フォーム）を増加させ、エラーを低減します、
• インターフェースにアクセスしやすく、ローカリゼーションに耐性があります。

2）基本的なパラメータ

ピン（本文）：デスクトップで16-18 px、モバイルで15-16 px。
線の高さ：1。45–1.6テキストの場合、1。2–1.タイトルのための35。
線の長さ（測定）：45-80文字；サイドバー-36-60。
追跡：平文のための0-1％；カプセルの場合-+2-4％。
コントラスト（WCAG）-プレーンテキスト≥ 4。5：1、粗い/脂肪≥ 3：1。
登録：永久的なすべての帽子を避けて下さい；タグ/チップの使用、追跡を補償します。

3）階層とサイズのスケール

モジュラーアプローチをお勧めします：8-ptグリッド+タイポグラフィックスケール。

• 表示：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)
• ボディ/L： 18/28（1。55)
• ボディ/M： 16/26（1。55)
• ボディ/S： 14/22（1。5)
• キャプション：12/18（1。5)
• モノ/UI： 12-14/18-20

• 近隣のレベル間-顕著なステップ（少なくとも12-16％）。
• 階層は、サイズ、重量、リード、色（コントラストを考慮して）と近隣のブロックへの距離の組み合わせによって構築されます。

4）帽子の高さ、ベースラインおよび光学

要素をヘッダーのキャップの高さに合わせます（アイコンで便利）。
4/8 ptのテキストベースラインを維持します。リズムでも読みやすくなります。
光インデント：ブロックの上の見出しはその下よりも大きくなります（例：上の+4-8 px）。

5）スタイルと可変フォント

最小セット：レギュラー、ミディアム、セミボールド（太字オプション）。
UIでUltra-Light/Thinを使用しないでください。

• ボディ：420-470（光学平らより400）。
• UIラベル：500-550。
• ヘッダー/CTA： 600-650。
• サイズが小さくなると、重量（補償）をわずかに増やします。
• UI番号の装飾的合字を無効にします。標準的なキリル文字/ラテン語の合字を保持します。

6）数字、テーブル、日付

金額、係数、タイマー、評価の表形式を含める。
+/−標識は常に表示され、十分なコントラストがあります。色（アイコン/矢印/太字）だけでなく、負の値をハイライトします。
通貨の値の場合は、狭いスペースを薄いビット区切り文字（またはローカルフォーマット）として使用します。
テーブルでは、小数点に整列します。モノラルカラム-モノスペースフォント。
軸のシグネチャーグラフ≥ 12 px（モバイル）と≥ 13-14 px（デスクトップ）、LH 1です。3;伝説≥ 4。5：1背景に。

7）フォーム、入力、メッセージ

ラベル12-14 px、 LH 1。3–1.4、規則的か媒体。
プレースホルダーは「灰色の空気」であるべきではありません-目標は3：1で、テキストと視覚的に区別できます。
エラー/成功/ヘルプテキスト12-14 px；色（アイコン/テキスト）だけに頼らないでください。

8）暗い/軽いテーマ

暗いトピックでは、#000の#FFFを避けてください：背景をL≈0に上げます。14–0.18、テキストをL≈0に下げます。9-より少ないまぶしさ。
暗闇でのリードは+0になります。快適さのために上の05。

リンク/暗闇のアクセント-飽和を減らし、明るさを0増加させます。02–0.04.

9）ローカライズと多言語化

完全なキリル文字/ラテン語/ギリシャ語、アクセントマーク、通貨サポートを持つ家族を選択してください。
RTL：ミラーアイコン/アラインメント、しかしない数字とラテン；テスト転送。
長いコンテンツゾーンにのみ含める自動転送（'hyphens： auto'）；UIボタンで-転送を禁止します。
トルコ語/アゼルバイジャン語の場合は「、Terminal」のフォームをご確認ください。
グルジア語とタイ語では、ベースピンを1 px（スタイル機能）で上げます。

10）空室状況（A11y）

テキストのコントラスト：第2章を参照。
フォーカススタイル-色なしで表示：下線、ボーダー、影、オフセット。
フォントサイズは体系的に拡大縮小されます（OSのテキストサイズをサポート）。
色/重量だけで意味をエンコードしないでください-明示的なキャプションとアイコンを追加します。

11）フォントの読み込みとパフォーマンス

目標：閉塞を最小限に抑えるために、予測可能なFOUTと安定したCLSを提供します。

サブセット：ラテン語、キリル文字、数字/記号-個々のファイル。
フォーマット：'woff2'（メイン）、'woff'をフォールバックとして指定します。

'font-display： swap'（またはセカンダリファミリーの'optional'）

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

3-4静的の代わりに可変フォント-多くの場合、重量でより有益。
予算：クリティカルパス（gzip/brotliの後）の合計150-200 KBを≤します。
レンダリング：テキスト上の複数の影/マスクを避けます。システム効果を控えめに使用して下さい。

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）レイアウトとリズム

8 ptの垂直モジュール；段落間の距離=1 ×基本ステップ。
Lists-マーカーのインデントがテキストのベースラインに整列されます。
「ボタンとフィールド」（Buttons and fields）-高さは基準グリッド線の倍数です（例：40/48/56 px）。

14） iGamingの特異性（ワークショップ）

オッズ/オッズ、バランス、タイマー-表形式の数字を使用し、重要な列に単置します。
リーダー/格付け：カテゴリー別のレベリング、統一された通貨フォーマット、明示的な「→」。
重要な通知（18+、制限、リスク）-対照的に最小AAAは、すべてのCAPSを使用しません。
プロモーションバナー：コントラスト制御のスリップ/オーバーレイのテキストのみ。

15）アンチパターン

小さいピンのライト/薄い。
コントラストをチェックせずに色の背景に灰色のテキスト。
美しさのための2つ以上のヘッドセット。

長い線（>90文字）と密な線の高さ<1。35.

テーブル/」ジャンプ「合計の比例幅数。
ボタン/ラベルで転送をプッシュします。

16）レビューチェックリスト

可読性について

• ボディスーツ16-18 px；LH ≥ 1。45.
• 文字列の長さは45-80文字です。

ヒエラルキー

• 増分でスケール≥ 12％；グリッドと一致するインデント。

数字/テーブル

• 和/係数の表形式-数字；10進数の位置合わせ。

可用性について

• 達成されるWCAGの対照；フォーカススタイルは色なしで表示されます。

パフォーマンス

• Subset/woff2； 'font-display： swap'；予算≤ 200 KBです。

ローカリゼーション

• キリル文字/ラテン語/RTLサポート；ハイフネーション/ダイアクリティクスがチェックされました。

17） A/Bおよび指標

テスト：ボディ± 1 pxピン、見出しのスケールピッチ、導くCTAの重量。
測定：読み取り時間、スクロール深度、CTR CTA、フォームエラー、CLS（テキスト安定性）。

概要

タイポグラフィはインターフェイスの骨格です。予測可能なスケールを設定し、コントラストとリズムを保ち、可変フォントと表形式の数値を使用し、読み込みを最適化します。その後、UIはすぐに読み取られ、安定して動作し、テーマや言語に拡張されます。