日本語タイポグラフィの調整: いま実際に指定している数値を数えた
📌 記事の取り扱いについて（公開当時の内容を含みます — タップで詳細）
本記事は公開当時の体験・気づきをまとめたものです。現在のツール数・プラン数・対象年齢・記事数・仕様とは異なる場合があります。最新の内容は各ツールページをご確認ください。ツールや外部サービスの仕様・料金は変更されることがあるため、利用前には各公式情報も併せてご確認ください。記載に誤りを見つけられた場合はお問い合わせフォームよりご連絡いただけると助かります。
英語と違って、日本語の本文は行間をちょっといじるだけで読みやすさがけっこう変わるみたいです。CSSの初期値のまま放っておくと、文字がぎゅっと詰まって読み疲れる感じになってしまいました。
この記事では、私のサイトがいま実際に指定している数値を、CSSから拾ってそのまま並べます。理屈で選んだというより、見た目の好みで決めてそのままになっている値も多いのですが、「実物の数字」として残しておきます。
行間: 全体1.7、記事の本文は1.8、見出しは1.3
サイト全体の基本は行間1.7にしています。制作記の記事本文は、長文を読むページなので少し広めの1.8です。日本語は縦に詰まった文字が多いせいか、初期値のままだと行どうしがくっついて見えたので、このくらい空けると読み始めから疲れにくい感じになります。
見出しは反対に1.3まで狭めています。見出しは行間を詰めたほうが、ひとかたまりに見えてしっくりきました。
コードを載せる箇所には、専用の行間は入れていません。ここは本文と同じ流れのままです。
ちなみに、こういう数値に名前をつけて一箇所で管理する書き方もあるそうなのですが、私のCSSでは行間はそれぞれの場所に直接書いてあります。数が少ないうちはこれで困っていません。増えてきたら考えます。
字間: 本文はいじらず、見出しだけ少し詰める
意外かもしれませんが、本文の字間は何も指定していません。ブラウザ任せです。字間を広げるとデザインっぽくなる、という話も見かけるのですが、本文に効かせると間延びしそうで、結局さわらないままです。
指定があるのは章の見出しだけで、それも広げるのではなく -0.01em、ほんの少し詰めています。日本語の見出しは、わずかに詰めると引き締まって見える気がして、この値にしています。
英数字や句読点まわりの間隔を細かく整える設定もあるそうですが、いまのサイトには入れていません。このあたりはブラウザの標準に任せています。
両端揃えは使っていない
英語の組版だと両端揃えにすると整って見えるそうですが、日本語で同じことをすると、句読点や半角の英数字が混ざる行で字間が不自然に広がってしまう現象が出やすいと聞きます。
私のサイトは最初からずっと左揃えです。両端揃えは試さないまま今に至っているのですが、日本語は左揃えのほうが崩れにくい、という話には納得しているので、当面このままだと思います。
行末の取り残し対策は、一覧ページの紹介文だけ
日本語でよくある悩みとして、行末の言葉が「短い文字数だけ次の行にこぼれる」現象があります。「記録してい／ます」みたいに語尾の数文字だけが取り残されると、読みづらく見えてしまいます。
最近のブラウザには、行全体の折り返しを整える text-wrap: pretty と、文節っぽいまとまりの途中で切れにくくする word-break: auto-phrase という設定があります。私のサイトでは、この二つを制作記と旅プランの一覧ページにある短い紹介文にだけ入れています。短い文章だと、折り返し位置の良し悪しがそのまま見た目に出るからです。
記事の本文には入れていません。長文だと効果が分かりにくいのと、対応していないブラウザでは普通の折り返しに戻るだけなので急ぐ理由もなく、範囲を絞ったままにしています。
禁則処理はブラウザ任せ
日本語の組版には「句読点や閉じカッコは行頭に来ない」といった禁則処理のルールがあります。これについては、自分では何も指定していません。ブラウザが標準でやってくれる範囲で、いまのところ気になる崩れに出会っていない、というのが正直なところです。印刷物の組版ほどの厳密さを求めだすと難しい領域のようなので、気になったときに調べる、という距離感でいます。
文字サイズと余白
本文の文字サイズは16pxです。スマホで読みやすいと感じるのがこのあたりで、14px以下だと小さすぎ、18px以上だとPCで「教科書っぽさ」が出る印象です。
段落どうしのすき間は、下方向に14px空けています。行の高さ（16px × 1.8 ≒ 29px）のだいたい半分です。1行ぶんまるまる空ける書き方もあるそうですが、私のサイトは半行くらいの詰まり気味で、長文でも間が抜けて見えないほうを取っています。
見出しまわりは、章見出しの上に34px・下に12px、小見出しの上に24px・下に8pxです。上を広く、下を狭くして、見出しが次の本文とひとセットに見えるようにしています。目線の移動が短くなる気がします。
効果は地味だけど、長く効いている気がする
文字まわりの調整は、ぱっと見で「変わった」と分かるような派手さはありません。ただ、本文を最後まで読みやすくすることには、地味に効いている気がしています。Search Console や Analytics の数字だけだと判断しづらい、読み心地に関わる部分なので、自分でサイトを長文で読み通したときの体感を頼りにちまちま直しています。
こうして数えてみると、私のサイトの文字まわりは「行間だけしっかり、あとはブラウザ任せ」という、思っていたよりずっと素朴な構成でした。凝った設定を足す前に、まず自分がいま何を指定しているか数えてみるのは、おすすめです。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