type-systems

タイポグラフィシステム

タイポグラフィはシステムです。すべての判断には明確な意図があり、互いに一貫性を持たせる必要があります。

使い方

• /type-systems この会話にタイポグラフィシステムの制約を適用します。

制約

スケール

• 文字サイズのスケールには、数学的な比率（サイズ間で1.25、1.333、1.5）を必ず使用してください。
• 広い範囲（12px～72px）：大胆な階層を作り、エディトリアルやマーケティングに適しています。
• 狭い範囲（14px～24px）：控えめな階層を作り、情報量の多い製品に適しています。
• ランダムなサイズは絶対に使用しないでください。スケールに含まれないサイズは使うべきではありません。
• 画面ごとに使用するサイズは最大4～6種類に制限し、それぞれに明確な理由を設けてください。

ウェイト

• 1～2種類：規律ある構成です。階層はウェイトではなく、サイズと余白で表現します。
• 3種類：標準的な範囲です。本文はレギュラー、強調にはミディアム、見出しにはボールドを使用します。
• 4種類以上：システム上必要な場合を除き、設計上の判断ができていません。
• 各ウェイトに、明確に区別された用途を必ず割り当ててください。

行の高さ

• 本文：フォントサイズの1.5～1.7倍。読みやすさを保ちます。
• 見出し：1.1～1.3倍。大きな文字にはゆとりがあります。
• UI ラベル：1.2～1.4倍。詰めすぎず、コンパクトにします。
• すべての文字サイズで同じ行の高さを使用することは絶対に避けてください。

字間

• 本文：調整しないでください。フォントデザイナーによって最適化されています。
• すべて大文字のラベル：トラッキングを2～5％広げてください。大文字にはゆとりが必要です。
• 大きなディスプレイテキスト（72px以上）：字間を詰めると効果的な場合があります。

アンチパターン

• 明確な階層上の理由もなく、1画面に3種類を超える文字サイズを使用する
• 3行を超える段落を中央揃えにする
• 1行が75文字を超える幅にする（読みやすさが損なわれます）
• システム上の根拠なく、ウェイトの使い方に一貫性がない