typeset

汎用的、不統一、または構成が不十分に感じられるタイポグラフィを評価し、改善します。デフォルトのままに見えるテキストを、意図をもって丁寧に仕上げられた文字表現へと変えていきます。

必須の事前準備

/impeccable を実行してください。デザイン原則、アンチパターン、およびコンテキスト収集プロトコルが含まれています。作業を進める前に、プロトコルに従ってください。デザインのコンテキストがまだない場合は、必ず最初に /impeccable teach を実行してください。

---

現在のタイポグラフィを評価する

現在のタイポグラフィのどこが弱い、または汎用的なのかを分析します。

1. フォントの選択：

   • 目立たないデフォルトフォントを使っていませんか？（Inter、Roboto、Arial、Open Sans、システムのデフォルトフォント）
   • フォントはブランドの個性に合っていますか？（遊び心のあるブランドに、企業向けの書体を使うべきではありません）
   • フォントファミリーが多すぎませんか？（2〜3種類を超えると、ほとんどの場合、統一感が失われます）

2. 階層：

   • 見出し、本文、キャプションの違いが一目で分かりますか？
   • フォントサイズが近すぎませんか？（14px、15px、16pxでは階層が曖昧になります）
   • ウェイトのコントラストは十分ですか？（Medium と Regular の違いはほとんど分かりません）

3. サイズとスケール：

   • 一貫した文字スケールがありますか？ それともサイズが場当たり的ですか？
   • 本文は最低限の読みやすさを満たしていますか？（16px 以上）
   • サイズの設定方法はコンテキストに合っていますか？（アプリ UI には固定の rem スケール、マーケティング／コンテンツページの見出しには可変の clamp()）

4. 読みやすさ：

   • 行の長さは適切ですか？（理想は45〜75文字）
   • フォントとコンテキストに合った行の高さになっていますか？
   • テキストと背景のコントラストは十分ですか？

5. 一貫性：

   • 同じ要素が全体を通して同じスタイルになっていますか？
   • フォントウェイトは一貫して使われていますか？（同じ役割の要素が、あるセクションでは bold、別のセクションでは semibold になっていませんか？）
   • 字間は意図的に設定されていますか？ それとも、どこでもデフォルトのままですか？

重要：目的は、テキストを「華やかに」することではありません。より明確で、読みやすく、意図が感じられる表現にすることです。優れたタイポグラフィは意識されず、劣ったタイポグラフィは注意をそらします。

タイポグラフィの改善計画を立てる

スケール、フォントの組み合わせ、読み込み方法について詳しくは、impeccable スキルのタイポグラフィのリファレンスを参照してください。

体系的な計画を立てます。

• フォントの選択：フォントを変更する必要がありますか？ ブランドやコンテキストに合うのはどのフォントですか？
• 文字スケール：明確な階層を持つモジュラースケール（例：比率1.25）を設定します
• ウェイトの方針：それぞれの役割にはどのウェイトを使いますか？（本文は Regular、ラベルは Semibold、見出しは Bold、または用途に合わせた設定）
• 間隔：行の高さ、字間、タイポグラフィ要素間のマージン

タイポグラフィを体系的に改善する

フォントの選択

フォントの変更が必要な場合：

• ブランドの個性を反映するフォントを選びます
• 明確なコントラストのある組み合わせ（セリフ＋サンセリフ、ジオメトリック＋ヒューマニスト）を選ぶか、1つのファミリーを複数のウェイトで使います
• Web フォントの読み込みによるレイアウトシフトを防ぎます（font-display: swap、メトリクスを合わせたフォールバックフォント）

階層を確立する

明確な文字スケールを構築します。

• ほとんどの用途は5段階でカバーできます：キャプション、補足、本文、小見出し、見出し
• 各段階で一貫した比率を使います（1.25、1.333、または1.5）
• 複数の要素を組み合わせます：強い階層を作るには、サイズ＋ウェイト＋色＋間隔を組み合わせます。サイズだけに頼らないでください
• アプリ UI：固定の rem ベースの文字スケールを使い、必要に応じて1〜2個のブレークポイントで調整します。可変サイズは、コンテナベースの密度の高いレイアウトに必要な空間の予測可能性を損ないます
• マーケティング／コンテンツページ：見出しやディスプレイテキストには、clamp(min, preferred, max) による可変サイズを使います。本文のサイズは固定にします

読みやすさを改善する

• ch 単位を使って、テキストコンテナに max-width を設定します（max-width: 65ch）
• コンテキストに応じて行の高さを調整します。見出しは詰め気味に（1.1〜1.2）、本文はゆったりと（1.5〜1.7）します
• 暗い背景に明るいテキストを使う場合は、行の高さを少し大きくします
• 本文のサイズを16px／1rem以上にします

詳細を調整する

• データテーブルや、桁を揃える必要がある数値には tabular-nums を使用します
• 適切な letter-spacing を適用します。スモールキャップや大文字はやや広めにし、大きなディスプレイテキストは標準または狭めにします
• 値を表す名前（--font-16）ではなく、意味を表すトークン名（--text-body、--text-heading）を使用します
• font-kerning: normal を設定し、適切な場合は OpenType の機能も検討します

ウェイトの一貫性

• 各ウェイトの役割を明確に定義し、それを一貫して守ります
• ウェイトは 3〜4 種類までにします（Regular、Medium、Semibold、Bold で十分です）
• 実際に使用するウェイトだけを読み込みます（ウェイトを追加するたびにページの読み込みが遅くなります）

絶対に避けること：

• 2〜3 種類を超えるフォントファミリーを使用する
• サイズを任意に選ぶ。一定のスケールを採用します
• 本文を 16px 未満にする
• 本文に装飾フォントやディスプレイフォントを使用する
• ブラウザーのズームを無効にする（user-scalable=no）
• フォントサイズに px を使用する。ユーザー設定を尊重するため rem を使用します
• フォントに個性が求められる場面で、安易に Inter／Roboto／Open Sans を選ぶ
• 似ているが同一ではないフォントを組み合わせる（幾何学的なサンセリフ体を 2 種類組み合わせるなど）

タイポグラフィの改善を確認する

• 階層：見出し、本文、キャプションをすぐに見分けられますか？
• 読みやすさ：長い文章でも本文を快適に読めますか？
• 一貫性：同じ役割の要素には、常に同じスタイルが適用されていますか？
• 個性：タイポグラフィはブランドを反映していますか？
• パフォーマンス：ウェブフォントはレイアウトシフトを起こさず、効率的に読み込まれていますか？
• アクセシビリティ：テキストは WCAG のコントラスト比を満たしていますか？ 200% まで拡大できますか？

タイポグラフィはインターフェースデザインの基盤であり、情報の大半を伝えます。適切に仕上げることは、最も大きな効果が得られる改善です。