日本語タイポグラフィの調整: 行間・字間・両端揃え
英語と違って、日本語の本文は字間や行間をちょっといじるだけで読みやすさがけっこう変わるみたいです。CSSの初期値のまま放っておくと、文字がぎゅっと詰まって読み疲れる感じになってしまいました。個人サイトの本文まわりを見直したときに、効いた調整と効かなかった調整をメモしておきます。先に結論めいたものを書いておくと、行間を1.75くらいに、字間を0.02emくらいに、両端揃えはやめて左揃えで、行末で変な切れ方をしないようにする設定を組み合わせる、というあたりに落ち着きました。正直まだ正解は分かっていなくて、見た目の好みで決めている部分も多いです。
行間は1.7〜1.8くらいが読みやすい気がする
ブラウザがもともと持っている行間は、フォントや環境に任される部分が大きいようです。自分のサイトでは、そのままだと少し詰まって見えました。日本語は縦に詰まった文字が多いせいか、同じ値だと行どうしがくっついて見えてしまいました。本文では1.7くらい、長めの記事では1.8くらいまで広げると、読み始めから疲れにくい感じになります。
調整するときは、場所ごとに値を変えています。本文は1.75くらい、見出しは1.4くらい、コードを載せる箇所は1.5くらい。見出しは行間を狭めにしたほうが、ひとかたまりに見えてしっくりきました。
こういう数値は一箇所にまとめて変えられるようにしておくと、後でサイト全体をいっぺんに直せて楽でした。「本文の行間は1.75」みたいに名前をつけて持っておいて、端末ごとに少しずらす、というやり方が私には便利でした。
字間は控えめにしておく
日本語の本文は、字間を強くかけすぎると間延びして見えやすいです。本文では0.02〜0.04emくらいの控えめな値が読みやすい気がしました。0.1emくらい開けるとデザインっぽいアクセントにはなるんですが、本文に使うと逆に読みづらくなって困りました。
ただ、見出しではあえて広めにすることもあります。「特集」「お知らせ」みたいな短い見出しは、字間を0.1emくらいまで広げると装飾としてしっくり収まることがありました。本文と見出しで字間を変える、というだけの運用です。
英数字や句読点が混ざる文章では、約物や英数字まわりの間隔を整える新しめの設定もあるようです。ただ、ブラウザやフォントによって見え方が変わるので、本文全体に強くかけるより、実際の表示を見ながら慎重に試しています。
両端揃えは無理に使わない
英語の組版だと両端揃えにすると整って見えるんですが、日本語で同じことをすると字間が不自然に広がってしまう現象が出やすいです。とくに句読点や半角の英数字が混ざる行で、すき間が極端になって困りました。
最近のブラウザは両端揃えのときにもう少し賢く処理してくれるらしいのですが、ページによって見栄えがバラつくのが気になって、結局はふつうの左揃えに戻しました。日本語は左揃えのほうが崩れにくい、というのが今のところの体感です。
どうしても行末の見え方を整えたいときは、折り返し位置を調整してくれる新しめの設定を試すこともあります。対応しているブラウザや効き方には差がありますが、効く環境では見出しや短い文章の印象が変わりました。
行末で数文字だけ取り残されないようにする
日本語でよくある悩みとして、行末の言葉が「短い文字数だけ次の行にこぼれる」現象があります。「記録してい／ます」みたいに語尾の数文字だけが取り残されると、読みづらく見えてしまいます。
最近のブラウザには、文節っぽいまとまりを見ながら折り返し位置を調整してくれる設定もあるようです。対応している環境では、数文字だけの取り残しが起きにくくなることがあります。さきほどの折り返し位置を整える設定と組み合わせて、効く環境では自然に見えるようにしています。
ただし全部のブラウザが対応しているわけではないので、効かない環境ではふつうの折り返しに戻るだけ、という形にしてあります。対応している環境では効く、対応していない環境でも大きく崩れない、というゆるい入れ方にしておくと、今後対応ブラウザが増えたときにも自然に効いてくれるかもしれない、と考えています。
禁則処理はCSSだけだと難しかった
日本語の組版には「句読点や閉じカッコは行頭に来ない」「開きカッコは行末に来ない」みたいな、いわゆる禁則処理のルールがあります。これも行末の切れ方を整える設定である程度は近づけられるんですが、印刷物の組版ほどきれいにはいきませんでした。
あまり攻めすぎると別のところで崩れが出てしまったので、本文では許容範囲くらいの軽めの調整に留めています。完璧を目指すより「気にならないレベルならいいや」という割り切りです。正直このあたりはまだよく分かっていません。
英数字が混ざる場合は、長い英単語や URL がはみ出しにくくなる設定も一緒に入れておくと、横スクロールが出てしまう事故を減らせました。行末の切れ方の設定とはみ出し防止の設定は意味が違うらしいので、両方入れておくのが安全でした。
文字サイズと余白もセットで考える
文字まわりの調整は、文字サイズや余白とセットで考えたほうがバランスを取りやすい気がします。本文の文字サイズは16〜17pxくらいが、スマホで読みやすいと感じました。14px以下だとスマホでは小さすぎて読みづらく、18px以上だとPCで「教科書っぽさ」が出る印象です。
段落の上下のすき間は、行間と連動させると統一感が出ました。行間が1.75くらいの本文なら、段落どうしのすき間は1行ぶんくらい空けるとちょうど良いことが多いです。もっと広めに空ける派もあるみたいですが、長文だと空きすぎて間が抜けて見えてしまいました。
最後に、見出し直下の段落だけはすき間を詰めるようにしています。見出しと本文がぴたっとくっつくと、見出しと内容がひとセットに見えて、目線の移動が短くなる気がしました。見出しの真下の段落だけ上のすき間を少し縮める、という小さな調整です。
効果は地味だけど、長く効いている気がする
文字まわりの調整は、ぱっと見で「変わった」と分かるような派手さはありません。ただ、本文を最後まで読みやすくすることには、地味に効いている気がしています。Search Console や Analytics の数字だけだと判断しづらい、読み心地に関わる部分なので、自分でサイトを長文で読み通したときの体感を頼りにちまちま直しています。
自分の体感と訪問者の体感が一致しているとは限らないので、たまに別の端末・別のブラウザ・別のフォント設定でも見直すようにしています。文字まわりは読みやすさの土台っぽい部分なので、根っこのほうを整えておくと、後で記事が増えても読みやすさが保てるんじゃないかな、と思っています。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