「フォントを変えてみたけれど、なんとなくしっくりこない」「タイポグラフィという言葉は聞くが、具体的に何を決めればいいのか分からない」という方に向けて、Webデザインにおける文字の扱い方の基本を整理しました。
タイポグラフィとは、おしゃれなフォントを選ぶことではなく、文字のサイズ・太さ・行間・字間を設計して、読み手に情報の構造を伝える技術です。ここを押さえると、フォントを1種類しか使わなくても、整った画面が作れるようになります。
この記事では、Webで使う日本語フォントの選び方、文字サイズの決め方、行間や字間の目安、そして実務でつまずきやすいポイントまでをお伝えします。
タイポグラフィで決めるべき4つの要素
1. フォントの種類
日本語では、大きく分けてゴシック体と明朝体の2系統があります。画面上での読みやすさを重視するならゴシック体、落ち着きや上質さを出したいなら明朝体という使い分けが基本です。
本文にはゴシック体、見出しに明朝体という組み合わせもよく使われますが、初めのうちは1種類に統一するほうが失敗しません。
2. 文字サイズ
本文の文字サイズは、16px前後を基準にするのが一般的です。スマートフォンで16pxを下回ると、読み手が拡大操作を強いられ、離脱の原因になります。装飾のために本文を小さくするのは避けてください。
3. 太さ（ウェイト）
同じフォントでも、細字・標準・太字といった太さの違いがあります。フォントの種類を増やすより、同じフォントの太さで差をつけるほうが、まとまりを保ったまま強弱をつけられます。
4. 行間と字間
行の高さと文字の間隔は、読み心地に直接影響します。日本語は文字の密度が高いため、欧文の標準的な設定をそのまま使うと窮屈に見えます。
Webで使う日本語フォントの選び方
端末に入っているフォントを使う方法
Webフォントを読み込まず、閲覧者の端末に入っているフォントを使う方法です。読み込みが発生しないため、表示速度の面で有利という利点があります。
ゴシック体を指定する場合、macOSやiOSではヒラギノ系、Windowsでは游ゴシックやメイリオ、AndroidではNoto系が使われるよう、複数のフォント名を並べて指定するのが一般的な書き方です。
端末のフォントに任せる場合、環境によって見え方が変わります。ブランドとして文字の見た目を統一したい場合は、Webフォントの導入を検討してください。
Webフォントを読み込む方法
サーバーからフォントデータを読み込み、どの端末でも同じ見た目にする方法です。ブランドの一貫性を保てる一方、日本語フォントは文字数が多くデータが大きいため、表示速度への影響を考慮する必要があります。
無料で使える日本語フォントを探すなら、Google Fontsに選択肢がそろっています。実際の文章を流し込んで、見出しと本文の両方で見え方を確かめてから決めるとよいでしょう。
使うフォントは2種類までに絞る
見出しに1種類、本文に1種類。これ以上増やすと、画面がまとまりを失います。迷ったら1種類に統一し、太さとサイズだけで差をつけるのが、失敗しにくい進め方です。
書体ごとの印象の違いは、フォントの見本を多く載せた本で見比べておくと、候補を絞り込みやすくなります。
文字サイズの階層を設計する
サイズを決め打ちで並べる
本文16pxを基準に、そこから見出しのサイズを決めていきます。数値を思いつきで決めるのではなく、比率で並べると自然な階層になります。
| 役割 | サイズの目安 | 太さ |
|---|---|---|
| 大見出し（h2） | 24〜28px | 太字 |
| 中見出し（h3） | 18〜20px | 太字 |
| 本文 | 16px | 標準 |
| 補足・注釈 | 13〜14px | 標準 |
数値はあくまで目安です。重要なのは、使うサイズを4〜5種類に絞り、それ以外は使わないと決めることです。半端なサイズが混ざると、全体が散らかって見えます。
差は「はっきり」つける
見出しを本文より2pxだけ大きくしても、大きくしたことが伝わりません。階層をつけるなら、はっきり差をつける。中途半端な差が、最も伝わらない状態を作ります。
行間・字間の目安
行の高さ
日本語の本文では、行の高さを文字サイズの1.6〜1.8倍程度に設定すると読みやすくなります。文字サイズ16pxなら、行の高さは26〜29px前後です。
見出しのように文字が大きい場合は、この倍率を下げます。大きな文字に本文と同じ倍率を当てると、行が離れすぎて1つのまとまりに見えなくなります。
字間
大きな文字は字間が広く見え、小さな文字は詰まって見える傾向があります。見出しは字間をわずかに詰め、小さい注釈は少し広げるという調整を入れると、仕上がりの精度が上がります。
ただし、字間を詰めすぎると読みにくくなります。調整は控えめに行い、実際の画面で確認してください。
1行の文字数
本文の1行が長すぎると、折り返しで視線が迷子になります。日本語では1行あたり35〜45文字程度に収まるよう、コンテンツの最大幅を設定するのが定番です。
読みやすさを支えるその他の要素
コントラスト比
洗練された印象を狙って文字色を薄いグレーにすると、読めない人が出ます。アクセシビリティの国際的な指針であるWCAGでは、本文の文字と背景のコントラスト比は4.5対1以上、大きな文字では3対1以上が達成基準として示されています（WCAG 2.1 達成基準1.4.3）。
日本語訳はウェブアクセシビリティ基盤委員会（WAIC）が公開しています。
行揃え
日本語の本文は左揃えが基本です。中央揃えは短いキャッチコピーや見出しに限定してください。長い文章を中央揃えにすると、行頭の位置が毎行変わり、視線の戻り先が定まらなくなります。
強調のしかた
重要な言葉を目立たせたいとき、色を変える・太くする・マーカーを引くといった手段がありますが、全部を同時に使うと逆効果です。1ページの中で使う強調の手段は2種類までに絞ると、本当に大事な箇所が伝わります。
実務でつまずきやすいポイント
デザインツールと実際の表示が違う
デザインツール上では美しく見えても、ブラウザで表示すると印象が変わることがあります。フォントの読み込みが間に合わず、一瞬別のフォントで表示される現象もあります。Figmaなどで作ったデザインは、実装後に実機で確認する工程を挟んでください。
スマートフォンでの見え方
パソコンで整えた文字サイズをそのままスマートフォンに適用すると、見出しが大きすぎて何行にも折り返します。画面幅ごとに見出しのサイズを調整する設計を、最初から前提に組み込んでおく必要があります。
フォントのライセンス
フォントには利用条件があります。Webフォントとして使えるか、商用利用が可能かは、フォントごとに異なります。仕事で使う場合は、配布元の利用規約を確認してから採用してください。
学習の進め方と作業環境
数値で覚える
好きなサイトをブラウザの開発者ツールで開き、文字サイズ・行の高さ・字間の実際の数値を確認してみてください。「この見え方はこの数値だったのか」という照合を繰り返すと、感覚と数値が結びついていきます。
体系的に学びたい場合は、タイポグラフィと文字組みを扱った入門書を1冊通しておくと判断の軸ができます。日本語の組版に特化した書籍も出ているので、和文を扱う機会が多い方は手元に置いておくと役立ちます。
画面環境が判断の精度を決める
ノートPCの小さい画面だけで文字組みを詰めていると、実際の見え方と作業中の見え方がずれて、公開後に「思ったより読みにくい」と気づくことになります。
27インチのWQHDモニターを1枚足すと、デザインツールとブラウザのプレビューを並べて確認できます。デスクの奥行きが足りない場合は、モニターアームで設置面積を節約できます。文字を長時間見続ける作業になるため、ブルーライトカット機能のあるモニターや、目線の高さを調整できるノートPCスタンドも負担軽減に役立ちます。
タイポグラフィを整えると何が変わるか
情報の構造が伝わる
文字サイズと太さで階層をつけると、読み手は流し読みでもページの構造を把握できます。見出しだけを追えば内容の見当がつく状態になっていれば、タイポグラフィの設計としては成功です。
逆に、見出しと本文の見た目が近いと、読み手はページ全体を読まなければ内容を判断できません。忙しい読み手ほど、その手間を嫌って離脱します。
ブランドの印象が定まる
丸みのあるゴシック体は親しみやすく、線の細い明朝体は上品に見えます。フォントの選択は、サイトの人格を決める要素の一つです。扱う商材や読み手の年齢層と、フォントの印象がずれていないかを確認してください。
装飾に頼らずに済む
文字組みが整っていないページほど、装飾で穴埋めしようとして騒がしくなります。文字の設計が済んでいれば、色数も装飾も最小限で成立します。装飾を足したくなったときは、まず文字組みが整っているかを疑ってください。
タイポグラフィの練習方法
1つのページを3パターン作る
同じ文章で、フォントサイズと行間だけを変えた3パターンを作って並べてみてください。数値の違いが見え方にどう表れるかを、目で確認できます。頭で理解するより、この比較のほうが早く身につきます。
紙の書籍を観察する
書籍や雑誌は、文字組みの完成度が高い媒体です。1行の文字数、行間、見出しと本文の落差。Webとは条件が違いますが、読みやすい文字組みの手本として参考になります。
よくある質問（Q&A）
Q. ゴシック体と明朝体、どちらを選ぶべきですか
A. 画面での読みやすさを優先するならゴシック体が無難です。明朝体は上質さや落ち着きを表現できますが、細い線が画面環境によっては読みづらくなる場合があります。長い文章を読ませるページでは、ゴシック体を選ぶ判断が多くなります。
Q. Webフォントは使ったほうがよいですか
A. ブランドとして文字の見た目を統一したいなら有効です。ただし日本語フォントはデータが大きく、表示速度に影響します。必要な文字だけを読み込む仕組みを使うなど、速度への配慮とセットで検討してください。
Q. 本文を14pxにしてはいけませんか
A. 禁止ではありませんが、読み手の年齢層が幅広いサイトでは16px前後をおすすめします。小さい文字は洗練されて見える反面、読む負担が上がります。デザインの都合より、読める状態を優先してください。
Q. 見出しに使うフォントはどう選べばよいですか
A. まずは本文と同じフォントの太字から試してください。それで印象が足りないと感じたときに、別のフォントを検討する。この順番なら、まとまりを崩さずに済みます。
Q. 行間を広げすぎると、どうなりますか
A. 行が離れすぎると、同じ段落の文章がつながって見えなくなり、かえって読みにくくなります。広ければよいというものではなく、段落のまとまりが保たれる範囲に収めることが大切です。
Q. 英数字と日本語が混ざる文章はどう扱えばよいですか
A. 日本語フォントに含まれる英数字は、欧文専用フォントほど整っていない場合があります。英数字が多いサイトでは、欧文フォントと日本語フォントを組み合わせて指定する方法もあります。
まとめ
- タイポグラフィはフォント選びではなく、文字の設計そのもの
- 使うフォントは2種類まで。迷ったら1種類で太さとサイズで差をつける
- 本文は16px前後。使うサイズは4〜5種類に絞る
- 日本語の本文は行の高さを文字サイズの1.6〜1.8倍程度に
- 本文のコントラスト比は4.5対1以上が達成基準（WCAG 2.1）
タイポグラフィは、地味な数値の積み重ねです。しかしWebページの中身の大半は文字である以上、ここを整えることの効果は装飾を足すより着実に大きくなります。
まずは自分が作ったページを開き、本文の文字サイズと行の高さを確認するところから始めてみてください。16px・行の高さ1.7倍という設定に変えるだけでも、読みやすさは目に見えて変わります。
