better-typography

優れたタイポグラフィ

優れたタイポグラフィの大半は、抑制することです。適切なスケール、心地よい余白、十分なコントラストは、どんな凝った効果にも勝ります。ラベル、表のセル、マーケティング用の見出し、記事の段落に、同じルールを適用してはいけません。テキストを含むものを作成またはレビューする際は、これらの原則を適用してください。

レビューでは、コードをざっと見るのではなく、ページを読んでください。目を細めて階層が保たれているか確認し、段落をひとつ最後まで読んで読み心地を確かめ、ビューポートのサイズを変更して、実際の長さのコンテンツで不適切な折り返し、孤立行、切り詰めが起きないか確認してください。

ボタンのラベル、エラーメッセージ、空の状態など、言葉そのものについては better-writing スキルが扱います。見出しのセマンティックな構造については better-accessibility、空間方向に関する RTL レイアウトと論理 CSS プロパティについては better-layout、レンダリング後の文字ペアのコントラスト測定と色の改善については better-colors が扱います。このスキルでは、テキストのレンダリング、折り返し、混在方向のコンテンツでの挙動を扱います。

修正はすべて、プロジェクト独自の流儀で記述してください。既存のスタイリングシステムを使い、それと並行する別のシステムを導入してはいけません。チートシートでは、各宣言に対応する Tailwind の記法を確認できます。

クイックリファレンス

カテゴリ	使用する場面	リファレンス
フォントの選択	フォントのカテゴリ、組み合わせ、形式、書体の構造	choosing-fonts.md
可変フォントと OpenType	軸、ウェイト、等幅数字、スタイルセット	variable-fonts-and-opentype.md
余白とサイズ設定	文字スケール、見出しの階層、行の高さ、字間、テキストの切り詰め	spacing-and-sizing.md
折り返しと句読点	行長、折り返し、切り詰め、スマート句読点、RTL	wrapping-and-punctuation.md
詳細とアクセシビリティ	下線、選択範囲、フォーム、装飾テキスト、コントラスト	details-and-accessibility.md
CSS チートシート	対象となるすべてのプロパティを Tailwind の記法とともにすばやく確認	css-cheat-sheet.md
レビュー出力形式	重大度のスケール、指摘事項の表、検証、判定	review-output.md

基本原則

1. 用途に合った形式を使う

