taste-typography

taste-typography

文字は人が最初に認識し、最後まで名前を思い出せないものです。このスキルは、文字がデザインの役割を果たすようにします。

1. 書体の組み合わせ（最大2ファミリー、明確な目的を持たせる）

構造にコントラストがある2つのファミリーを選びます。似たもの同士を組み合わせてはいけません。

ディスプレイ	本文	適した用途
個性のあるセリフ体（Fraunces、Newsreader）	ニュートラルなサンセリフ体、または同じセリフ体	エディトリアル、高級感、落ち着き
太いグロテスク体（Archivo、Bricolage）	同じファミリーの400	大胆、遊び心、ブルータリスト
ニュートラルなグロテスク体（Space Grotesk、システム）	同じファミリー	ダークテック、開発者ツール
モノスペース体（ラベル／メタデータのみ）	グロテスク体の本文	技術系、ターミナル

• 3ファミリーではごちゃごちゃします。ニュートラルなサンセリフ体だけではテンプレートのようになります。
• モノスペース体はラベル用であり、本文用ではありません。本文にモノスペース体を使うのは、データテーブルとターミナルに限ります。
• ブランドでファミリーが指定されている場合は、それを軸に組み合わせます。2つ目のファミリーには、同じ種類から選びます（同じデザイナーによるセリフ体とサンセリフ体の組み合わせなら安全です）。

2. スケール（2つのスケールを一貫して適用する）

ディスプレイスケール（マーケティング、ヒーロー）：64 / 48 / 32 / 24 / 18 / 16 — 可変サイズには clamp() を適用します：clamp(2rem, 5vw, 4rem)。

UIスケール（製品、ダッシュボード）：13 / 14 / 15 / 16 / 20 / 24 — UIサーフェス内では12px未満、24px超にしてはいけません。

階層のルール：

• セクションごとにディスプレイサイズは1つだけにします。ページ上の2つの見出しが同じ大きさなら、どちらも見出しとは言えません。
• ウェイト：ディスプレイには1つのウェイト（ファミリー本来の表情：セリフ体は400、グロテスク体は700～900）、本文には400、強調には500～600を使います。1ページで使うウェイトは最大3つです。
• 小さい文字（≤ 12px）には、にじんで見えるのを防ぐため、letter-spacing を0.02em以上に設定します。ただし、データテーブルとしての正当な理由がない限り、10px未満にしてはいけません。

3. 文字幅、行送り、リズム（数値）

• 行の長さ： 本文は45～75文字。ヒーローのサブ見出しは1行40文字以下、見出しは1行24文字以下にします（運任せではなく、早めに改行します）。
• 行送り： 見出しは0.95～1.08（セリフ体は低めの値が適しています）、本文は1.55～1.7、ラベルは1.2～1.4。
• 文字間隔： 大文字のラベルは0.08～0.2em、ディスプレイの小文字は−0.02em、本文は0にします。意図的なエディトリアル表現でない限り、16pxを超える小文字の本文にはトラッキングを適用してはいけません。
• 垂直方向のリズム： すべてのテキストブロックを4pxベースラインのグリッドに合わせます。迷った場合は、line-height を4の倍数にします：20/24/28/32px。
• 段落： マーケティングコピーの段落は最大約3行にします。カード内の6行段落は、コピーの問題ではなくレイアウトの失敗です。

4. テキストの配置（「デザインされている」と感じさせる細部）

• 本文を全幅にしてはいけません — ワイドスクリーンでは特に、幅を32～40emのカラムに制限します。
• 見出しは意図的に改行します： 重要な箇所では、手動の改行で単語の折り返しを制御します（「ユーザーの行動を / 正確に把握する」）。
• 見出し＋サブ見出し＋段落： サイズだけでなくウェイトも段階的に明確に小さくします。
• 両端揃えは禁止です。ただし、ハイフネーションを使う、1行60文字以上の印刷物風エディトリアルカラムは除きます。それ以外はすべて左揃えにします。
• 行末の不揃いは重要です： 見出しの最終行に1語だけ残ること（ウィドウ）がないようにします。単語の改行位置やサイズを調整して解消します。
• 疑似的なスタイル設定： 疑似イタリックは使わず、ファミリー本来のイタリック体を使います。疑似ボールドも使わず、400しかないファミリーに font-weight: 700 を指定してはいけません。
• 可変タイポグラフィ： すべてのテキストで、pxではなくremを使った clamp() を使います。remの下限なしに vw 単位を使ってはいけません。

5. アクセシビリティの最低基準（必須）

• マーケティングページの本文は16px以上、UI内では14px以上にします。それより小さい文字は、コントラスト比4.5:1を満たすメタデータに限ります。
• すべての本文はコントラスト比4.5:1以上、大きなディスプレイ文字（24px以上／太字なら18.66px以上）は3:1以上にします。
• ディスプレイには text-rendering: optimizeLegibility を設定します。小さいサイズで表示が崩れるため、-webkit-text-stroke は使いません。
• フォントの読み込み：font-display: swap を設定し、ディスプレイ用書体をプリロードします。フォントを待つ間、テキストを非表示にしてはいけません。

6. チェックリスト（該当したらページを不合格にする）

• すべての用途に中立的なフォントファミリーを1つだけ使用している。
• フォントファミリーを3つ以上使用している。
• 20px未満の見出しの横に16pxの本文があり、階層がない。
• 本文の行の長さが75文字を超えている。
• 10px未満のテキストがある。
• 4種類以上のフォントウェイトを使用している。
• カードやサイドバー内に6行の段落がある。
• ハイフネーションに対応していないのに、両端揃えのテキストを使用している。

タイポグラフィがうまく機能していれば、ユーザーは理由がわからないまま、サイトが「高級感がある」と感じます。それが目標です。