このページの中身

字間と行間

文字は触らず、あいだを触ります。読みやすさの大半は、字と字、行と行の距離で決まります。

カーニング・トラッキング・行送り・行長の4つを、それぞれ悪い例と良い例で示した図
図を大きく見る
図の中身を文字で読む
  • カーニング　特定の組み合わせだけを個別に詰める　トラッキング　文字列全体を一律に動かす
  • ✕ 無効　○ 有効　✕ 大見出しで既定のまま
  • AV To　AV To　間延びして見える
  • ○ -0.02em
  • AやVの斜め線、Toの曲線が作る隙間が加算され、そこだけ空いて見える
  • 行送り　行と行の距離。和文は 1.7〜2.0、欧文は 1.5〜1.7
  • ✕ 1.3（次の行の頭を見失う）　○ 1.8
  • 行長　1行が長いほど、行末から次の行の頭へ戻るのに失敗しやすい
  • ✕ 長すぎる　○ 和文30〜45字が目安
  • 行長は文章側でなく
  • レイアウト側で決める

ひと目で#

カーニング
AV や To のような特定の組み合わせだけを詰める。自動で効く
トラッキング
文字列全体の字間を一律に動かす（letter-spacing）
行送り
行と行の距離（line-height）。和文は 1.7〜1.9、欧文は 1.5〜1.7
行長
1行の文字数。和文は全角35〜45字が目安
光学的整列
座標は揃っているのに、揃って見えないときの補正

行送りと行長は連動します。行が長いほど広い行送りが要るので、45字に近いところまで伸ばすなら、2.0まで広げてかまいません。

使い分け#

こう感じたら直すところ
AV や To の間だけ空いて見えるカーニング（font-kerning: normal）
大見出しが間延びして見えるトラッキングを負に。-0.02em 前後
小さな大文字のラベルが読みにくいトラッキングを正に。0.05〜0.12em
同じ行を二度読む。行を飛ばす行送りが狭い。または行長が長い
段落のかたまりが読み取れない行送りが広すぎる
引用符で始まる行だけ内側に入って見える光学的整列。記号を版面の外へ出す

二度読みと行飛ばしの多くは、行送り単独ではなく、行長との組み合わせで起きます。

行長を伸ばしたまま行送りを据え置くと行の戻り先を取り違えることと、行長に応じて行送りを広げる対応を示した図
図を大きく見る
図の中身を文字で読む
  • ✕ 行長を伸ばしたのに、行送りはそのまま　○ 行長に合わせて行送りを広げる
  • 戻る距離が長いのに隣の行が近く、戻り先を取り違える　行のあいだの空間が、戻り先の目印になる
  • 2行目のつもりで3行目に入る（二度読み・行飛ばし）　次の行の頭へまっすぐ戻れる
  • 行送りと行長は連動する
  • 和文の本文は行送り 1.7〜1.9、行長は全角35〜45字が目安。
  • 行長を45字に近いところまで伸ばすなら、行送りは 2.0 まで広げてよい。
  • 行長は文章側ではなくレイアウト側で決める。行送りだけ先に固定しない。

間違えやすいところ#

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

税理士事務所のコラムが「読みにくい」と言われた現場です。担当者は文字を大きくしようとしましたが、測ると原因は別でした。行送り1.5のまま、1行が全角50字を超えています。行末から次の行頭へ目を戻す距離が長いのに隣の行が近すぎて、戻り先を取り違えます。

級数はそのまま、行送りを1.8へ、行長は版面側で40字前後に抑えます。同じ原稿でも、二度読みと行飛ばしはこの2つでほぼ消えます。

確認する#

使えるパターン#

このページで扱う語#

このページで扱う語を並べる本文では太字3 語

語の名前から引くなら用語索引へ。

均等割り付け
行の左右両端を揃えるため、字間や語間を調整する組版処理。両端揃えとも呼ぶ。
ラグ
左揃えの文章で、右端に生じる不揃いな輪郭。その形の良し悪しを指す語。
孤立行
段落の最初の1行だけが前のページや段の末尾に取り残された状態（オーファン）と、最後の1行だけが次に送られた状態（ウィドウ）。

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

文字が読みにくい、詰まって見える

行間を1.7〜1.9にする。字間は本文では触らない。詰めるのは見出しだけ。

このコードで動いている見本です

行間をいくつにすればいいか

和文本文は1.7〜1.9、見出しは1.3〜1.5。行が長いほど広げる。

このコードで動いている見本です

この場面のほかの困り事と、そのまま貼れる部品は文字を読ませるにまとめてある。逆引きには全188件。

行間と字間を試す#

この値は作業台で決められます。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: 字と余白と幅

実物の段落と小見出しで、行送りと字間を動かします。系統を切り替えると本文と見出しを別々に調整でき、決めた値が body と h2 の CSS になります。

行間は、文字の外で決まる

読みやすさの調整は、文字そのものではなく、字と字、行と行のあいだで行います。行送りを動かすと、目が次の行の頭を探す時間が変わります。狭ければ隣の行が視界に割り込み、広すぎれば段落がひとつのかたまりに見えなくなります。

見出しは行送りを詰め、本文はゆったり組む。この差が、ページの階層になります。

body { line-height: 1.8; }   /* 単位なし */
h2   { line-height: 1.35; letter-spacing: -0.02em; }

この道具は JavaScript で動きます。無効の場合は、上の表と既定値のコードを使ってください。

出典#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。