ウェブでは .woff2（Brotli 圧縮、幅広くサポート）を使用してください。.woff は非常に古いブラウザー向けのフォールバックに限ります。.ttfと.otf` はウェブ用の圧縮がない、デスクトップ向けの生形式です。ファイルの読み込み方法はプロジェクト固有の事項であり、このスキルでは指定しません。

2. 生のタグよりプロパティを使う

CSS プロパティがある場合は、それを使ってください。font-variation-settings: "wght" 650 ではなく font-weight: 650、"opsz" ではなく font-optical-sizing: auto、font-feature-settings: "tnum" 1 ではなく font-variant-numeric: tabular-nums を使います。プロパティなら、可変フォントではないフォールバックでレンダリングされても動作します。生のタグを使うプロパティは、独自の軸（"GRAD" 80）や、専用のプロパティがないニッチな機能（"ss01" 1）に限ってください。

3. 意図したウェイトとスタイルを読み込む

アクティブなフォントファミリーに指定したウェイトやスタイルがない場合、ブラウザーがそれを合成することがあります。デザインで実際に使うフェイスを読み込むことを優先してください。font-synthesis: none を指定するのは、必要な太字、イタリック、小型大文字、上付き文字、下付き文字のすべてが、フォールバックのスタック全体で視覚的に区別できることを確認した後にしてください。合成の無効化は診断手段ではなく、強調を消してはいけません。

4. フォント、サイズ、ウェイトは少なくする

フォントを3種類より多く使うことは、ほとんどありません。ウェイトとサイズで階層を定義できますが、使いすぎるとすぐに読みやすさが損なわれます。似せるのではなく、コントラストをつけて組み合わせてください。セリフ体の見出しとサンセリフ体の本文は意図的に見えますが、よく似たサンセリフ体を2種類使うと誤りに見えます。18px 未満ではウェイト 400 以上にしてください。300 未満のウェイトはディスプレイ用途専用（28px 以上）で、本文サイズでは見えなくなります。

5. 意味のある名前でタイプスケールを定義する

サイズの種類を少数に絞り、できるだけそこから逸脱しないようにします。システムなしでハードコードしたサイズは、規模が大きくなると破綻します。個人プロジェクトなら、使用ルールが明確であれば text-sm のような既定の名前で問題ありません。チームで使う場合は、サイズではなく用途に基づいて（text-body-sm のように）名前を付けることで、一貫したルールを保てます。

6. 見出しのサイズはレベルに応じて小さくする

一貫性のあるページ階層では、見出しレベルをタイプスケールの小さい段階へ順に割り当てます。視覚的に下位の見出しが、誤って親の見出しより目立つことがないようにします。小さいサイズでは、太さや間隔によって区別できていれば、隣り合うレベルで同じサイズを使ってもかまいません。better-accessibility に従って意味的に適切な見出し要素を選びます。このスキルが制御するのは、見出しの視覚的なスタイルのみです。

7. 役割に応じた行の高さ

見出しはやや詰めて、1.1 程度にします。本文は 1.5 〜 1.6 にします。フォントサイズに応じて行の高さが変わるよう、単位のない値を優先します。24px のような固定値は避けてください。行の高さを詰めるのは短いテキストに限ります。3 行以上に折り返されるテキストには、高さに制限のある行であっても 1.4 以上を指定します。

8. サイズに応じた文字間隔

大きな見出しは、文字間隔を少し負の値にすると見栄えがよくなることがよくあります。小さな大文字のラベルは、文字が詰まって見えないよう、文字間隔を少し正の値にします。読みやすいサイズの本文には、どちらも必要ありません。

9. 1 行の長さを制限する

行が長いと、次の行を目で追いにくくなります。長文は 1 行あたり約 60〜75 文字に制限します。単位は問いません。重要なのは上限を設け、行の長さをその範囲に収めることです。単位の選び方とピクセル換算値。

10. 意図的に折り返す

text-wrap: balance はテキストを各行に均等に配分します。見出しに使います。text-wrap: pretty は最終行に短い単語が 1 つだけ残るのを避けます。説明文に使います。どちらも長文には使いません。長い単語、リンク、ID がコンテナーからはみ出す可能性がある場合は、overflow-wrap: break-word を使います。改行によって見た目が崩れるラベルやバッジには、white-space: nowrap を使います。

11. 変化する値には等幅数字を使う

数字は既定では幅が異なるため、タイマー、カウンター、価格は更新のたびにレイアウトがずれます。値が変化する箇所には font-variant-numeric: tabular-nums を適用します。

12. 内容を失わずに省略する

1 行の場合は、overflow: hidden と white-space: nowrap を指定したうえで text-overflow: ellipsis を使います。複数行の場合は line-clamp を使います。省略すると内容が隠れるため、欠けたテキストが重要な場合は、ツールチップや展開表示から全文にアクセスできるようにします。

13. 自然な文章を書き、CSS でスタイルを調整する

テキストは自然な大文字・小文字のまま保存し、見た目は text-transform で制御します。そうすれば、デザイン変更のたびに文章を書き直す必要がありません。適切な約物を使います。本文では曲線引用符（コードでは直線引用符）、2010–2020 のような範囲には en ダッシュ、文の途中で考えを挿入する場合には em ダッシュ、三点リーダーには単一の文字を使います。また、16 px のような値を分割しないために   を、長い単語の折り返し位置を制御するために ­ を使います。

14. フォントに基づく下線

既定の下線の位置はブラウザーに任されています。text-underline-position: from-font と text-decoration-thickness: from-font を使ってフォント自体のメトリクスから位置と太さを取得するか、text-decoration-thickness、text-underline-offset、text-decoration-skip-ink を使って手動で調整します。text-decoration-style では、点線、破線、波線を描画できます。点線の下線は、その単語が略語や定義済み用語のように追加情報を含むことを示す一般的なヒントです。アニメーションさせるのが色の変化だけの場合を除き、下線は text-decoration ではなく別の要素として作成します。実際の下線で確実にアニメーションするのは色だけだからです。

15. モバイルでの入力欄は16pxにする

iOS Safariでは、入力欄の文字サイズが16px未満だとページ全体がズームされます。フォントサイズを16pxに保つ方法は2つあります。どちらかを黙って選ぶのではなく、デザインの意図を確認してください。モバイルで入力欄を大きくする（text-base sm:text-sm）方法では、小さい画面での見た目が変わります。もう一方は、font-size: 16pxを維持し、transform: scale()で意図したサイズに表示する方法です。幅とline-heightを調整すれば、どのビューポートでもデザインを同じに保てます。両方の方法。

16. サイズとコントラストの最低基準

長文の本文テキストは、まずブラウザーのデフォルトに近い16pxにし、実際の書体、文字幅、プラットフォーム、製品の情報密度に合わせて判断してください。UIテキストはもっと小さくできます。入力欄やメニューは14pxを目安にします（入力欄はモバイルで16pxが必要です。原則15を参照）。キャプションは13pxを目安にし、12px未満にするのは避けてください。テキストのコントラストが低く見える場合は、better-colorsで表示された色の組み合わせを測定し、better-accessibilityで要件を分類してください。依頼されていない限り、色は変更しないでください。

17. ルートでのフォントスムージング

macOSでは、意図したよりもテキストが太く表示されます。ルートレイアウトに一度だけ-webkit-font-smoothing: antialiasedと-moz-osx-font-smoothing: grayscale（どちらもTailwindのantialiasedに含まれます）を適用し、コンポーネントごとには適用しないでください。

18. 言語と双方向テキストの動作

ブラウザーや支援技術が適切な発音、引用符、ハイフネーションを選べるように、langを設定してください。方向が変わる箇所では、ドキュメントまたはコンテンツの境界にdirを設定し、数字の並び順を維持してください。必要に応じて、方向が混在する単独の値には<bdi>を使ってください。空間的な左右反転と論理CSSプロパティはbetter-layoutの範囲です。

19. テキストを選択できる状態に保つ

選択時の配色で読みやすさが維持されるなら、::selectionを使ってブランド表現を読書体験に取り入れられます。テキストはデフォルトで選択可能にしてください。user-select: noneは、誤選択が操作の妨げになることが明らかな、特定のドラッグ操作やジェスチャー操作の対象にのみ使ってください。インターフェース全体で選択を無効にしたり、ボタンのラベルがハイライト表示されるというだけで無効にしたりしないでください。

よくある間違い

間違い	修正方法
.ttf／.otf を Web で配信する	.woff2 に変換します
ウェイトに font-variation-settings: "wght" を使う	font-weight を使います（可変フォント以外のフォールバックでも機能します）
font-feature-settings: "tnum" 1 を使う	font-variant-numeric: tabular-nums を使います
合成された書体が意図したデザインと異なる	必要な書体を読み込みます。強調を損なわないよう、確認済みの合成モードのみを無効にします
場当たり的にフォントサイズをハードコードする	タイプスケールを使います
子見出しが親見出しより視覚的に目立ちすぎる	そのセクションの階層に合わせて、段階的に小さくなるスケールを割り当てます
デフォルトのサイズを基準に見出し要素を選ぶ	better-accessibility に従って意味的に適切な要素を選び、CSS で視覚的なサイズを設定します
拡大縮小されるテキストに line-height: 24px を指定する	単位なしの値（1.5）を使います
段落の行幅が広すぎる	1 行あたり約 60～75 文字を上限にします
段落の最終行に孤立した語が残る	text-wrap: pretty を使います
2 行見出しの左右のバランスが悪い	text-wrap: balance を使います
数字によってレイアウトがずれる	tabular-nums を使います
切り詰められたテキストを読む方法がない	ツールチップまたは展開ビューで全文を表示します
コピーに UPPERCASE を直接入力する	自然な大文字・小文字を使い、text-transform を適用します
インターフェースで両端揃えのテキストを使う	text-align: start を使い、両端揃えは特定の編集レイアウトに限ります
下線がディセンダーに重なる	text-decoration-skip-ink: auto と from-font のメトリクスを使います
16px 未満の入力欄が iOS でズームされる	まずは text-base sm:text-sm を使うか、デザイン上のサイズを保つために transform で縮小した 16px を使います
ルートレイアウトでフォントのスムージングが指定されていない	ルートで一度だけ antialiased を適用します
書字方向が混在する値が誤った順序で表示される	正しい lang／dir を設定し、必要に応じて <bdi> で値を分離します
アプリケーションのクローム全体で選択が無効になっている	選択を再び有効にします。ドラッグやジェスチャーと競合する特定の操作でのみ無効にします
補足情報を示すヒントに視覚的な手がかりがない	text-decoration-style: dotted で点線の下線を付けます
14px の UI テキストに Thin／Light ウェイトを使う	18px 未満ではウェイト 400 以上を使います。Thin ウェイトはディスプレイ用途に限ります
3 行になるカードの説明に leading-none を使う	3 行以上に折り返されるテキストには、少なくとも 1.4 を指定します

レポート

単独のタイポグラフィレビューは、確認されたすべての指摘が、検証結果と判定を添えて review-output.md の形式で報告されている場合に完了です。better-interface の場合は、その形式を適用します。