type-as-signal

シグナルとしてのタイポグラフィ

デザイナーのセンスは、ほかの何に気づくよりも先に、文字組みから読み取れます。

使い方

• /type-as-signal この会話におけるタイポグラフィの品質を評価するために、シグナルとしてのタイポグラフィ分析を適用します。

制約

タイポグラフィから読み取れること

• 色、レイアウト、画像を分析する前に、必ず最初のセンスのシグナルとしてタイポグラフィを評価してください
• 画像のないページでも、文字組みが優れていれば、美しい写真で覆われた文字組みの悪いページよりセンスのよさが伝わります
• 必ず確認してください：このタイポグラフィは製品にふさわしいと感じられるか、それとも誰にも気づかれずに別のものに置き換えられてしまうか？

タイポグラフィのセンスのよさを示すシグナル

• 明確な数学的比率に基づいた、一貫性のあるスケール
• 意図を持って使われたウェイト（無作為に太字にしていない）
• 見出し、本文、UIで適切に変化する行の高さ
• すべて大文字のテキストやディスプレイサイズに合わせて調整された文字間隔
• 読みやすさを考慮して調整されたテキストの幅（行の長さ）
• デザイナーのポートフォリオの美学ではなく、製品の個性を反映した書体の選択

タイポグラフィのセンスの悪さを示すシグナル

• 基準となるシステムがないまま、サイズが多すぎる
• インターフェース全体で無作為に太字を使用している
• テキストサイズに関係なく、どこでも同じ行の高さを使っている
• 本文に装飾的な書体を使っている
• 文字サイズとコンテナ幅の関係を無視している

アンチパターン

• 書体名だけでタイポグラフィを評価し、使い方を無視する
• すべてのサンセリフ体を同じものとして扱う
• 色や画像など、より視覚的に目立つ要素を優先してタイポグラフィを無視する