Webタイポグラフィ基礎｜日本語フォントの選び方とfont-size・line-heightの実務指針

2026年6月20日

Webサイトの印象の大部分は文字が決めています。画面のほとんどはテキストだからです。にもかかわらず、フォント指定やline-heightはテンプレートの初期値のまま、というプロジェクトは少なくありません。特に日本語は欧文と事情が異なる点が多く、欧文向けのベストプラクティスをそのまま適用すると読みにくくなります。

この記事では、日本語Webフォントの選び方と読み込み対策、そしてfont-size・line-height・letter-spacingの実務的な指針をまとめます。

日本語Webフォントの選び方と読み込み対策

日本語フォントの最大の問題はファイルサイズです。欧文フォントが数十KBで済むのに対し、日本語フォントは漢字を含むため、フルセットでは数MB規模になります。何も対策せずに読み込むと、表示速度に直撃します。

実務での現実的な選択肢は次の通りです。

Google Fonts経由で使う: Noto Sans JPなどはユニコードレンジ単位でサブセット分割されて配信されるため、実際に使う文字の分だけダウンロードされる
システムフォントで済ませる: 管理画面や社内ツールなら、OS標準フォントのスタックで十分なことが多い
font-display: swap を指定する: フォント読み込み中も代替フォントでテキストを表示し、読めない時間（FOIT）を防ぐ

body {
  font-family: "Noto Sans JP",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
}

Webフォントを使う場合も、フォールバックのシステムフォントスタックは必ず書いておきます。読み込み失敗時や表示直後の体験がここで決まります。

font-size：本文16px以上、階層は控えめに

本文のfont-sizeは16pxが事実上の下限です。日本語は漢字の画数が多く、同じピクセル数でも欧文より小さく感じられるため、14px以下の本文は長文では厳しくなります。また、iOS Safariではフォームのfont-sizeが16px未満だとフォーカス時に画面がズームされる挙動があるので、入力欄は16px以上にしておくのが安全です。

本文: 16px（rem指定なら1rem）
補足・キャプション: 14px。これより小さい文字は原則使わない
見出し: 1.25倍前後の比率で3〜4段階。日本語では欧文ほど大きなジャンプは不要

単位はpx直書きよりremを推奨します。ブラウザのフォントサイズ設定を変更しているユーザーにも追従できるためです。

line-heightとletter-spacing：日本語は広めが基本

日本語の本文は、欧文の推奨値（1.4〜1.5）より広いline-heightが必要です。文字が正方形に近く行が密集して見えるためで、本文は1.7〜1.9が読みやすい範囲です。一方、見出しは行間が広いと間延びするので1.3〜1.5程度に締めます。

body {
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
h1, h2, h3 {
  line-height: 1.4;
  letter-spacing: 0.03em;
}

letter-spacingは、日本語ではわずかに空ける（0.02〜0.05em）と可読性が上がります。ただし広げすぎると単語のまとまりが失われるので、0.1emを超える指定は見出しなど短いテキストに限定してください。なお、line-heightは単位なしの数値（1.8）で指定するのが安全です。pxやemで固定すると、子要素でフォントサイズを変えたときに行間が破綻します。

一行の長さと組版の細部

行間と同じくらい効くのが一行の長さです。全角で35〜40文字程度を超えると、視線が次の行頭に戻るのが難しくなります。本文コンテナには max-width: 40em 前後の上限を設けましょう。加えて、日本語特有の細部として次の2点を押さえておくと仕上がりが変わります。

overflow-wrap: break-word を指定し、長いURLや英単語によるレイアウト崩れを防ぐ
text-align: justify（両端揃え）は日本語では行末が揃って見栄えがよいが、英数字混在時に不自然な空きが出ることがあるため本文で試してから採用する

まとめ

日本語Webタイポグラフィの実務指針は、フォントはサブセット配信＋font-display: swapで読み込み負荷を抑え、本文は16px以上・line-height 1.7〜1.9・letter-spacing 0.02em前後、一行は全角40文字以内、という数値に集約できます。どれもCSS数行で実現でき、効果は画面全体に及びます。デザインの中でもタイポグラフィは、投資対効果が最も高い領域です。