タイポグラフィ
タイポグラフィは主に抑制です。適切なスケール、快適な間隔、十分なコントラスト。ラベル、テーブルセル、マーケティングの見出し、記事の段落は、それぞれ異なるルールセットを持ちます。
レビューする際は、コードをスキャンするのではなく、レンダリングされたページを読んでください。悪い折り返し、ウィドウ、切り詰めは、実際のコンテンツ長でしか現れません。
すべての修正はプロジェクトのスタイリングシステムで記述し、以下の正確な値を使用してください。見慣れた同等の値は使用しないでください。チートシートには、各宣言に対応するTailwindの同等値がマッピングされています。
言葉自体はhr-better-writingに属します。意味的な見出し構造はhr-better-accessibilityに属します。空間的なRTLレイアウトと論理プロパティはhr-better-layoutに属します。コントラスト測定はhr-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にあります。
意味的な名前を持つタイプスケールを使用する
少数のサイズを定義し、それから可能な限り逸脱しないでください。システムのないハードコードされたサイズは、スケールが大きくなると崩れます。スケールの範囲外の任意のサイズで失敗するリントルールまたはガードテストでスケールを強制してください。
単独で、デフォルトの名前（text-smなど）は、使用ルールが明確であれば問題ありません。チームでは、サイズを使用目的で名前付け（text-body-sm）することで、他の人がルールを維持できるようにします。スケールの構築はspacing-and-sizing.mdにあります。
見出しサイズはレベルに応じて小さくする
見出しレベルをタイプスケールの降順のステップにマッピングし、視覚的に従属する見出しがその親を圧倒しないようにします。隣接するレベルは、ウェイトや間隔で区別がつく限り、スケールの小さい方に向けて同じサイズを共有してもかまいません。意味的な要素はhr-better-accessibilityの担当です。このスキルは視覚的な処理のみを設定します。
役割に応じた行間
見出しはよりタイトに、約1.1。本文は1.5から1.6。単位なしの値を推奨します。これにより、行間がフォントサイズに応じて拡大縮小されます。固定の24pxではそうなりません。
タイトな行間は短いテキスト用です。3行以上に折り返すものは、高さが制限された行でも、少なくとも1.4が必要です。
サイズに応じた文字間隔
大きな見出しは、わずかに負の文字間隔があると見栄えが良くなることがよくあります。小さな大文字のラベルは、少し正の文字間隔が必要です。そうしないと文字が窮屈に見えます。読みやすいサイズの本文はどちらも必要ありません。
行長を制限する
長い行は、目が次の行を見つけるのを難しくします。長文テキストは1行あたり約60～75文字に制限してください。制限が存在し、行長が範囲内に収まっていれば、どの単位でも機能します。単位の選択とピクセル相当値を参照してください。
意図的に折り返す
4つの宣言、4つの役割：
text-wrap: balanceテキストを行全体に均等に分配します。見出しに使用します。text-wrap: pretty短い単語が最終行に単独で配置されるのを防ぎます。説明文に使用します。overflow-wrap: break-word長い単語、リンク、IDがコンテナからはみ出す可能性がある場合に使用します。white-space: nowrap改行が見苦しいラベルやバッジに使用します。
長文テキストではbalanceとprettyをスキップしてください。
変化する値には表組み数字
数字はデフォルトで幅が異なるため、タイマー、カウンター、価格は更新されるたびにレイアウトがシフトします。変化する任意の値にfont-variant-numeric: tabular-numsを適用してください。
コンテンツを失わずに切り詰める
1行の場合は、overflow: hiddenとwhite-space: nowrapを伴うtext-overflow: ellipsis。複数行の場合はline-clamp。切り詰めはコンテンツを隠します。欠落したテキストが重要な場合は、完全な値をツールチップまたは展開ビューでアクセスできるようにしてください。
フィールドごとに選択します。ユーザーがアイテムを識別するために全文が必要な名前やタイトルは折り返します。アイテムが末尾で異なる場合（ファイル名、パス、同じドメインを共有するメールなど）は中央で切り詰めます。末尾の省略記号はそれらを同一に見せるためです。ユーザーが比較する数値、金額、日付は決して切り詰めないでください。詳細はwrapping-and-punctuation.mdにあります。
コピーは自然に書き、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が必要です。
テキストが低コントラストに見える場合は、hr-better-colorsを使用してレンダリングされたペアを測定し、hr-better-accessibilityを使用して要件を分類してください。指示がない限り、色はそのままにしておいてください。
ルートでのフォントスムージング
macOSでは、テキストは意図よりも太くレンダリングされます。-webkit-font-smoothing: antialiasedと-moz-osx-font-smoothing: grayscaleをルートレイアウトに一度だけ適用し、コンポーネントごとには適用しないでください。Tailwindのantialiasedは両方をカバーします。
言語と双方向性の動作
ブラウザと支援技術が適切な発音、引用符、ハイフネーションを選択できるようにlangを設定してください。ドキュメントまたは方向が変わるコンテンツの境界でdirを設定してください。数字の順序を保持し、<bdi>を使用して混合方向の値を分離してください。空間的なミラーリングと論理CSSプロパティはhr-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は孤立した修正です。
検証. ブラウザなし：各見出しレベルの計算されたサイズとウェイトが降順であることを確認します。宣言された行間と行長。現実的な文字列長に対する切り詰めルール。ブラウザあり：ビューポートをリサイズして、実際のコンテンツ長での折り返し、ウィドウ、切り詰めをキャッチします。実行できなかったすべてのチェックを「未検証」として報告してください。
フォーマット. 所見を、それぞれが違反する原則ごとにグループ化し、重大度順に並べ、原因ごとに1行、それが現れるすべての場所をリストします：
| 重大度 | 場所 | 修正前 | 修正後 | 理由 |
|---|
場所はpath/to/file:lineです。理由は原則とユーザーへの影響を示します。
HIGHが残っている場合はブロックと報告し、それ以外は承認と報告し、残りのテーブルは作業として残します。検査していない範囲を決して承認しないでください。報告することが何もない場合は、「アクション可能なタイポグラフィ所見はありません」と述べ、検証を報告してください。