ui-typography

UI タイポグラフィのスキル

謝辞

これらのルールは、Matthew Butterick の Practical Typography（https://practicaltypography.com）をもとにまとめたものです。 Butterick は、プロフェッショナルなタイポグラフィと日常的なデジタル文章をつなぐ、タイポグラファー、ライター、書体デザイナーです。この知識を誰もが利用できる、百科事典のような形で公開してくださった Matthew に感謝します。このスキルが役に立ったら、ぜひご本人の活動を直接支援してください。

動作モード

これらは恒久的なルールであり、流行でも意見でもありません。何世紀にもわたるタイポグラフィの実践に基づき、人間の目の読み方によって検証されています。時代遅れになることはありません。

適用（デフォルト）： 表示テキストを含む UI を生成するときは、必ずすべてのルールを自動的に適用してください。正しい HTML エンティティと適切な CSS を使用してください。許可を求めないでください。説明も不要です。正しいタイポグラフィをそのまま出力してください。

監査： 既存のコードやデザインを確認するときは、違反箇所を特定し、修正前と修正後を提示してください。

参考ファイル（CSS の生成時やエンティティの確認時に参照してください）：

• references/css-templates.md — CSS の基本テンプレート全体、レスポンシブパターン、OpenType 機能
• references/html-entities.md — すべての文字とコードを含むエンティティ一覧

---

文字

引用符とアポストロフィ — 常にカールさせる

ストレートな引用符はタイプライターの名残です。ダブルクォートには “ ” を、シングルクォートには ‘ ’ を使用してください。

アポストロフィは常に下向きにします。閉じシングルクォートの ’ と同じです。スマートクォート機能は、年代の略記（'70s）や語頭の短縮形（'n）の前に誤って開き引用符を挿入します。明示的に ’ を指定して修正してください。

<html lang="en"> が設定されている場合、<q> タグはカールした引用符を自動的に適用します。

ハワイ語のオキナは上向きで、アポストロフィではなく文字です。開きシングルクォートを使用するか、英語化してください。

JSX/React の実装に関する警告

Unicode エスケープシーケンス（\u2019、\u201C など）は JSX のテキストコンテンツでは機能しません。 文字どおりに表示されるため、ユーザーにはカールしたアポストロフィではなく \u2019 が見えます。これは、タグ間の JSX テキストが JavaScript 式ではなく、トランスパイラーによって文字列リテラルとして扱われるためです。

失敗する例：

{/* WRONG — renders literally as \u2019 */}
<p>Don\u2019t do this</p>

機能する方法（いずれかを選択）：

1. 実際の UTF-8 文字（推奨）： 文字をそのままソースファイルに貼り付けます。

   <p>Don\u2019t do this</p>  {/* This is the actual curly apostrophe character U+2019 */}
   

2. 文字列リテラルを使った JSX 式： JavaScript エンジンがエスケープを解釈できるよう、中括弧で囲みます。

   <p>Don{'\u2019'}t do this</p>
   

3. HTML エンティティ（HTML ファイルのみ）： ’ を使用します。ただし、これは JSX/React では機能しません。

CLI で一括修正する場合は、エスケープシーケンスではなく、生の UTF-8 バイトを使って sed を実行します。

CURLY=$(printf '\xe2\x80\x99')  # U+2019 RIGHT SINGLE QUOTATION MARK
sed -i '' "s/don't/don${CURLY}t/g" file.tsx

JavaScript のデータ配列や文字列リテラルでは、JavaScript エンジンがエスケープを処理するため、\u2019 は正しく機能します。このバグはタグ間の JSX テキストコンテンツにのみ発生します。

ダッシュとハイフン — 3 種類の異なる文字

文字	HTML	用途
-（ハイフン）	-	複合語（cost-effective）、改行
–（エンダッシュ）	–	範囲（1–10）、つながり（Sarbanes–Oxley Act）
—（エムダッシュ）	—	文の区切り—このように

-- や --- で代用しないでください。「from」で始めた場合は、エンダッシュではなく「to」と組み合わせてください。複合姓（婚姻によるもの）にはハイフン、共著者名にはエンダッシュを使用します。エムダッシュは通常、前後に空白を入れません。詰まりすぎる場合は   を追加してください。エンダッシュを使うべき箇所にスラッシュを使わないでください。句全体が形容詞として働く場合はハイフンでつなぎます（five-dollar bills）。-ly で終わる副詞の後にはハイフンを付けません。

