タイポグラフィ
タイポグラフィとは、主に抑制のことです。適切なスケール、快適な間隔、十分なコントラスト。ラベル、テーブルセル、マーケティングの見出し、記事の段落は、すべて同じルールセットを共有するものではありません。
レビューする際は、コードをスキャンするのではなく、レンダリングされたページを読んでください。悪い折り返し、文末の孤立語、切り詰めは、実際のコンテンツ長でのみ現れます。
すべての修正は、プロジェクトのスタイリングシステムで記述し、見慣れた同等の値ではなく、以下の正確な値を使用してください。チートシートは、各宣言をTailwindの同等のものにマッピングします。
単語そのものは better-writing に属します。セマンティックな見出し構造は better-accessibility に属します。空間的なRTLレイアウトと論理プロパティは better-layout に属します。コントラスト測定は better-colors に属します。このスキルは、テキストがどのようにレンダリングされ、折り返され、混合方向のコンテンツでどのように動作するかを担当します。
適切なフォーマットを提供する
ウェブ上では .woff2 を使用してください。Brotli圧縮と幅広いサポートを提供します。.woff は非常に古いブラウザ向けのフォールバックです。.ttf と .otf はデスクトップフォーマットであり、ウェブ圧縮はありません。ファイルの読み込み方法はプロジェクトの関心事です。
生のタグよりプロパティを優先する
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）のために予約してください。軸と機能タグは variable-fonts-and-opentype.md にリストされています。
意図されたウェイトとスタイルを読み込む
ブラウザは、アクティブなファミリーが提供しないウェイトやスタイルを合成し、実際のフェイスを歪めます。デザインが使用するフェイスを読み込んでください。
font-synthesis: none は合成をオフにしますが、強調を報告するのではなく消去します。必要なすべての太字、イタリック、スモールキャップ、上付き文字、下付き文字の形式がフォールバックスタック全体で明確に区別されていることを確認した後にのみ設定してください。
フォント、サイズ、ウェイトは少なくする
3つ以上のフォントを使用することはめったにありません。ウェイトとサイズが階層を定義します。それらを使いすぎると、すぐに可読性が損なわれます。類似性ではなく、コントラストのためにペアリングしてください。セリフ体の見出しとサンセリフ体の本文は意図的に見えますが、2つほぼ同一のサンセリフ体は間違いに見えます。
18px 未満では、ウェイト 400 以上にしてください。300 未満のウェイトは 28px+ でのみ表示用です。テキストサイズでは見えなくなります。ペアリングのガイダンスは choosing-fonts.md にあります。
セマンティックな名前を持つタイプスケールを使用する
少数のサイズを定義し、そこから可能な限り逸脱しないようにしてください。背後にシステムのないハードコードされたサイズは、規模が大きくなると崩壊します。
solo、text-sm のようなデフォルトの名前は、使用ルールが明確であれば問題ありません。チームでは、サイズを使用目的で名前付けてください（text-body-sm）。そうすることで、ルールが他の人にも引き継がれます。スケールの構築は spacing-and-sizing.md にあります。
見出しサイズはレベルに応じて小さくなる
見出しレベルをタイプスケールの降順のステップにマッピングし、視覚的に従属する見出しがその親を圧倒しないようにしてください。隣接するレベルは、ウェイトやスペーシングでそれらを区別できる限り、スケールの小さい方の端でサイズを共有してもかまいません。セマンティック要素は better-accessibility の担当です。このスキルは視覚的な処理のみを設定します。
役割に応じた行間（line-height）
見出しはよりタイトに、約 1.1。本文コピーは 1.5 から 1.6。単位なしの値を優先してください。そうすることで、line-height がフォントサイズに応じて拡大縮小します。固定の 24px ではそうなりません。
タイトな行間は短いテキスト用です。3行以上に折り返すテキストには、高さが制限された行でも、少なくとも 1.4 が必要です。
サイズに応じた文字間（letter-spacing）
大きな見出しは、わずかにネガティブな文字間を設定すると見栄えが良くなることがよくあります。小さな大文字のラベルは、少しポジティブな文字間が必要です。そうしないと、文字が密集して感じられます。読み物サイズの本文コピーにはどちらも必要ありません。
行長（メジャー）に上限を設ける
長い行は、次の行を目で追うのを難しくします。長文テキストは、1行あたり約60～75文字に制限してください。上限が存在し、行の長さが範囲内に収まっている限り、どの単位でも機能します。単位の選択とピクセル換算 を参照してください。
意図的に折り返す
4つの宣言、4つの役割：
text-wrap: balanceはテキストを行全体に均等に分配します。見出しに使用します。text-wrap: prettyは、1つの短い単語が最終行に来るのを防ぎます。説明文に使用します。overflow-wrap: break-wordは、長い単語、リンク、IDがコンテナからはみ出す可能性がある場合に使用します。white-space: nowrapは、改行が崩れて見えるラベルやバッジに使用します。
長文テキストでは balance と pretty をスキップしてください。
変化する値にはタブラーナンバー（等幅数字）
デフォルトでは数字の幅が異なるため、タイマー、カウンター、価格は更新のたびにレイアウトが変動します。変化する値には font-variant-numeric: tabular-nums を適用してください。
コンテンツを失わずに切り詰める
1行の場合は、text-overflow: ellipsis と overflow: hidden および white-space: nowrap を併用します。複数行の場合は line-clamp を使用します。切り詰めはコンテンツを隠します。欠落したテキストが重要な場合は、ツールチップまたは展開ビューで完全な値にアクセスできるようにしておいてください。
コピーは自然に記述し、CSSでスタイリングする
テキストは自然な大文字小文字で保存し、text-transform で表示を制御します。そうすることで、再デザインの際にコピーを書き直す必要がなくなります。
レンダリングされたテキストではスマートな句読点を使用してください：
- 散文ではカギ括弧、コードではストレート引用符。
- 範囲には en ダッシュ：
2010–2020。 - 3つのピリオドではなく、単一の省略記号文字。
16 pxを改行で分離しないようにするには 。- 長い単語がどこで分割されてもよいかを示すには
­。
フォント由来の下線
デフォルトの下線は、ブラウザが決定した場所に配置されます。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 を使用する代わりに、下線を別の要素として構築してください。
モバイルでは16pxの入力
iOS Safariは、入力のテキストが 16px より小さいと、ページ全体をズームします。2つの修正方法があり、サイズを 16px に保ちますが、見た目が異なります。デザインがどちらを望んでいるか尋ねてください：
- モバイルで入力を大きくする（
text-base sm:text-sm）。小さな画面での見た目が変わります。 font-size: 16pxを維持し、transform: scale()で意図したサイズをレンダリングし、幅とline-heightを補正します。すべてのビューポートで同一ですが、維持するコードが増えます。
両方のレシピは details-and-accessibility.md にあります。
サイズとコントラストの下限
長文の本文テキストは、ブラウザのデフォルトである 16px から開始してください。理由を説明できる場合にのみ、それから逸脱してください。タイプフェイスが小さめに作られている、メジャーが狭い、製品が高密度なプロフェッショナルツールであるなど。
UIテキストはさらに小さくできます。14px は入力とメニューの有用な開始点であり、13px はキャプション用で、12px を下回ることはめったにありません。モバイルでは入力は依然として 16px が必要です。
テキストのコントラストが低く見える場合は、better-colors を使用してレンダリングされたペアを測定し、better-accessibility を使用して要件を分類してください。依頼がない限り、色はそのままにしておいてください。
ルート要素へのフォントスムージング
macOSでは、テキストは意図よりも太くレンダリングされます。-webkit-font-smoothing: antialiased と -moz-osx-font-smoothing: grayscale をルートレイアウトに一度だけ適用し、コンポーネントごとには決して適用しないでください。Tailwindの antialiased は両方をカバーします。
言語と双方向テキスト（bidi）の動作
lang を設定して、ブラウザと支援技術が正しい発音、引用符、ハイフネーションを選択できるようにします。ドキュメントレベルまたは方向が変わるコンテンツの境界で dir を設定します。数字の順序を保持し、<bdi> を使用して混合方向の値を分離します。空間的なミラーリングと論理CSSプロパティは better-layout に属します。
有用なテキストは選択可能にしておく
デフォルトではテキストを選択可能にしておいてください。::selection は、選択された組み合わせが読みやすいままである限り、ブランドを読み取り体験にもたらすことができます。
user-select: none は、誤った選択が操作の邪魔になるドラッグ可能またはジェスチャ駆動のサーフェスに属します。インターフェース全体にわたって、またはボタンラベルがハイライトされる可能性があるために決して使用しないでください。
終了前の確認
| 間違い | 修正 |
|---|---|
| 合成されたフェイスがデザインと異なる | 実際のフェイスを読み込む。検証済みの合成モードのみを無効にする |
| 子見出しが視覚的に親を圧倒する | そのセクションの階層をスケールの降順ステップにマッピングする |
| デフォルトサイズのために選ばれた見出し要素 | まずセマンティクスを選択し、次にCSSでサイズを設定する |
| 段落の最終行の孤立語 | text-wrap: pretty |
| 不均衡な2行見出し | text-wrap: balance |
| インターフェース内の両端揃えテキスト | text-align: start。特定の編集レイアウトのために均等割り付けを予約する |
| 下線がディセンダーを横切る | text-decoration-skip-ink: auto、from-font メトリクス |
| 混合方向の値が間違った順序でレンダリングされる | 正しい lang/dir を設定。<bdi> で値を分離する |
| アプリケーションのクローム全体で選択が無効になっている | 復元する。ドラッグまたはジェスチャと競合する場所でのみ抑制する |
| 視覚的な手がかりのない追加情報のヒント | text-decoration-style: dotted による点線の下線 |
14px のUIテキストでの細い/ライトウェイト | 18px 未満ではウェイト 400+。細いウェイトは表示専用 |
3行のカード説明文での leading-none | 3+行に折り返すテキストには少なくとも 1.4 |
報告
重大度. HIGH はテキストを読めなくするか、回復手段なしにコンテンツを切り詰めます。MEDIUM はタイプシステムまたは見出し階層を壊します。LOW は孤立したポリッシュ（微調整）です。
検証. ブラウザなし：各見出しレベルの計算されたサイズとウェイトを確認し、降順であることを確認。宣言された行間とメジャー。現実的な文字列長に対する切り詰めルール。ブラウザあり：ビューポートをリサイズして、実際のコンテンツ長での折り返し、文末の孤立語、切り詰めをキャッチします。実行できなかったすべてのチェックを Not verified として報告してください。
フォーマット. 発見事項を、それぞれが違反する原則の下にグループ化し、重大度順に並べ、原因1行につき、それが現れるすべての場所をリストした1行として提示します：
| 重大度 | 場所 | 修正前 | 修正後 | 理由 |
|---|
場所 は path/to/file:line です。理由 は原則とユーザーへの影響を示します。
HIGH が残っている場合は Block で終了し、それ以外の場合は Approve で終了し、残りの作業はテーブルに残します。検査しなかった範囲を Approve しないでください。報告するものがない場合は、「特筆すべきタイポグラフィの問題はありません」と述べ、検証を報告してください。