WEBデザインでは、**行間（line-height）と字間（letter-spacing）**の調整が読みやすさを左右します。
適切な設定は文章の印象を大きく変え、サイト全体のクオリティを高めます。
本記事では、フォントサイズと行間・字間の関係性、デザインを美しく見せるための実践ポイントをわかりやすくまとめ、今日から誰でも使えるテクニックとして紹介します。
行間（line-height）の役割を理解する
行間は文章の読みやすさと視線誘導に強く影響するため、デザイン全体を左右する重要な要素です。
line-heightを適切に設定することで、文章に余白が生まれ、ユーザーが無理なく読めるレイアウトになります。
特にスマホ閲覧では行間が詰まっていると圧迫感が増し、読了率が大幅に下がります。
行間が読みやすさを左右する理由
行間は「文章の呼吸」とも言われ、適度な余白が読者の目の疲れを軽減します。line-heightが狭すぎると文字が塊に見え、逆に広すぎると繋がりが悪くなります。
下記は行間が与える印象の違いです。
| line-height | 印象・特徴 |
|---|---|
| 1.2 | 詰まり気味で固い印象 |
| 1.5 | 標準で読みやすい |
| 1.8〜2.0 | ゆったりして洗練された印象 |
読みやすいデザインを実現するには、フォントサイズとline-heightのバランスが欠かせません。
フォントサイズと行間の黄金比
行間は単独で設定するより、フォントサイズとの関係性を意識するほうが自然です。一般的に以下の基準が目安になります。
- 本文：フォントサイズ × 1.5前後
- 見出し：フォントサイズ × 1.2〜1.4
フォントサイズが大きい場合は行間を詰め、小さい場合は広げることで、視線が流れやすくなります。
実務でよく使うline-heightの設定例
実際のWEB制作現場では以下のように使い分けることが多いです。
- 本文：16px / line-height: 1.7
- セクションリード文：18px / line-height: 1.8
- 見出し：24px / line-height: 1.3
このようにタイプごとにline-heightを変えることで、ページ全体の階層が明確になり読みやすさが向上します。
字間（letter-spacing）が作るデザインの雰囲気
字間は文字同士の“距離感”を決める重要な要素で、読みやすさだけでなくデザインの雰囲気やブランドイメージを作る力があります。
特に英字タイトルやロゴ的な装飾テキストでは、字間が大きな印象差を生みます。
字間が視認性に与える影響
字間が狭いと圧迫感が出たり読みづらくなったりしますが、広すぎると文字が散らばって見えます。適切なletter-spacingは文章にリズムを生み、ブランド性が高まります。
字間を調整する際のポイントは以下の通りです。
- 本文は0〜0.05em
- 英字タイトルは0.1〜0.2em
- スマホはやや広めにする
これらを活用することで全体のバランスが整います。
フォントサイズと字間の相性
字間はフォントサイズによっても印象が変わります。フォントが小さい場合、letter-spacingをやや広げることで読みやすさが向上します。
逆にタイトルのように大きい場合は詰めすぎると不自然になるため注意が必要です。
- 小さい文字：letter-spacing +0.05〜0.1em
- 大きい見出し：letter-spacing -0.02〜0em
この調整がデザインの完成度を左右します。
letter-spacingの設定例
実務的に使われる設定を以下のようにまとめます。
| 文字種 | 推奨letter-spacing |
|---|---|
| 日本語本文 | 0〜0.05em |
| 英字タイトル | 0.1〜0.2em |
| キャッチコピー | 0.05〜0.1em |
状況に応じて微調整することで、より洗練された印象になります。
行間と字間を同時に調整するメリット
行間と字間は単独で調整するのではなく、セットで最適化したほうが読みやすくなります。特に本文では2つを合わせて調整することで、文章の視線移動がスムーズになります。
視線の流れが整う
line-heightとletter-spacingをセットで調整すると、読者の視線が「行→行」へ自然に流れます。どちらか片方だけ整えても効果が弱く、文章がまだ読みにくいと感じる原因になります。
フォントサイズに合わせた総合調整
フォントサイズと合わせて設定することで、ページ全体の統一感が生まれます。例えば本文16pxなら、行間1.7・字間0.05emが定番です。視認性だけでなく、デザインの一体感が向上します。
スマホ閲覧での重要性
スマホは視認性が落ちやすく、字間・行間ともに広めが推奨されます。おすすめは以下です。
- 本文：line-height 1.8前後
- 本文：letter-spacing 0.05em
この設定にするだけで一気に読みやすくなります。
フォントサイズと余白の関係性
フォントサイズは行間・字間と密接に関わり、これら3つのバランスによって読み心地が大きく変わります。
フォントサイズを基準にしながら行間と字間を決めると、より自然で美しい文章になります。
フォントサイズが小さい時の注意点
フォントサイズが小さいと文字の密度が上がり視認性が下がるため、line-heightやletter-spacingで“余白”を作ることが大切です。
小さい文字ほど余白の影響が強く出るため、慎重な調整が必要になります。
大きい文字ならメリハリをつける
大きい文字は主張が強いため、行間や字間の調整も大胆で構いません。line-heightを少し詰めるだけで、高級感や重厚感を演出できます。
サイズ別のおすすめ設定
以下はフォントサイズ別の推奨値です。
| フォントサイズ | line-height | letter-spacing |
|---|---|---|
| 14px | 1.8 | 0.05em |
| 16px | 1.7 | 0.02〜0.05em |
| 20px | 1.4〜1.5 | 0〜0.02em |
デザインにおける余白の考え方
行間・字間は「余白設計」の一部であり、WEBデザインのクオリティを決める要素です。余白を整えることでページ全体が呼吸し、情報が自然に目に入るようになります。
余白を“意図的に”作る
なんとなく余白を設定するのではなく、情報の優先順位に合わせて余白を調整します。重要な文章にはやや広めのline-heightを設定し、リズムを作ります。
視線誘導をコントロールする
余白は視線の流れを作り、ユーザーが迷わず読み進められる環境を整えます。字間を少し広げるだけでも情報が整理されて見えます。
ブランドイメージに合わせた調整
ミニマルデザインや高級感のあるサイトでは、余白が広いほうが印象に合います。letter-spacingをやや広めにし、line-heightをゆったりさせると世界観が統一されます。
実践で役立つ設定テンプレート
最後に実務で使えるline-heightとletter-spacingの“テンプレ”を紹介します。初心者でもそのまま使えるため、まずはベースとして取り入れてみてください。
本文用テンプレ
本文用は「読みやすさ」最優先です。以下のテンプレがもっとも汎用的です。
- フォントサイズ：16px
- line-height：1.7
- letter-spacing：0.03〜0.05em
この設定はシンプルで汎用性が高く、ブログ・LP・ECサイトなど幅広い媒体で使えます。
見出し用テンプレ
見出しではメリハリが重要です。
- フォントサイズ：24px〜32px
- line-height：1.2〜1.4
- letter-spacing：0〜0.02em
詰まりすぎない、広げすぎない中間バランスがベストです。
キャッチコピー用テンプレ
キャッチコピーは世界観を出せるパートなので、少し大胆に設定してOKです。
- フォントサイズ：28px〜40px
- letter-spacing：0.05〜0.15em
- line-height：1.3前後
洗練された印象を与えることができます。
【まとめ】行間と字間は読み心地と世界観を作る重要要素
行間（line-height）と字間（letter-spacing）は、WEBデザインにおいて文章の読みやすさと世界観をつくる重要な要素です。
フォントサイズとのバランスを意識して適切に設定することで、読みやすさが大幅に向上します。
まずはベースの設定から実践して、サイト全体の統一感とデザイン性を高めていきましょう。
「今日の学び」
行間と字間について書きながら、
文章は“並べる”よりも“整える”ことで読みやすくなるのだと気づきました。
フォントサイズに合わせてline-heightとletter-spacingを調整するだけで、
情報の温度が変わり、言葉がふわっと息をし始めます。
文字の距離ひとつで世界観が変わるのは、あらためて面白いと思いました。
デザインの静けさは、細部の余白がつくっているのだと実感します。
今日も基本に戻りながら、丁寧に積み重ねていきたいです。
読んでくれて、ありがとう。
デザインのこと、日々の気づきのことをまとめています。
余白の美しさと、考える時間を大切にしています。
SNS更新中です🚀