Webサイトやデザインデータを制作するとき、「なんとなく文章が読みにくい」と感じた経験はありませんか。その原因の多くは行間（行送り）の設定にあります。フォントや配色を整える前に、まず行間を最適化するだけで、ページの可読性は劇的に向上します。
しかし、いざ調べてみると「1.5が良い」「1.75が読みやすい」「2.0が美しい」といった情報が混在しており、結局どの値を採用すべきか迷ってしまう方も多いはずです。本記事では【2026年最新】の知見と、MDNやWCAGなどの一次情報、さらに国内外の有名サイトが採用している実例を統合し、行間の最適値を体系的に解説します。
Webデザイナー・コーダー・ブロガー・DTPデザイナーまで、文字を扱うすべての方が「もう迷わない」状態になる完全ガイドとしてお届けします。
行間とは何か｜行送り・line-heightとの違い
行間という言葉は日常的に使われますが、厳密には「行間」「行送り」「line-height」はそれぞれ異なる概念を指します。
まずは用語を正しく整理しておきましょう。
行間・行送り・leadingの定義
「行間」は文字どおり、ある行の文字の下端と次の行の文字の上端の間にできる空白を指します。
一方の「行送り」は、ある行のベースラインから次の行のベースラインまでの距離、つまり文字の高さも含めた行と行の間隔です。
英語ではこれを「leading（レディング）」と呼びます。
CSSで使われるline-heightプロパティは、読んで字のごとく「行の高さ」を指定するプロパティで、英語で行送りはLeadingと呼ばれるため、厳密にはline-heightは行間そのものではなく行送りに近い概念です。
Web制作の現場では「行間＝line-height」と扱われることが多いですが、DTPと混在する場面では用語の違いを意識すると認識のズレを防げます。
CSSにおけるline-heightの基本
line-heightはCSSのプロパティで、書字方向が水平の場合は行ボックスの高さを設定し、主にテキストの行間を設定するために使用されるものです。
文字サイズそのものを変えず、文字の上下に余白を加えて行と行の距離を調整します。
初期値はnormalで、デスクトップブラウザー（Firefoxを含む）は要素のfont-familyによって決まる、おおよそ1.2という既定値を使う仕様です。
つまり何も指定しないと、日本語の長文には明らかに窮屈な行間で表示されてしまいます。
行間の最適値はいくつか｜結論と根拠
まず結論からお伝えします。
日本語の本文における行間の最適値はline-height: 1.5〜2.0の範囲です。
その中でも特にバランスが良いのが1.7〜1.8前後とされています。
1.5〜2.0が推奨される理由
多くの専門家やデザイン制作者がこの範囲を推奨しています。
読みやすいline-height（行の高さ）は1.5〜2.0と言われており、1.5は読みやすいと言われている範囲だが、比較してみると意外と行間が狭く窮屈な印象を与えるため、本文では1.7前後を採用する制作者も多いのが実情です。
また行間（line spacing）は130〜150%が理想とされ、120〜200%の範囲が許容され、140%が最も引用されるスイートスポットであるという見解もあり、欧文・和文ともに概ね同じ傾向です。
日本語は欧文よりも文字密度が高く、漢字・ひらがな・カタカナが混在するため、欧文よりやや広めの1.7〜1.8が好まれる傾向にあります。
WCAGが定めるアクセシビリティ基準
主観的な読みやすさだけでなく、アクセシビリティの観点からも公式な指針が存在します。
主要な段落コンテンツでは、line-heightの値が1.5以上になるようにし、これは弱視の人や認知障碍を負った人に有用であるとMDN Web Docsは明記しています。
さらにline-height 1.4〜1.6はW3CおよびWeb Content Accessibility Guidelines（WCAG）の標準的な推奨値で、WCAG 2.2の達成基準1.4.12では行間1.5のサポートが要求されると整理されています。
WCAG 2.1の達成基準1.4.8「視覚的提示」では、段落中の行送りは少なくとも1.5文字分あり、段落の間隔はその行送りの少なくとも1.5倍以上あることが推奨されている点もあわせて押さえておきましょう。
行間1.5未満は、可読性が低いだけでなく、アクセシビリティ違反として監査で指摘される可能性があります。
BtoBや公的サイトでは特に注意が必要です。
主要サイトのline-height実例
理論だけでなく、実際に多くのユーザーに読まれている有名サイトがどの値を採用しているかを知ることは、最適値を決める強力な参考になります。
日本語サイトの設定値
国内主要サイトの設定を見ると、おおむね1.6〜2.0の範囲に収まっています。
和文の例として、AXISやCasa BRUTUSのようなデザイン系雑誌のウェブサイトの本文は2.0相当のline-heightを使い、noteでは1.875、ZennやQiitaは1.9に設定されていることが報告されています。
ニュース系では、日経新聞が1.8、朝日新聞が1.6に設定されている状況です。
記事のジャンルやレイアウトによって、ニュースサイトはやや狭め、長文を読ませる読み物系・技術系メディアは広めに設定する傾向が読み取れます。
欧文・海外サイトの設定値
欧文サイトは日本語サイトよりやや狭めの数値を採用するのが一般的です。
欧文の例として、FigmaのBlogの本文は1.5、A List Apartの記事は1.7、web.devでは約1.78が使われていることが確認できます。
ニュースサイトではNew York Timesが1.5相当、BBCが1.375相当と、日本語サイトよりさらに狭めです。
これは欧文（ラテンアルファベット）は文字自体の高さが低く、横方向の連続性が高いため、狭い行間でも視線移動がしやすいためです。
和文と欧文では最適なline-heightが異なるという点は、多言語サイトを設計する際にも重要な知見です。
用途別・要素別の最適なline-height
「本文は1.7」のように一律で決めるのではなく、要素ごとに最適なline-heightは異なります。
ここでは用途別の推奨値を整理します。
本文（pタグ）に推奨される値
長文を読ませる本文ではline-height: 1.7〜1.9が最もバランスが良い設定です。
ブログ記事・コラム・オウンドメディアなど、ユーザーが数分以上滞在して読むコンテンツでは、1.8前後を基準に微調整するのがおすすめです。
フォントサイズ別にpx換算すると、フォントサイズ16pxの場合、line-height 1.5は24px、1.75は28px、2.0は32pxとなる計算です。
デザインデータをFigmaやXDで作成する際の参考値として覚えておくと便利です。
見出し（h1〜h6）に推奨される値
見出しは本文よりも文字サイズが大きいため、本文と同じ倍率を適用すると間延びして見えてしまいます。
見出しなどサイズの大きな要素は、本文よりやや小さく1.2くらいに指定することもあるのが定石です。
具体的にはh1〜h2で1.2〜1.4、h3〜h4で1.3〜1.5を目安にしましょう。
2行以上の見出しになる可能性がある場合は、1.3前後にしておくと2行目との間が詰まりすぎず、視認性を保てます。
ボタン・キャプション・注釈の値
ボタンラベルやアイコン横のテキストなど、要素の中で1行のみ表示される短いテキストでは、1.0〜1.2のように狭めに設定してボックスとの余白を整えるのが一般的です。
一方、注釈やキャプションのように小さい文字で複数行になりうる箇所は、本文と同等の1.5〜1.7を維持するのが読みやすさのコツです。
line-heightの正しい指定方法
同じ「1.5」でも、単位の付け方によって挙動が大きく変わります。
誤った指定をすると、思わぬレイアウト崩れの原因になります。
単位なし指定が推奨される理由
line-heightは単位なしの数値指定が公式に推奨されています。
単位なしの値の使用値は、その数値に要素のフォントサイズを掛けたものになり、ほとんどの場合、継承時の予期しない結果を避けるためにこれがline-heightを設定する好ましい方法であるとMDNでも明記されています。
具体例で比較してみましょう。
親要素にfont-size: 16pxとline-height: 1.5emを指定した場合、計算結果である24pxという値がそのまま子要素に継承されます。
子要素のフォントサイズが30pxだった場合でも行の高さは24pxのままなので、文字が重なってしまいます。
一方で単位なし（line-height: 1.5）にしておけば、子要素のフォントサイズ30pxに対して45pxの行の高さが自動計算されるため、レイアウトが崩れません。
px・em・%指定の落とし穴
pxは絶対値で行の高さを固定するため、ユーザーがブラウザの文字サイズ設定を変更しても行間が拡大されず、アクセシビリティ上の問題が発生します。
emや%は単位なしと似た挙動に見えますが、パーセントやemなどは親要素のフォントサイズが子要素に引き継がれてしまうため、親要素と子要素のフォントサイズが異なる場合、行間が崩れてしまう可能性があるのが弱点です。
既存サイトのCSSをリファクタリングする際、line-heightにpxやemが使われていたら単位なしに置き換えるだけで、レスポンシブやアクセシビリティの問題が一気に解決することがあります。
実装サンプルコード
ベーシックな実装例は以下のとおりです。
本文・見出し・小要素で値を分けるのがポイントです。
/* ベース設定 */
html {
font-size: 100%; /* 16px基準 */
}
body {
font-size: 1rem;
line-height: 1.8; /* 本文は広めに */
font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
}
/* 見出しは狭めに */
h1 { font-size: 2rem; line-height: 1.3; }
h2 { font-size: 1.5rem; line-height: 1.35; }
h3 { font-size: 1.25rem; line-height: 1.4; }
/* 段落の余白も忘れずに */
p {
margin-bottom: 1.5em;
}
/* キャプション・注釈 */
.caption {
font-size: 0.875rem;
line-height: 1.6;
}読みやすさを高める行間以外の要素
line-heightだけを最適化しても、他の要素がチグハグだと読みやすさは頭打ちになります。
タイポグラフィ全体として整えることで、行間の効果は最大化します。
フォントサイズと1行の文字数
本文のフォントサイズは最低16px、推奨18〜20pxです。
本文はデスクトップ・モバイルともに最低16pxとし、line-heightは1.4〜1.6、1行の文字数は50〜75文字とすることが推奨され、16pxはブラウザのデフォルトでありGoogleのモバイルフレンドリーガイドラインが明示的に推奨するサイズであるとされています。
1行の文字数も可読性に大きく影響します。
読みやすいテキストの理想的な1行の長さは1行あたり50〜75文字（CPL）で、66文字が広く受け入れられているスイートスポットであり、この範囲は眼精疲労を軽減し理解度を高め、読者の集中を維持する。
長すぎる行は疲労を引き起こし、短すぎる行は読みのリズムを崩すと整理されています。
日本語の場合は全角文字なので、35〜45文字程度が目安です。
段落間の余白（margin）
行間と並んで重要なのが段落と段落の間の余白です。
WCAGでは段落の間隔は行送りの少なくとも1.5倍以上が推奨されているため、line-height: 1.8の本文ならばp要素にmargin-bottom: 1.5em〜2em程度を確保するのが理想的です。
行間と段落間隔が同じ値だと、どこで段落が切れているか視覚的に判別しにくくなります。
段落間は行間より明確に広く取るのが鉄則です。
文字色・コントラスト
真っ黒（#000000）の文字は意外と目に刺激が強く、長文では疲労の原因になります。
本文には#212529や#333333のようなやや明度を落とした濃いグレーを使うのが現代Webデザインの標準です。
背景とのコントラスト比はWCAG AA基準で4.5:1以上を確保しましょう。
デバイス別・レスポンシブでの調整
PC・タブレット・スマートフォンでは画面サイズも視聴距離も異なるため、行間の最適値もわずかに変化します。
スマートフォンでの最適値
スマートフォンは画面が小さく、1行の文字数も自然と少なくなるため、PCよりわずかに広めの行間が読みやすくなります。
具体的にはPC本文を1.7にしている場合、SPでは1.8〜1.9に上げると視線移動が安定します。
また、Safari on iOSはフォームフィールドのfont-sizeが16px未満だと自動的にズームしてしまうため、すべてのinput・textarea・selectにfont-size: 16px（または1rem）を設定する必要があり、これは本番サイトで最も一般的かつ見過ごされがちなモバイルUXバグである点にも注意が必要です。
レスポンシブでの可変設定
近年はclamp関数を使ってフォントサイズと行間を画面幅に応じて滑らかに変化させる手法が主流です。
サンプルコードは次のとおりです。
body {
/* 画面幅375pxで16px、1440pxで18pxに滑らかに変化 */
font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
line-height: 1.8;
}
@media(max-width: 768px){
body {
line-height: 1.85; /* モバイルではわずかに広く */
}
}
p {
/* 1行の文字数を制限 */
max-width: 40em;
}レスポンシブ設計でやってしまいがちなミスが、SP表示時にfont-sizeだけ縮小してline-heightを単位付き（pxやem）で固定してしまうことです。
行間が文字サイズに追従しなくなり、極端に窮屈な表示になります。
DTP・印刷物における行間の考え方
Webと印刷では行間の表記方法や最適値が異なります。
Webデザイナーも印刷物を扱う機会があるため、両方の知識を持っておくと有利です。
二分四分（にぶしぶ）という伝統的な指標
日本の組版には古くから受け継がれてきた行間の基準があります。
ブログ記事の行間はline-heightを1.6〜2くらいにするのがオススメで、これには「二分四分」という用語がキーになると紹介されているとおり、和文組版における伝統的な美しい行間の比率が「二分四分」です。
これは文字サイズに対して0.75倍の行間（＝line-heightで言えば約1.75）を意味する言葉で、長年の経験則として日本語に最も自然な余白とされてきました。
迷ったらline-height: 1.75を出発点に微調整すると失敗しません。
PhotoshopやIllustratorでの設定
Adobe系のアプリケーションでは行送りをpt単位で指定します。
フォントサイズ16ptに対してline-height 1.75を再現したい場合は、行送りを16×1.75=28ptに設定すれば同じ見た目になります。
WebデザインデータをFigmaで作る場合も、フォントサイズ16pxに対して行の高さ28pxを指定すれば、コーディング時にline-height: 1.75として再現できます。
避けるべき行間の典型的なNGパターン
最後に、現場でよく見かける「やってはいけない行間設定」をまとめます。
これらを避けるだけで、品質は一段上がります。
狭すぎる行間（1.2以下）
ブラウザのデフォルト値である1.2のまま本文を表示してしまうケースは、リセットCSSを当てていないサイトでよく見られます。
アイトラッキング実験では、テキストの行間を0.8から1.8まで変えて可読性と理解度を測定した結果、0.8と1.8の両極端では可読性が損なわれたと報告されており、特に狭すぎる行間は致命的に読みにくくなります。
広すぎる行間（2.2以上）
「ゆとりがある方が読みやすそう」と考えて2.2や2.5に設定すると、行と行のつながりが断たれ、視線が次の行を見失いやすくなります。
1行を読み終えたあと、次の行を探す時間が長くなるためです。
読み物として連続性が必要なテキストでは2.0を上限と考えましょう。
要素ごとにバラバラな指定
同じ階層の段落なのにp要素ごとに別々のline-heightが指定されていると、全体のリズムが崩れます。
同じような要素では一貫したline-heightを維持し、たとえばすべての段落のline-heightが1.5であれば、特定のデザイン上の理由がない限り変更しないことが推奨されています。
グローバルCSSで基準値を1つ決め、必要な箇所だけ上書きするのが整然とした設計です。
まとめ｜行間最適化で読まれるコンテンツへ
本記事では、行間（line-height）の最適値を多角的に解説してきました。
要点を改めて整理します。
- 日本語本文の最適値はline-height: 1.7〜1.9、迷ったら1.75（二分四分相当）が基準
- WCAGとMDNはアクセシビリティの観点から1.5以上を推奨
- line-heightは単位なしの数値指定が継承トラブルを防ぐ最善策
- 見出しは1.2〜1.4と狭めに、本文との階層差を演出
- フォントサイズは最低16px、1行の文字数は和文35〜45文字が目安
- 段落間の余白は行送りの1.5倍以上を確保
- スマホでは本文を0.1〜0.2ほど広めに
行間はサイトの第一印象と滞在時間に直結する、地味ながら極めて重要な要素です。
コンテンツ自体の質を高める努力と同じくらい、それを「読み続けてもらえる器」としてのタイポグラフィにも投資する価値があります。
本記事の数値をスターターキットとして、自分のサイトのフォント・コンテンツの性質・ターゲットユーザーに合わせて微調整を重ねてください。
最適な行間は、ユーザーが行間の存在を意識しなくなったときに達成されます。
読まれるコンテンツづくりの第一歩として、ぜひ今日から実装してみてください。