三点リーダ — 1 文字で表す

3 つのピリオドではなく、…（…）を使用します。前後にスペースを入れ、テキストに接する側には   を使用してください。中断された会話では、三点リーダよりもエムダッシュを使います。

数学と寸法

掛け算には ×、引き算には − を使用します。+ と = はキーボードから入力します。単純なマイナス記号にはエンダッシュも使用できます。寸法では、8.5″ × 14″ のように × を使います。

フィート記号とインチ記号 — カールした引用符を使わない唯一の例外です。必ずストレートにします。フィートには '、インチには " を使用します。数値の間には   を入れます：6' 10"。

商標と著作権

実際の記号を使用してください：© ™ ®。決して (c) (TM) (R) は使用しないでください。™／® は上付き文字にし、その前にスペースを入れません。 © は文中で使い、その後に   と年を続けます。「Copyright ©」は冗長です。単語か記号のどちらか一方を使い、両方は使いません。

セクション記号と段落記号

§ (§) と ¶ (¶) の後には必ず   を付けます：§ 1782。文頭ではスペルアウトします。 複数形では二重にします：§§。

アクセント付き文字

固有名詞ではアクセント記号が必須です（François Truffaut、Plácido Domingo）。借用語は辞書で確認してください。自然化しているもの（naive）もあれば、そうでないもの（cause célèbre）もあります。

その他の句読点

• セミコロンは独立した節をつなぎます。コロンは完結する内容を導入します。混同しないでください。
• 疑問符：あまり使われていません。疑問符を使って、トピックセンテンスを簡潔にしてください。
• 感嘆符：使いすぎです。長い文書では全体で1つにとどめてください。連続して使うことは決してありません。
• アンパサンド：固有名詞でのみ正しく使えます。本文では「and」と書いてください。
• 括弧／角括弧：囲まれた内容の書式を引き継がないでください。
• 顔文字／絵文字：メールや Slack では問題ありません。正式な文書やプロフェッショナル向け UI の文言では決して使いません。

---

スペース

句読点の後は常にスペース1つ

句読点の後には、必ずスペースを1つだけ入れてください。2つ入れてはいけません。議論の余地はありません。スペースを2つ入れると、文字の間に不自然な空白が生じ、テキストのバランスが崩れます。ピリオド自体に視覚的な余白があります。

改行しないスペース

  は改行を防ぎます。数値参照の前（§ 42、Fig. 3）、© の後（© 2025）、敬称の後（Dr. Smith）、フィートとインチの値の間に使用します。

空白文字

用途	方法
単語間のスペース	単語間にスペースを1つ（スペースバー）
改行の防止	 
同じ段落内での改行	<br>
新しい段落	<p> タグ
新しいページ（印刷）	page-break-before: always
ハイフネーション位置の指定	&shy;

スペースバーを押し続けないでください。間隔を空けるために改行を2回入力しないでください。出力のインデントにタブを使わないでください。 HTML では、すべての空白文字が単一のスペースにまとめられます（  を除く）。

---

テキストの書式設定

太字と斜体

ルール1：太字か斜体のどちらか一方を使います。併用はできません。決して組み合わせないでください。 ルール2：できるだけ使用を控えてください。すべてが強調されていると、何も強調されていないのと同じです。

セリフ体：控えめな強調には斜体、強い強調には太字を使います。サンセリフ体：太字のみを使います。サンセリフ体の斜体はほとんど目立ちません。 段落全体を太字にしないでください。強調のために引用符を使わないでください。

下線 — 使用禁止

文書や UI で下線を使わないでください。下線はタイプライター時代の回避策です。太字か斜体を使ってください。ウェブリンクには、控えめなスタイルを使います：text-decoration-thickness: 1px; text-underline-offset: 2px。

全大文字 — 常に1行未満で、文字間隔を空ける

