better-typography

タイポグラフィ

このスキルでは、文字サイズのスケールや間隔から、フォントの読み込み、折り返し、句読点まで、テキストの表示方法を設定し、確認します。すべての修正はプロジェクトのスタイリングシステムに反映します。チートシートでは、各宣言に対応するTailwindユーティリティを確認できます。

言葉選びは better-writing、見出しのセマンティックな構造は better-accessibility、空間的なRTLレイアウトは better-layout が担当します。コントラストは better-colors で測定します。基準を満たしているかどうかの判断は better-accessibility が担当します。

好みではなく、測定結果に基づく

ここに記載する値には、厳密に定められているものがあります。単位のないline-height、18px未満で400以上のウェイト、60～75文字の行長、iOSでの16pxの入力欄、変化する値でのtabular-numsは、基準を満たしていない場合に指摘してください。

字間、フォントの組み合わせ、スケール比は経験則です。プロジェクト独自のスケールから外れている場合に限り、指摘してください。タスクでフォント変更を求められていない限り、有料・無料を問わず、新しい書体を提案しないでください。

フォント、サイズ、ウェイトは絞る

フォントは3種類を超えて使わないようにします。マーケティングページでは、アプリより多く使える場合があります。階層はウェイトとサイズで表すため、種類を増やすほど階層が薄れます。コントラストが生まれる組み合わせを選びましょう。サンセリフ体の本文にセリフ体の見出しを組み合わせると意図的に見えますが、よく似たサンセリフ体を2種類使うと、選定ミスのように見えます。

18px未満では、ウェイトを400以上にします。ウェイト100～300は28px以上で使い、その場合も背景とのコントラストを確認してください。カテゴリ、DisplayとTextのカット、形式、フォールバックスタックについては、choosing-fonts.mdを参照してください。

デザインで使うフォントフェイスを読み込む

ブラウザーがファミリーにないウェイトやスタイルを合成すると、フォントフェイスが歪みます。デザインで使うフォントフェイスをすべて読み込んでください。フォールバックスタックを確認したうえで、不要な合成モードだけを無効にします。方法は合成に関するロングハンドを参照してください。

生のタグではなくプロパティを使う

CSSプロパティがある場合は、それを使ってください。font-variation-settings: "wght" 650ではなく、font-weight: 650を使います。font-feature-settings: "tnum" 1ではなく、font-variant-numeric: tabular-numsを使います。プロパティなら、可変フォントではないフォールバックが表示される場合も機能します。

font-optical-sizingはデフォルトのautoのままにしてください。光学サイズをフォントサイズから意図的に切り離すデザインの場合に限り、"opsz"をハードコードします。生のタグは、"GRAD" 80のようなカスタム軸や、"ss01" 1のようにプロパティがない機能に限って使います。軸、機能、可変フォントと静的ファイルについては、variable-fonts-and-opentype.mdを参照してください。

セマンティックな名前を付けた文字サイズのスケールを使う

サイズを少数に絞って定義し、そこからの逸脱をできるだけ抑えます。各サイズにline-heightとウェイトを組み合わせることで、役割を3つの値ではなく1つの判断で表せます。

個人の作業では、使い方のルールが明確であれば、text-smのようなデフォルト名で問題ありません。チームでは、他のメンバーにもルールが伝わるよう、用途に応じた名前（text-body-smなど）を付けます。参考資料には、役割に基づくスケールの出発点があります。

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

見出しレベルをスケールの段階に対応させ、下位の見出しが上位の見出しより目立たないようにします。スケールの段階が足りない場合は、ウェイトや字間で違いを保てる限り、深いレベルで同じサイズを使ってもかまいません。意図的なオーバーラインでない限り、見出しを本文より小さくしないでください。レベルの対応付けを参照してください。

役割に応じたline-height

ディスプレイテキストは1.1、見出しは1.2～1.3、本文は1.5～1.6にします。フォントサイズに合わせて拡大縮小されるよう、単位のない値を使います。固定値の24pxでは拡大縮小されません。

行間を詰めるのは、短いテキストに限ります。高さに制約のある行でも、3行以上に折り返されるテキストには、少なくとも1.4が必要です。カードの説明文の例を参照してください。

サイズに応じた字間

24px以上の見出しでは、-0.01em～-0.02emにします。14px以下の大文字ラベルでは、0.05emにします。本文は0のままにします。文字サイズに応じて字間が拡大縮小されるよう、emを使います。

