行間と字間のバランスで可読性が劇的に変わる｜現場で使える実践テクニック

こんにちは！

今日は「行間と字間のバランスで可読性が劇的に変わる」について解説します。

行間と字間、よくある勘違い

僕も昔、行間と字間の違いをちゃんと理解してませんでした。
「間隔を広げりゃええんやろ」くらいの感覚で、闇雲にline-heightとletter-spacingの値を大きくしてた時代があるんです。
でもね、その結果、文章がめっちゃ読みづらくなったんですよ。

現場でよく見るのは、デザイナーが行間を指定したのに、フロントエンジニアが「これくらいでいいや」と勝手に調整しちゃうパターンです。
ほんま、ちょっとした数値の違いで、読みやすさはガラッと変わるんです。

そこで大事なのが「行間」と「字間」を分けて考えることなんですよ。
行間は「行と行の間隔」で、字間は「文字と文字の間隔」です。
この2つは役割が全然違うし、調整の考え方も違います。

行間（line-height）の実践的な設定方法

では、まず行間から説明させてもらいます。
行間はline-heightというCSSプロパティで設定します。

よくある初心者の勘違いは「行間 = line-heightの値 – フォントサイズ」だと思ってることです。
実際にはline-heightは「行の高さ全体」を指定する値なんですよ。
例えば、フォントサイズが16pxでline-height: 1.6と設定したら、行の高さは25.6pxになります。
つまり、実際の行間（隙間）は25.6px - 16px = 9.6pxってわけです。

じゃあ、実際にはどれくらいの値を設定するといいのか。
僕が現場で使ってるのは、以下のルールです。

• 本文のテキスト（16px前後）: line-height: 1.6～1.8
• 小さめのテキスト（13px～14px）: line-height: 1.8～2
• 大きめの見出し（24px以上）: line-height: 1.2～1.4

なぜこんな感じかというと、フォントサイズが小さいほど行間を広めに取らないと、文字が窮屈に見えちゃうんです。
逆に大きなフォントだと、行間を広くしすぎるとバラバラした印象になります。

字間（letter-spacing）の使い方と罠

次に字間です。
これはletter-spacingというプロパティで、「文字と文字の間隔」を調整します。

ほんまに気をつけてほしいのが、字間を広げすぎることです。
例えば、デザインで「高級感を出すために字間広めにしましょう」って指定されることがあるんです。
でも、むやみにletter-spacing: 0.1emみたいな値を入れちゃうと、文字がバラバラになって、逆に読みにくくなるんですよ。

僕の経験では、以下のような使い分けが良いです。

• 本文テキスト: letter-spacing: 0または0.02em（ほぼ触らない）
• 見出し（特に日本語）: 0.05em～0.1em程度で慎重に
• 英数字のみのテキスト: 0.05em～0.15emでもOK

大事なのは「読みやすさを損なわないこと」です。
見た目がちょっと良くなっても、読みづらくなったら元も子もないやん。

行間と字間のバランス調整テクニック

ここからが、ほんまに実践的な話です。
行間と字間は独立して存在してるんじゃなくて、二つ一緒に調整することで初めて「読みやすさ」が完成するんです。

例えば、長い文章を読ませるページを想像してください。
行間が狭いと、目が次の行に移りやすくなるので、字間も狭めにするといいんです。
反対に行間を広めに取ってたら、字間も少し広めにすると、全体がバランスよく見えます。

僕がよく使うテクニックは「行間と字間の比率」を意識することです。
フォントサイズが16pxでline-height: 1.8と設定したら、字間は0.02emくらい。
フォントサイズが20pxでline-height: 1.4だったら、字間は0でいいみたいな感じで調整します。

そしてもう一つのテクニックは「実装後に実際に読んでみること」です。
ブラウザで開いて、自分の目で確認する。
このシンプルなステップが、めっちゃ大事なんですよ。

まとめ

行間と字間は、一見すると小さな調整に見えますが、実は可読性に大きく影響する要素です。
フォントサイズに応じて、行間は1.6～2の範囲で調整し、字間は基本的には触らない（または0.02em程度）というのが、僕の現場での経験則です。

大事なのは「ルールを覚えることじゃなくて、なぜそうするのかを理解する」ことなんですよ。
そうすれば、どんなフォントサイズやデザインでも、自分で最適な値を見つけられるようになります。