大文字は、小文字の変化に富んだ輪郭に対し、均質な矩形になるため、読みにくくなります。短い見出し、ラベル、キャプションには適しています。必ず文字間隔を5〜12％広げてください。カーニングが有効になっていることを必ず確認してください。段落全体を大文字にすることは決してしないでください。CSS では letter-spacing: 0.06em を指定します。

スモールキャップ — 実際の字形のみを使用

通常の大文字を縮小して代用しないでください。実際のスモールキャップ（OpenType smcp）を備えたフォントで font-variant-caps: small-caps を使います。システムフォントにはスモールキャップがありません。文字間隔を広げ、カーニングを有効にしてください。

文字サイズ

印刷：10〜12pt。ウェブ：15〜25px。デフォルトの12ptはタイプライター時代の名残です。0.5ポイントの差も重要です。強調には最小の単位を使ってください。ウェブで流動的なサイズを設定するには clamp() を使います。

文字間隔

全大文字とスモールキャップでは、文字間隔を5〜12％広げます。小文字では広げません。文字の間に別の文字が入るほど大きく広げてはいけません。CSS では letter-spacing: 0.05em から 0.12em を指定します。

カーニング — 常に有効

例外はありません。font-feature-settings: "kern" 1; text-rendering: optimizeLegibility;

合字

必須なのは、fi／fl が視覚的に重なる場合のみです。太字と斜体でも確認してください。それ以外は任意です。 CSS：font-feature-settings: "liga" 1。

数字の字形

表形式のデータには等幅数字（"tnum"）を使います。本文にはオールドスタイル数字（"onum"）を使います。ほとんどの場合、デフォルトの数字で問題ありません。数値テーブルには font-variant-numeric: tabular-nums lining-nums を使います。

フォントの選択

1. プロフェッショナルな制作物では、奇抜なフォント（目新しさを狙ったもの、スクリプト体、手書き風、サーカス風）は使わない
2. 本文には等幅フォントを使わない — コード専用（なお、Courier は等幅フォントの中でも最悪です）
3. 印刷物の本文では、セリフ体を強く推奨します
4. Web の本文では、現代の画面ならセリフ体でもサンセリフ体でも問題ありません
5. InDesign ではメトリクス方式で字間を調整し、オプティカル方式は使わない（オプティカル方式はカーニングを崩します）

フォントの組み合わせ

フォントは最大 2 種類にします。それぞれに一貫した役割を持たせます。セリフ体同士、またはサンセリフ体同士でも組み合わせられます。段落内での混在はほとんど避けます。コントラストは強いものより弱いもののほうが効果的な場合が多いです。

---

ページレイアウト

まず本文から

何よりも先に本文を設定します。フォント、ポイントサイズ、行間、行の長さという 4 つの要素が、すべてを決定します。ほかの要素はこれらに合わせて調整します。

行の長さ — 45～90 文字

デザイナーが最も間違えやすい、可読性を左右する最大の要因です。レスポンシブな Web レイアウトで最もよく見られる欠点でもあります。インチではなく文字数で測ります。アルファベットを基準に、1 行に小文字のアルファベットを 2～3 回分収めます。CSS：テキストコンテナーに max-width: 65ch を指定します。

行間 — ポイントサイズの 120～145％

line-height: 1.2～1.45 にします。シングルスペース（約 117％）は詰まりすぎです。ダブルスペース（約 233％）は空きすぎです。ワープロの「シングル」と「ダブル」は、どちらも最適な範囲から外れています。

ページの余白

比例フォントでは 1 インチでは足りません。印刷物：12pt の場合は 1.5～2.0″。Web：テキストコンテナーに max-width と padding を設定します。余白を恐れないでください — たっぷりとした余白はプロフェッショナルな印象を与えます。

テキストの配置

Web では左揃えにします（デフォルト）。両端揃えには hyphens: auto が必要ですが、ブラウザーの処理は粗雑です。中央揃えは短いタイトル（1 行未満）に限り、控えめに使います。テキストブロック全体を中央揃えにするのは避けます。

段落の区切り — インデントか間隔のどちらか一方

1 行目のインデント：ポイントサイズの 1～4 倍。text-indent: 1.5em。最初の段落では省略してもかまいません。 段落間の間隔：フォントサイズの 50～100％。margin-bottom: 0.75em。<br> タグの二重使用は避けます。