カーニングはフォントに組み込まれており、デフォルトで有効です。font-kerning: noneで修正することはできません。

行長の上限

長文は1行あたり60～75文字に収めます。上限が設定され、行の長さがこの範囲に入るなら、どの単位でもかまいません。単位の選択肢とピクセル換算値を参照してください。

意図的に折り返す

• text-wrap: balance は見出しや短い説明文の行を均等に整えます。段落には使わないでください。また、Chromium では6行を超えると無視されます。
• text-wrap: pretty は最後の行に単語が1つだけ残るのを防ぎます。長文を含む、あらゆる段落で安全に使えます。
• 長い単語、リンク、IDがコンテナからはみ出す可能性がある場合は、overflow-wrap: break-word を使います。
• 改行されると見た目が崩れるラベルやバッジには、white-space: nowrap を使います。

インターフェースのテキストには text-align: start を使います。justify は、特定のエディトリアルレイアウトでのみ使用します。

変化する値に表形式の数字を使う

タイマー、カウンター、価格、数値の表の列には font-variant-numeric: tabular-nums を適用します。各桁の幅が一定になり、レイアウトがずれなくなります。文章中の数字はプロポーショナルのままにします。

戻せる手段を用意して省略する

1行の場合は、overflow: hidden、text-overflow: ellipsis、white-space: nowrap を使います。Tailwind の truncate はこれらをまとめて設定します。複数行の場合は、display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 3、overflow: hidden を使います。Tailwind の line-clamp-3 はこれらを出力します。

省略された値には、完全なテキストに戻れる手段が必要です。その処理は better-layout が担います。

自然な大文字・小文字とタイポグラフィ上の句読点

テキストは自然な大文字・小文字で保存し、text-transform で大文字・小文字を設定します。そうすれば、デザインを変更するたびに文言を書き直す必要がありません。

レンダリングされるテキストには、キーボードで代用した文字ではなく、タイポグラフィ上の文字を使います。曲線型の引用符、エンダッシュ、省略記号、ノーブレークスペースは置換表に記載されています。コードでは直線型の引用符を使います。

フォントに合わせた下線

text-underline-position: from-font と text-decoration-thickness: from-font を設定するか、text-underline-offset と太さを手動で調整します。点線の text-decoration-style は、略語や定義済みの用語など、単語に追加情報があることを示します。下線の設定例を参照してください。

実際の下線で確実にアニメーションするのは色だけです。それ以外の下線アニメーションには別の要素が必要で、その動きは better-ui が担います。

モバイルでは入力欄を16pxにする

iOS Safari は、入力欄のテキストが 16px より小さい場合、ページ全体をズームします。16px を維持しながら見た目が異なる対処法が2つあるため、デザインでどちらを使うか確認してください。

• モバイルで入力欄のサイズを大きくします（text-base sm:text-sm）。小さな画面での見た目が変わります。
• font-size: 16px を維持し、transform: scale() で意図したサイズにレンダリングします。どのビューポートでも見た目は同じですが、保守するコードは増えます。

両方の設定例に加えて、プレースホルダーとキャレットのスタイルについては、details-and-accessibility.mdを参照してください。

サイズの下限

長文の本文テキストは、ブラウザーのデフォルトである 16px から始めます。サイズを変えるのは、小さめに表示される書体、狭い行幅、情報量の多い業務用ツールなど、明確な理由がある場合に限ります。

UI テキストは、さらに小さくできます。入力欄とメニューは 14px、キャプションは 13px から始め、12px 未満にするのはまれにします。読者のブラウザーのフォントサイズ設定が適用されるよう、remで font-size を設定します。

ルート要素でフォントスムージングを設定する

ルート要素に一度だけ -webkit-font-smoothing: antialiased と -moz-osx-font-smoothing: grayscale を適用し、コンポーネントごとには設定しないでください。Tailwind の antialiased は両方を設定します。

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

ブラウザーと支援技術が適切な引用符、ハイフネーション、発音を選べるよう、lang を設定します。文書全体と、方向が切り替わる箇所に dir を設定します。方向が混在する値は <bdi> で囲み、数字の並びを手動で入れ替えないでください。長い段落と数字の動作については、wrapping-and-punctuation.mdを参照してください。

狭いコンテナー内のテキストボックスをトリミングする

ボタンやバッジでは、フォントが文字の上下に確保する余白によって、テキストの位置が低く見えます。text-box: trim-both cap alphabetic を指定すると、段階的な拡張機能としてその余白をトリミングできます。エッジ、キーワード、サポート状況を参照してください。

