type

タイポグラフィ

インターフェースの大半はテキストです。テキストがありきたりなら、インターフェースもありきたりになります。色や動きをどれだけ加えても、それは隠せません。

フォントファミリーを選ぶ

インターフェースにはサンセリフを1種類。データ、コード、ショートカット、システムらしく見せたいラベルには等幅フォントを1種類。ディスプレイ書体を使うのはマーケティングページだけで、サンセリフでは表現できない場合に限ります。

用途に合わせて選びます。

用途	特徴	候補
高密度なプロダクト UI	ニュートラル、開口部が狭い、12〜14pxで読みやすい、表形式の数字	Geist、Inter、SF 系のグロテスク体
読み物（ドキュメント、記事）	高めのエックスハイト、広めの字間、利用可能ならオプティカルサイズ	Source 系のヒューマニスト体、または同じサンセリフを16px以上で使い、行間を広めにする
データ、コード、ラベル	0/Oと1/lを見分けやすい等幅フォント、合字は任意	Geist Mono、JetBrains Mono、Berkeley Mono
ディスプレイ	独自の個性があり、サンセリフと似せるのではなく、コントラストで組み合わせる	ブランドに合わせて選んだもの

プロジェクトにすでにフォントファミリーがあるなら、それを使います。フォントの変更は修正ではなく、デザインの刷新です。

避けること：プロダクト UI で3種類以上のフォントファミリーを使うこと、本文に装飾書体を使うこと、「親しみやすさ」を演出するために丸みのある書体を使うこと。

1つではなく2つのスケール

プロダクト UI と読み物向け UI では、基準となるサイズが異なります。画面がどちらに当たるかを選びます。

プロダクト向けスケール（ツール、ダッシュボード、管理画面、リスト）

役割	サイズ	太さ	行間	字間
ページタイトル	20〜22px	500	1.15	−0.02em〜−0.03em
セクションタイトル	14〜15px	500	1.3	−0.015em
行／本文	13px	400	1.45	−0.003em
補足	12〜12.5px	400	1.5	0
ラベル、メタ情報、等幅	10.5〜11px	400〜500	1.3	大文字の場合は0.04〜0.1em
テーブル内の数字	本文サイズ、等幅または表形式	400	—	0

フォントファミリーが適している場合、本文を13pxにするのが高密度なツールには最適です。人が読む必要のあるテキストを10.5px未満にしないでください。

読み物向けスケール（ドキュメント、記事、長文の設定画面）

役割	サイズ	太さ	行間	字間
H1	28〜36px	500〜600	1.1	−0.025em
H2	20〜24px	500	1.2	−0.02em
H3	16〜18px	500	1.3	−0.01em
本文	16〜17px	400	1.6	0
小サイズ	14px	400	1.5	0

目安は55〜70文字です。ページではなく、テキストコンテナにch単位のmax-widthを設定します。

サイズに頼らない階層

生成された UI でよくある間違いは、すべての要素のサイズを変えることです。ほとんどの画面では3段階のサイズで十分です。次の方法で階層を作ります。

1. 色：前景色を4段階にします。プライマリ、セカンダリ、ターシャリ、淡色です。メタ情報は小さくするのではなく、同じサイズのまま色を薄くします。
2. 太さ：400と500を使います。タイトルにはまれに600を使います。UI フォントで700を使うことはほとんどありません。小さいサイズでは文字がつぶれて見えます。
3. 余白：タイトルとその後に続く内容の間は、行と行の間より広く空けます。
4. 大文字・小文字とフォントファミリー：字間を広げた等幅の大文字でセクションラベルを表すと、サイズや太さを上げなくてもラベルとして認識されます。

1行に、プライマリカラーで13px／500の名前、セカンダリカラーで12.5px／400の説明、淡色の等幅10.5pxでドメインを配置できます。3段階、2種類のサイズです。

行間

サイズが大きくなるほど狭くします。おおよその目安は次のとおりです。

• 10〜12px：1.4〜1.5
• 13〜14px：1.45
• 16〜18px：1.5〜1.6（読み物）、1.4（UI）
• 20〜24px：1.2〜1.3
• 28px以上：1.05〜1.15

行間の誤りが最初に目立つのは、2行に折り返されるタイトルです。まずそのケースに合わせて設定し、1行の場合も適切に見えるか確認します。

字間

サイズが大きくなるほど負の値にし、小型大文字や等幅のラベルにはわずかに正の値を設定します。

• 24px以上：−0.02em〜−0.04em
• 14〜20px：−0.01em〜−0.02em
• 12〜14px：0〜−0.005em
• 10〜11pxの大文字ラベル：+0.06em〜+0.1em
• すべてのサイズの等幅フォント：0

本文の字間を正の値にしないでください。小文字の単語に字間を設定しないでください。

数字

列に並ぶ数字、時間とともに変化する数字、ほかの数字と比較する数字には、すべて表形式の数字を使います。

.tabular { font-variant-numeric: tabular-nums; }

