「フォントは選んだのに、なぜかしっくりこない」「行間や文字の大きさはどう決めればいいの？」と迷っていませんか。結論から言えば、文字の大きさは役割ごとの段階（タイプスケール）で決め、行間、字間、1行の長さを目安の数値から調整し、和文ならではの約物や欧文との混植を整えることで、感覚に頼らず読みやすい文字組みを作れます。
この記事でわかること
【結論】タイポグラフィで押さえるべき基礎は？
タイポグラフィとは、書体の選択、文字の大きさと太さ、行間、字間、配置などを整えて、文章を読みやすく、伝わりやすく、美しく見せる技術です。フリーランスのデザイナーが実務で押さえるなら、次の3つから始めてください。
- 文字の階層を段階で決める見出し、本文、注釈の大きさと太さを、基準の本文サイズから段階的に決め、全体で統一する
- 行間、字間、1行の長さを整える読み物の本文は行間を広めに取り、1行が長くなりすぎないよう幅を調整する
- 和文ならではの処理を加える句読点や括弧などの約物の詰め、欧文や数字の書体の指定で、日本語の文章を整える
数値はあくまで目安です。実際の文章と画面や紙で見え方を確かめて調整することが、読みやすさへの近道です。
文字組みの力は、Webサイト、バナー、資料、印刷物など、あらゆる制作物の質を底上げします。そのスキルを活かせる案件を探すなら、エージェントを比べる方法もあります。
タイポグラフィはなぜデザインの質を左右する？
多くの制作物は文字が情報の中心で、文字の組み方が整っていないと、配色やレイアウトが良くても「読みにくい」「素人っぽい」印象になりやすいからです。逆に文字組みが整うと、次のような効果があります。
- 読みやすくなる最後まで読んでもらいやすくなり、内容が伝わる
- 情報の優先順位が伝わる何がいちばん大事かが、ひと目で分かるようになる
- ブランドの印象が出る書体と組み方から、信頼感や親しみやすさなどの雰囲気が伝わる
- 提案の説得力が上がる「なぜこの大きさと行間にしたか」をクライアントに説明できる
書体の種類と選び方は別記事で
ゴシック体と明朝体、セリフとサンセリフなど書体の系統や、用途別の選び方、ライセンスの確認は、フォント選びの記事で詳しく解説しています。この記事では、選んだ書体をどう組むかに絞って説明します。
あわせて読みたい（書体の選び方とデザインの力）
文字の大きさはどう決める？
文字の大きさは、本文のサイズを基準に、見出しや注釈を一定の比率や段階で決める「タイプスケール」で設計すると、感覚で決めるより統一感が出ます。Webの読み物では、本文を16px前後にするのが一般的な出発点です。
| 役割 | Webでの目安 | 考え方 |
|---|---|---|
| ページの大見出し | 32〜48px | ページでいちばん目立つ要素。スマートフォンでは小さめに調整する |
| セクションの見出し | 24〜32px | 大見出しとの差がはっきり分かる大きさにする |
| 小見出し | 18〜22px | 本文より一回り大きく、太さでも区別する |
| 本文 | 16〜18px | 読み物の基準。読む人や媒体に合わせて調整する |
| 注釈、キャプション | 12〜14px | 本文より控えめに。小さくしすぎない |
多くのブラウザは標準の文字の大きさを16pxにしています。CSSでremなどの相対的な単位を使うと、利用者がブラウザで文字を大きくしたときにも比率を保ちやすくなります。Webのアクセシビリティの国際的なガイドライン（WCAG 2.2）でも、文字を200%まで拡大しても内容や機能が失われないこと（レベルAA）が求められています。
行間・字間・1行の長さの目安は？
日本語の読み物の本文は、行間を文字の大きさの1.7〜2.0倍、字間は標準からわずかに広げる程度、1行は30〜40文字程度を目安にし、見出しは行間を狭めて締めると、読みやすい組み方になりやすいです。
| 要素 | 本文の目安 | 見出し・注釈 |
|---|---|---|
| 行間（line-height） | 1.7〜2.0倍 | 見出しは1.2〜1.5倍、注釈は1.5〜1.7倍 |
| 字間（letter-spacing） | 0〜0.05em | 見出しは0.05〜0.1em程度広げると、ゆとりが出る |
| 1行の長さ | 日本語で30〜40文字程度 | 見出しは1〜2行に収まるよう言葉を絞る |
アクセシビリティの基準とあわせて確かめる
WCAG 2.2では、最も高いレベルAAAの基準として、段落内の行間を1.5倍以上にすることや、1行の幅を80文字以下（日本語などのCJKは40文字以下）にすることが示されています。また、レベルAAの基準では、利用者が行間を1.5倍、段落の間隔を2倍、字間を0.12倍などに広げても内容が失われないことが求められています。数値の目安とあわせて、文字を広げたり拡大したりしても崩れないかを確かめましょう。
あわせて読みたい（読みやすさの基準）
和文ならではの組み方のポイントは？
和文では、ウェイトの使い分け、句読点や括弧などの約物の詰め、欧文や数字との混植、縦書きの使いどころの4つが、読みやすさと見た目の整い方を大きく左右します。
| ウェイト | 和文書体の太さは「W3」「W6」のように表され、数字が大きいほど太い。書体を増やす前に、同じ書体のウェイトの差で階層を作る |
|---|---|
| 約物の詰め | 句読点や括弧は字幅が広く、続くと間延びして見える。OpenTypeの機能（CSSではfont-feature-settingsの”palt”など）で詰められる |
| 欧文との混植 | 和文書体の英数字が合わない場合は、欧文書体を別に指定する。CSSのfont-familyで欧文書体を和文書体より前に書くと、英数字に欧文書体が使われる |
| 縦書き | WebではCSSのwriting-modeで縦書きにできる。本文は横書きを基本にし、縦書きは見出しや装飾に使うことが多い |
欧文と和文を混植するCSSの例
font-family: “Inter”, “Noto Sans JP”, sans-serif;
英数字にはInterが、日本語にはNoto Sans JPが使われます。約物を詰めたい見出しには、font-feature-settings: “palt”; を指定します。
約物を詰める処理は、見出しなど短い文字では整って見えますが、長い本文に使うと文字が詰まりすぎて読みにくくなることがあります。見出しと本文で使い分け、実際の文章で見え方を確かめましょう。
タイポグラフィを実務でどう活かす？
案件の最初に文字のスタイルを登録して全体で使い回し、選んだ大きさや行間の理由を言葉でクライアントに伝えると、作業の速さと提案の説得力の両方が上がります。
- 文字のスタイルを登録するFigmaのテキストスタイルやIllustratorの段落スタイルなどに、見出し、本文、注釈の設定を登録し、修正を一括で反映できるようにする
- ルールを一覧にして共有する書体、大きさ、太さ、行間を一覧にし、クライアントや実装するエンジニアに渡す
- 選んだ理由を言葉にする「スマートフォンで読みやすいよう行間を1.8倍にしました」など、根拠を添えて提案する
- 媒体ごとに見直す同じ設定でも、画面と紙、パソコンとスマートフォンで見え方が変わるため、それぞれで確かめる
あわせて読みたい（ツールと制作物）
仕上げに何をチェックする？
仕上げでは、文字の階層、行間と1行の長さ、書体の数、混植と約物、小さい画面での読みやすさ、背景とのコントラストの6点を確かめます。
- 見出し、本文、注釈の差が分かる大きさと太さで、ひと目で階層が区別できる
- 本文の行間と1行の長さが適切行間が詰まりすぎず、1行が長すぎない
- 書体の数が絞られている基本は2〜3種類まで。差はウェイトで付けている
- 混植と約物が整っている英数字の書体がなじみ、見出しの約物が間延びしていない
- 小さい画面でも読めるスマートフォンで本文や注釈が小さすぎない
- 背景とのコントラストが十分WCAG 2.2では、通常の文字は4.5対1以上のコントラスト比（レベルAA）が示されている
よくある質問（FAQ）
文字の大きさは本文を基準にしたタイプスケールで決める。Webでは拡大しても崩れない作りにする
日本語の本文は行間1.7〜2.0倍、1行30〜40文字程度を目安にし、見出しは行間を狭める。WCAGの基準でも確かめる
和文はウェイト、約物の詰め、欧文との混植を整え、仕上げに6点をチェック。数値は実際の見え方で調整する
タイポグラフィは、一度身につけるとすべての制作物に使える力です。まずは今の案件で、本文の行間と1行の長さを見直すところから始めてみてください。