画像ではなく CSS で装飾的なテキストを作る

ドロップキャップ、グラデーションテキスト、アウトライン、テキストシャドウは CSS で作成し、テキストを選択・検索できる状態に保ちます。プロパティとサポート状況はリファレンスに記載されています。

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

デフォルトではテキストを選択できるようにします。選択した組み合わせが読みやすければ、::selection でブランドの表現を読書体験にも取り入れられます。検索結果などのほかの範囲のスタイル設定はリファレンスを参照してください。

user-select: none は、意図しない選択が操作の妨げになる、ドラッグ可能な領域やジェスチャー操作を行う領域に使います。インターフェース全体には決して指定しないでください。また、ボタンのラベルがハイライト表示されるという理由で指定することも避けてください。

仕上げる前に

パターン	修正
読み込まれた @font-face ファイルに対応するウェイトがない font-weight の値	そのフォントフェイスを読み込むか、ファミリーに用意されているウェイトを使う
本文やインターフェースのテキストに対する font-synthesis: none	削除します。フォールバックのスタックを確認したうえで、不要な個別プロパティだけを設定します
font-variation-settings: "wght" または "opsz"	font-weight を使います。font-optical-sizing: auto が適用されるよう、"opsz" は削除します
font-feature-settings: "tnum" または "zero"	font-variant-numeric: tabular-nums または slashed-zero
px または rem 単位の line-height	単位なしの値
説明文、カード本文、または折り返しが発生する可能性のある要素に対する leading-none または leading-tight	1.4 以上
px 単位の letter-spacing	同じ値を em で指定
本文の px 単位の font-size	rem
18px 未満のテキストに対するウェイト 100～300、または font-thin、font-light	400 以上
段落に対する text-wrap: balance	text-wrap: pretty
アプリケーション UI での text-align: justify	text-align: start
display: -webkit-box を指定していない -webkit-line-clamp	display: -webkit-box と -webkit-box-orient: vertical を追加
tabular-nums を指定していないタイマー、カウンター、価格、数値列	font-variant-numeric: tabular-nums
レンダリングされる文字列内の ...、--、ハイフンでつないだ範囲	…、全角ダッシュ、または半角ダッシュ
text-decoration-skip-ink: none	削除し、代わりに text-underline-offset または from-font を設定
text-sm または 14px を指定し、モバイル向けの上書きがない <input>	モバイルで 16px にする入力欄の修正方法のいずれか
コンポーネント内の -webkit-font-smoothing または antialiased	ルートに移動
<bdi> または dir で囲まれていない名前、数字、URL などの混在方向の値	<bdi> で囲む
レイアウトのルートまたはテキストコンテナーに対する user-select: none または select-none	削除し、ドラッグ操作やジェスチャー操作を行う領域だけに使用

報告

重大度。 テキストが読めなくなる、元に戻せない形でコンテンツが切り捨てられる、または幅 320px もしくはズーム 200% でテキストがクリップされる場合は、HIGH です。後者の 2 つは better-interface へのエスカレーショントリガーなので、表面的な影響がどれほど軽微でも HIGH のままにします。MEDIUM は型システムまたは視覚的な見出し階層を損なう場合です。LOW は局所的な仕上げの問題です。

検証。 ブラウザーがない場合は、見出しレベルごとに宣言されたサイズとウェイトを確認し、各意味的セクション内で段階的に小さくなっていることを確かめます。宣言された行の高さ、単位、文字幅も確認します。現実的な文字列長を使って、切り捨てルールを確認します。ブラウザーがある場合は、計算後の値を比較してから、実際のコンテンツを表示した状態でビューポートのサイズを変更し、折り返し、最終行に単語が 1 つだけ残る問題、切り捨てを確認します。実行できなかった確認はすべて Not verified として報告します。

形式。 指摘事項は、違反している原則ごとにまとめ、重大度順に並べます。根本原因ごとに 1 行とし、該当するすべての箇所を記載します。

重大度	場所	変更前	変更後	理由

Location は path/to/file:line 形式です。Why には原則とユーザーへの影響を記載します。

HIGH が 1 件でも残る場合は最後に Block、それ以外の場合は Approve と記載し、残りの作業は表に残します。確認していない範囲について Approve としてはいけません。報告事項がない場合は「対応が必要なタイポグラフィの指摘事項はありません」と記載し、検証内容も報告します。