カウンター、価格、タイムスタンプ、行数、パーセンテージ、キーボードショートカットが該当します。モノスペースは同じ特徴をさらに強めたもので、識別子（ID、ハッシュ、ホスト名）のような値にはモノスペースを、数量には表形式のサンセリフ体を使います。

0とOを見間違える可能性がある場合は、モノスペースでスラッシュ付きゼロ（zero機能）を使います。

OpenType

書体に備わっている機能を、サイト全体で有効にします。

html { font-feature-settings: "ss01", "cv11"; } /* per family: check its specimen */

確認しておきたい一般的な機能として、よりニュートラルな見た目にするための代替字形aとg、InterとGeistの一階建てのaであるcv11、開いた数字のss01、大文字と句読点を組み合わせるcase、（上記のCSSプロパティと同じ）tnum、チームが希望する場合はコード用合字のcaltがあります。

レンダリング

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

macOSでアンチエイリアスを有効にすると、暗い背景上の明るいテキストが細く、すっきり見えます。明るい背景では、ほぼ影響ありません。ルートで一度だけ設定します。

折り返しと切り詰め

• タイトルと見出し：text-wrap: balance。行末に短い語だけが残るのを防ぎます。
• 段落：対応している場合はtext-wrap: prettyを使います。
• 1行に収める必要がある行：truncate（overflow: hidden; text-overflow: ellipsis; white-space: nowrap）を使い、フレックスの子要素にmin-width: 0を指定します。そうしないと切り詰められません。
• カードの説明：line-clamp: 2を使い、3行以上にはしません。3行必要なら、レイアウトに問題があります。
• ユーザーが操作するうえで必要な情報（認識すべき名前やエラーなど）は切り詰めないでください。折り返します。
• 長い本文にはhyphens: autoを使い、langを設定してハイフンで改行します。UIでは使いません。

テキスト内のリンク

下線を付け、text-underline-offset: 3pxと、薄い段階のtext-decoration-colorを使い、ホバー時に明るくします。色だけでリンクを表現してはいけません。項目のリストでは行全体をリンクにし、下線は付けません。

ラベル、ボタン、入力欄

• すべてセンテンスケースにします。「Save changes」のようにし、「Save Changes」とはしません。大文字のみを使うのは、小さなモノスペースのセクションラベルに限ります。
• ボタンのテキスト：プロダクトUIでは13px/500とし、行の名前と同じサイズにします。周囲の本文より小さくしてはいけません。
• 入力欄のテキスト：タッチデバイスでは16pxにします。そうしないと、ブラウザーがページをズームします。デスクトップでも同じサイズを使い、環境によって入力欄のサイズが変わらないようにします。14〜15pxも妥当な妥協点で、タッチデバイス向けのメディアクエリを併用します。
• プレースホルダー：第3段階の色を使い、唯一のラベルとして使ってはいけません。

フォントの読み込み

• セルフホストするか、フレームワークのフォントローダーを使います。どちらもサイズ調整と組み合わせることで、font-display: swapを適用でき、レイアウトシフトを防げます。
• ファーストビューで使うウェイトだけをプリロードします。6つではなく、2つにします。
• ファミリーに可変フォントがある場合は、それを使います。1つのファイルですべてのウェイトを扱え、必要ならウェイトをアニメーション化することもできます（おそらく必要になるでしょう）。
• メトリクスが一致するフォールバックのフォントスタック（size-adjust、ascent-override）を指定し、フォント切り替え時に再レイアウトされないようにします。

デフォルト設定のままのタイポグラフィの兆候

兆候	対処
1つの画面に5種類のフォントサイズがある	3種類に減らし、色とウェイトで階層を表現する
どこも太字になっている	強調には500を使い、通常は400にする。太字は1画面につき1か所にする
ボタンがタイトルケースになっている	センテンスケースにする
32pxの見出しの行の高さが1.5になっている	1.1にする
表の数字がプロポーショナル数字になっている	tabular-numsを使う
2行のタイトルの行末に短い語だけが残っている	text-wrap: balanceを使う
コントラストが不足したグレーのテキストがある	薄い段階の色は装飾のみに使う。補助テキストは4.5:1のコントラスト比を満たす必要がある
小文字に文字間隔が設定されている	字間を削除する。字間を広げるのは大文字のモノスペースに限る

カタログから

• Geist — 製品 UI 向けに設計されたサンセリフ、モノスペース、ピクセルの各ファミリーです。上記のスケールは、これに近い書体を想定しています。
• Google Fonts、Pangram Pangram、Klim、ABC Dinamo — 優れたフォントファミリーを見つけられます。
• Modular Scale、Utopia — あれこれ推測する代わりに、スケールを一度作成できます。
• Wakamai Fondue — フォントが実際に備えている OpenType 機能を確認できます。
• Better Web Type — 読みやすい文字サイズの基本を学べます。
• 詳細は stealth.pm/assets と stealth.pm/tools をご覧ください。