読了目安時間は約 5 分です。
行間（行高）や字間（文字間隔）は、文章の読みやすさに大きく影響します。
読みづらい文章だと、続けて読みたいと思わないですよね。
離脱率やセッション継続時間の低下に繋がりかねません。
きれいなサイトは、文章スペースもスッキリしていて読みやすいと感じませんか？
そういうサイトは、たいてい行間や字間も細やかな配慮がなされています。
行間や字間の調整はDTPにおける基本テクニックのひとつです。
Webデザインではおろそかにしがちですが、もちろん調整可能です。
今回は、CSSで行間と字間を調整する方法と、カーニングについてもご紹介します。おすすめの数値もご紹介します！
行間（行高）を指定するCSS【line-height】
line-heightは、文章の行間の広さを設定できます。
記述は以下のとおり。
line-height: 値;
値は、フォントと上下の行間含めた数値を以下のように指定します。
初期値（normal）
何も指定しなければ、ブラウザが自動的に行間を決めます。
単位で指定（例：20px・2em）
フォントサイズが16pxで行間を8pxにしたい場合は、16＋上の行間8＋下の行間8＝line-height:32pxとします。
%で指定（例：50%）
フォントサイズを100%として数値を指定します。
フォントサイズが16pxで行間を8pxにしたい場合は、100%＋上の行間(50%)＋下の行間(50%)＝line-height:200%とします。
数値のみで指定（例：1.5）
フォントサイズを1として数値を指定します。
フォントサイズが16pxで行間を8pxにしたい場合は、1＋上の行間(0.5)＋下の行間(0.5)＝line-height:2とします。
この場合、一行目の下の行間(0.5)＋一行目の下の行間(0.5)で、実質1行分の間隔になります。フォントサイズ×数値＝行間と捉えるとわかりやすいと思います。
よく使われるのは「数値のみで指定する方法」です。どのようなフォントサイズでも一定の比率で相対的に設定できるのでオススメです。
おすすめの数値は？
キレイで読みやすいサイトは大抵、line-heightを「1.5〜2.0」くらいで指定しています。
これより小さいと詰んでしまい、大きいとスカスカになって読みにくくなります。
個人的には「1.8」を多用しています。
字間（文字間関）を調整するCSS【letter-spacing】
letter-spacingは、文字の間の広さを設定できます。
記述は以下のとおり。
letter-spacing: 値;
値は、文字と文字の間の数値を以下のように指定します。
初期値（normal）
何も指定しなければ、ブラウザが自動的に行間を決めますが、実質「0」です
pxで指定（例：1px）
letter-spacing:1pxなら、文字と文字の間が1px広がります。
emで指定（例：0.1em）
フォントサイズを1emとして数値を指定します。letter-spacing:0.1emなら、文字と文字の間が0.1文字分広がります。
よく使われるのは「em」で指定する方法です。どのようなフォントサイズでも一定の比率で相対的に設定できるのでオススメです。
おすすめの数値は？
letter-spacingは0でも問題ありませんが「0.05〜0.1」くらいで程よく読みやすくなりオススメです。
「0.1em」より大きいと、スカスカになって読みにくくなります。
個人的には「0.05」を多用しています。
文字詰め（カーニング）するCSS【font-feature-settings】
DTPでは自動で文字詰め（自動カーニング）することが多いですが、Webデザインでもできます。
font-feature-settings: “palt”
とすることで「プロポーショナルメトリクス」が有効になります。OpenTypeフォントでなければ機能しないので「メイリオ」では使えませんが「游ゴシック」ならOKです。
まとめ
可読性の向上は「読者の方が読みやすくなる」「デザイン性が高まる」両方の意味で重要です。アクセスの多いサイトは、そういった細かい調整がなされていることが多いです。ぜひ取り組んでみてください。