見出し — 最大 3 階層

1. 見出しをすべて大文字にしない（非常に短く、かつ文字間を広げる場合を除く）
2. 見出しに下線を引かない
3. 見出しを中央揃えにしない（例外はまれ）
4. 上下に余白を設けて強調する — 控えめながら効果的です
5. イタリック体ではなく太字を使う — より目立ちます
6. ポイントサイズの差は必要最小限にする（本文が 11pt なら、見出しは 18pt ではなく 13pt）
7. 見出しには hyphens: none を指定する
8. 下より上の余白を大きくする（見出しは後に続くテキストと関連するため）
9. 見出しを次の段落と同じページに配置する（page-break-after: avoid）
10. ローマ数字（I.A.1.a.i）より段階的な番号（1.1、2.1）を使う

ブロック引用

サイズと行間を少し小さくします。2～5em 字下げします（引用符は使いません。字下げが引用であることを示します）。読みやすい行の長さを保ちます。長いブロック引用は、手抜きの文章を示すため、控えめに使います。

リスト

意味的に適切なマークアップ（<ul>、<ol>）を使い、手動で箇条書きにしないでください。中空の丸を推奨します。アスタリスクは箇条書き記号として小さすぎます。インデントを深くしすぎないでください。

表 — 枠線をなくし、余白を加える

データ自体が暗黙のグリッドを作ります。枠線は見た目を煩雑にします。ヘッダー行の下に細い線だけを残します。 padding: 0.5em 1em。数値列には等幅数字を使います。数値は右揃えにします。

罫線と枠線

まず上下の余白で区切れるか試します。枠線の太さは 0.5～1pt にします。模様入りの枠線は使いません。太い線はチャートジャンクです。

ページ内の流れの調整

ウィドウ（ページ上部に孤立した最終行）とオーファン（ページ下部に孤立した先頭行）に注意します。印刷用 CSS： orphans: 2; widows: 2。見出しには page-break-after: avoid を指定します。ハイフネーションエンジンが誤処理する単語には、ソフトハイフン ­ を使います。

段組みとグリッド

印刷物の段組み：レターサイズの用紙では 2～3 段とし、4 段にはしません。Web の段組み：下端が定まらず、不自然になりがちです。グリッドは指針であって保証ではありません — シンプルなグリッドほど一貫性を保ちやすくなります。見栄えの悪いものをグリッドに揃えても、見栄えは悪いままです。

レスポンシブなWebタイポグラフィ

画面サイズが変わってもルールは変わりません。 行の長さ、行間、階層は同じです。

1. font-size とコンテナーの width を一緒に拡大縮小します
2. テキストコンテナーには必ず max-width を設定します — テキストを端から端まで広げないでください
3. 正確な計測に ch 単位を使わないでください（ゼロの幅しか計測しません）
4. 流動的な拡大縮小には clamp() を使います：font-size: clamp(16px, 2.5vw, 20px)
5. モバイルでの最小値：テキストコンテナーに padding: 0 1rem を設定します
6. よくある失敗：画像やナビゲーションは丁寧に拡大縮小するのに、本文テキストを見落とすことです

---

画面での考慮事項

現代の画面では、印刷物とほぼ同じように文字を表示できます。「画面にはサンセリフ体」という考え方は、72dpi の時代には正しかったものの、現在では時代遅れです。現代の画面ではセリフ体も問題なく使えます。ダークモードでは、ウェイトを少し軽くします。 macOS と Windows でテストしてください（アンチエイリアス処理が異なります）。

---

ページレイアウトの原則

1. まず本文テキストから — その4つのプロパティがすべてを決定します
2. 前景と背景 — 装飾要素が本文テキストより目立たないようにします
3. 目に見える最小単位 — 0.5ポイントの差も重要です
4. 迷ったら両方試す — サンプルを作り、理論だけで判断しないでください
5. 一貫性 — 同じものは同じように見せます
6. 新しい要素を既存の要素に関連付ける — 各要素が次の要素を制約します
7. シンプルに保つ — 3色と5種類のフォントですか？ もう一度考えてみてください
8. 気に入ったものを模倣する — 実例から優れたタイポグラフィを取り入れます