「フォントを選んでもなんかしっくりこない」「行間はどのくらいがベストなのかわからない」——フリーランスデザイナーなら一度は感じる悩みの多くは、タイポグラフィの基礎知識で解決できます。タイポグラフィとは、文字の選択・サイズ・行間・字間・配置を通じてテキストを美しく・読みやすく整える技術です。この記事では、フリーランスデザイナーが実務で使える基礎知識をすべて網羅します。
タイポグラフィとは——フリーランスが身につけるべき理由
タイポグラフィ（Typography）とは、文字の書体（フォント）・サイズ・太さ・行間・字間・配置などを調整して、テキストを読みやすく・伝わりやすく・美しく整える技術・表現全般を指します。単に「フォントを選ぶ」行為ではなく、テキスト全体の視覚的な体験を設計することです。
タイポグラフィがデザイン品質を左右する理由
Webサイト・バナー・プレゼン資料・名刺——あらゆるデザイン制作物の大部分は「文字」で構成されています。タイポグラフィが整っているかどうかは、デザイン全体の完成度を直接左右します。「なんかプロっぽくない」「読みにくい」と感じるデザインの多くは、タイポグラフィに原因があります。
- 読みやすさ（可読性・視認性）が上がると、ユーザーの離脱を減らせる
- 情報の階層が明確になり、「何を一番伝えたいか」がひと目でわかるようになる
- ブランドの世界観や信頼感がフォント選択・文字組みから伝わる
- クライアントに「なぜこのフォント・この行間にしたか」を説明できるようになり、提案力が上がる
フォントの種類と選び方の基本
フォント選択はタイポグラフィの起点です。使い方を間違えると、どれだけ細かい数値を調整しても「なんかちがう」という感覚は消えません。まず種類と特性を押さえましょう。
欧文フォントの2大分類
| 分類 | 特徴 | 使いどころ |
|---|---|---|
| セリフ体（Serif） | 文字の端に「ひげ（セリフ）」がある。Times New Roman・Garamondなど | 格調・信頼感・伝統的な印象。高級ブランド・書籍・長文印刷物 |
| サンセリフ体（Sans-Serif） | セリフのないシンプルな字形。Helvetica・Noto Sans・Inter など | モダン・シンプル・可読性が高い。Web・UI・スクリーン表示全般 |
和文フォントの2大分類
| 分類 | 特徴 | 使いどころ |
|---|---|---|
| 明朝体 | 縦線が太く横線が細い。横線の端に「うろこ」がある。游明朝・ヒラギノ明朝など | 上品・格調・じっくり読ませる長文向け。雑誌・書籍・高級感のある印刷物 |
| ゴシック体 | 縦横の線が均一で視認性が高い。游ゴシック・Noto Sans JPなど | モダン・視認性重視のWeb全般。見出し・キャプション・UI要素 |
フォント選びの実務ルール
- 1つのデザインで使うフォントは原則2〜3種類まで（見出し用・本文用・アクセント用）
- 和文と欧文を混在させるときは、文字の高さ・太さが近いフォントを組み合わせる
- ウェイト（太さ）の差でメリハリをつける：見出しはBold/W5以上、本文はRegular/W3前後
- クライアントのブランドガイドラインにフォントが指定されている場合は必ず確認する
- 商用フォントのライセンスを制作前に確認し、契約範囲内で使用する
タイプスケール——フォントサイズの階層設計
タイプスケールとは、見出し・サブ見出し・本文・キャプションなど情報の階層ごとに、サイズを比率で段階的に設定する考え方です。感覚的にサイズを決めるのではなく、比率ベースで設計することで一貫性と統一感が生まれます。
Webデザインでよく使われる基本スケール例
| 要素 | 推奨サイズ（Web） | 役割 |
|---|---|---|
| H1（大見出し） | 32〜48px | ページ・記事のタイトル。最も目立つ要素 |
| H2（中見出し） | 24〜32px | セクションの区切り。H1の60〜70%前後のサイズが目安 |
| H3（小見出し） | 18〜22px | セクション内の段落見出し |
| 本文（body） | 16〜18px | 読み物コンテンツの基準サイズ。16px未満は読みにくくなりやすい |
| キャプション・注釈 | 12〜14px | 画像の説明・補足テキスト。本文より小さく控えめに |
フォントサイズは絶対値（px）より相対単位（rem・em）で設定するとアクセシビリティが上がります。1rem = ブラウザのデフォルト16pxを基準に、ユーザーがフォントサイズを変更しても崩れないレイアウトを作れます。
行間・字間・行長の基礎数値
タイポグラフィの数値設定の中で、読みやすさに最も影響を与える3要素が行間・字間・行長です。感覚に頼らず、基準値から調整する習慣をつけましょう。
① 行間（line-height）
行間はフォントサイズに対する倍率（line-height）で設定します。
- 本文（読み物）：フォントサイズの1.7〜2.0倍（170〜200%）が推奨。CSSでは
line-height: 1.8前後がよく使われる - 見出し（H1〜H3）：1.2〜1.5倍に狭める。大きなフォントは行間を広げすぎると間延びして読みにくくなる
- キャプション・注釈：1.5〜1.7倍が目安
② 字間（letter-spacing）
字間は文字と文字の間隔で、CSSのletter-spacingプロパティで制御します。
- 本文：0〜0.05em がデフォルト。和文はデフォルト（0）でも十分読みやすいことが多い
- 見出し・キャプション：0.05〜0.1em 程度の字間を広げると上品さ・ゆとりが生まれる
- 全大文字（ALL CAPS）の欧文：0.08〜0.15em 広げないと文字が詰まって見える
③ 行長（1行の文字数）
1行に収める文字数が多すぎると、次の行の先頭に視線を戻す際に迷子になります。日本語本文の最適な行長は1行あたり30〜40文字が目安とされています（英文は45〜75文字）。Webでは max-width やコンテナ幅でコントロールします。
本文 line-height: 1.7〜2.0 / 見出し line-height: 1.2〜1.5
本文 letter-spacing: 0〜0.05em / 見出し letter-spacing: 0.05〜0.1em
1行の文字数: 30〜40文字（日本語本文の目安）
和文タイポグラフィ特有のポイント
日本語は欧文と異なる特性を持ちます。和文タイポグラフィならではのポイントを押さえることで、「日本語が読みやすい」デザインを作れるようになります。
縦書き対応と横書きの使い分け
和文フォントは縦書き・横書きの両方に対応するよう設計されています。WebではCSSの writing-mode で縦書きも表現できますが、UI設計上は横書きを基本とし、縦書きは見出しやデコレーション要素に限定するのが実務上の主流です。
ウェイト（W3・W5・W7など）の使い方
和文フォントの太さは「ウェイト」で表し、ヒラギノ角ゴシックなら W3（細め・本文向け）・W6（中太・見出し向け）・W8（太め・インパクト重視）のように数字が大きいほど太くなります。Noto Sans JPなら font-weight: 300〜900 で対応します。ウェイトを2段階以上使い分けることで、フォントを変えなくても階層感を出せます。
約物（句読点・括弧・「」）の処理
日本語には句点（。）・読点（、）・鉤括弧（「」）・中黒（・）などの約物が多く使われます。これらは字幅が広く設定されているため、連続すると空白感が出てしまいます。OpenTypeの「字詰め機能」や、CSSの font-feature-settings: "palt" を使うと約物前後のスペースを詰められます。
欧文と和文の混植のコツ
「iPhone 15を使って〜」「2024年の売上は〜」のように、日本語テキスト内に数字・英字が入ることは日常的です。和文フォントの数字・英字はデザインが単調になりやすいため、欧文フォントを別途指定し、CSSのfont-familyで和文より前に書くと欧文部分だけ欧文フォントが適用され、組み合わせが美しくなります。
font-family: "Inter", "Noto Sans JP", sans-serif;
→ 英数字には Inter が適用され、日本語には Noto Sans JP が適用されます。
タイポグラフィを実務案件に活かす実践テクニック
基礎知識を実際の制作フローに組み込むことで、作業効率とデザイン品質の両方が上がります。
タイプスタイルをコンポーネント化する
FigmaではText Styleとして見出し・本文・キャプションのタイポグラフィ設定を事前に登録できます。案件開始時にスタイルを作っておくと、修正のたびに全要素に一括反映できるため作業時間を大幅に削減できます。ガイドライン納品の際にもそのまま渡せます。
タイポグラフィの選定理由を言語化して提案する
「このフォントはこのブランドの〇〇な世界観と合うと判断しました」「行間を1.8にすることで、スマートフォンでの読みやすさを確保しています」と選定理由を言葉で伝えるデザイナーは、クライアントの信頼を得やすく、修正リクエストも的確になります。
タイポグラフィ確認チェックリスト
- 見出し・本文・キャプションのサイズ差が十分に区別できるか
- 本文の行間は1.7〜2.0倍の範囲に収まっているか
- 1行の文字数が30〜40文字以内に収まっているか
- フォントは2〜3種類以内に絞られているか
- ウェイトの差でメリハリが出ているか（見出しBold・本文Regular）
- 欧文フォントと和文フォントが適切に混植されているか
- モバイル表示でフォントサイズが小さすぎないか（本文14px以上）
- コントラスト比がWCAG AAの4.5:1以上を満たしているか
まとめ
タイポグラフィの基礎は「フォント選択」「タイプスケール」「行間1.7〜2.0倍・字間0〜0.05em・行長30〜40文字」「和文特有の約物処理・混植」の4点です。フリーランスデザイナーはこれらを感覚ではなく数値と理由を持って設計する習慣を持つことで、制作品質・提案力・クライアント信頼の3つが同時に上がります。
タイポグラフィは一度身につけると、バナー・Webサイト・プレゼン資料・名刺——すべての制作物に使える普遍的な知識です。まずは今取り組んでいる案件で行間と文字サイズを見直すところから始めてみてください。
