▼第2回（通算第10回）

前回は、文字間についてお話ししました。和文を組むことの難しさは、ここから既に始まっています。かなり「長い旅」になりますが、ついてきてくださいね。
今回は、デザインの「心地よさ」と「息苦しさ」をわける、極めて重要な要素、「行間」「行長」「ブロック（要素）同士の間隔」についてお話しを進めていきます。

3.2 「行間」と［行送り］と「行長」のお話し

印刷物やウェブページを見ていると、行間が文字間とほとんど変わらないもの、行長（行の長さ）がやたらと長いものが目立ちます。
これは、いずれも見る人の目を疲れさせるばかりか、読む行為そのものをやめさせる結果になりかねません。行間は「適切」に空け、行長は「適切」な長さにすることが大切です。

3.2.1 ●状況によって「適切な行間」は変化する

一般的に、行間は文字サイズの 50％（半角分）から75％（3/4角分）くらいが目安とされています（欧文は20％程度）。狭めの行間は、締まった感じを与え、広めの行間はゆったりとした感じを与えます。また、文章の長さによっても変動します。小説のような長い文章は100％（全角分）くらい、パンフレット用の文章のように比較的短いものは50％くらいが適切といえます。

また、使用するフォントの種類によっても変わってきます。ゴシック系など太い文字の場合は広めに、細い明朝系のときは狭めにします。

そして、どんな条件下でも、50％を切って40％以下の行間は、完全に「NG」です。

ウェブページでは、広めの100％から120％くらいが良いようです。スマホサイトは120％から130％くらいがベストでしょう。100％を下回ると、明らかに読みにくくなります。

3.2.2 ●「行長」は、物理的な長さではなく字詰めの数

行長は、長さというより字詰めの数。長さは文字サイズによって変動があるので、論じることはできません。字詰めは長くて40字詰が見やすさの限界でしょう。それ以上長くなると、とたんに読みにくくなります。

たとえば、A4縦置きの用紙に上下左右それぞれ、10mmずつ小さい版面（はんづら：実際に印刷される部分のこと）に文章を配置する場合、左右いっぱいの190mmに１段で入れるのは、公的機関の文書でもない限り「NG」です。
ちなみに190mmの中に、文書に使う一般的な文字サイズである14Q（3.5mm角）で組むと、54文字にもなります。

このブログは49字詰（PCでの表示）ですので、読みやすいとはいえません。紙媒体でしたら迷わず左右２段組にするところですが、ウェブの場合は画面の縦のスペースの制約があるので思い切ってはできません。かえって読みにくくなります。
読者の「ウェブはこんなものだ」という先入観に、ほとんどのウェブページは助けられています。

でも、CSS3になって、「columnsプロパティ」を使えば、簡単に段組みがつくれるようになりました。ウェブの進歩は計り知れません。縦のスペースを意識した設計をきちんとやれば、読みやすい行長で組むことができます。ただし、ひとつの画面に留まり、凝視する時間が長くなる分、目は疲れやすくなることが容易に予想されます。ウェブと紙媒体では、明らかに見えかたが違うのです。

（figure3-5）

3.2.3 ●「行間」と［行送り］は違う

「行間」と［行送り］について少し触れておきます。「行間」は文字通り、「行と行の間」の空間のことです。Illustrator では「行間」の指示はできません。できるのは［行送りの設定］のみです。しかも、［行送り］は、［フォントサイズを設定］と単位が連動しているので、「％」指示はできません。

では、［行送り］とは何でしょうか。

［行送り］は、「行と行の間（行間）＋文字サイズ」ということになります。たとえば、4mm角の文章を50％（半角分）の行間に設定する場合、Illustrator に入力する数値の計算式は次の通りです。

となります。

なお、Illustrator では、［行送り］は２種類設定できますが、普通の文章組みではデフォルトの［日本語基準の行送り］で問題はありません。

もうひとつの［欧文基準の行送り］は、行の中に、異なる文字サイズがたくさん混在する複雑な組版（InDesign で組む高度な組版：どちらかというとエディトリアルの領域）に効果を発揮します。しかし、複雑な組版をあまり必要としないグラフィックでは、ほとんど使わないといって良いでしょう。実際、普通の文章で［欧文基準の行送り］に切り換えても何の変化も起きません。

また、縦組みでは、文字の中心から中心までが［行送り］となり、この２種類の区別はなくなります。（いずれもグレー表示になって選択できなくなります）

蛇足ですが、ウェブの「line-height」は「行送り」ではなく「行の高さ」設定です。ですので、たとえば、16pxの50％（半角分）空き設定は「line-height:1.5」（文字の高さ：1＋行の空き：0.5）になります。

（figure3-6-1）

（figure3-6-2）

「行間」や「行長」は、可読性というデザイン上の大きな命題を背負っています。特に、用途によって「行間」の「最適度」は変化するので、そのつど「適切」な間隔（感覚）を求められる、大変重要なデザイン要素です。

3.3 ブロック（要素）同士の間隔

見出しや本文、写真のキャプション、パスの中の文章類（コラムなど）のそれぞれのブロック（要素）同士の間隔は、「適切」にあけることが重要です。文章で表現するのは少し無理があるので、失敗例とその修正後を大きめの図（figure3-7）で展開しました。「息苦しい」デザインをを解消するヒントになるはずです。

（figure3-7）

要素同士の空間を「適切」に空けることはレイアウト上、極めて大事なデザイン処理になります。この空間は「遊び」とも呼べるもの。「遊び」がなく窮屈なデザインは、要素同士を殺しあってしまい、印象を、ただうるさいだけのものにしてしまいます。

右図は、左図の例を修正したものです。全体のスペースが同じ（変えられない）場合は、要素同士のスペースを空ける関係上、一つひとつの要素は小さくなります。しかし、比べてみれば一目瞭然。右の修正を加えたほうが、はるかに見やすいと思いませんか？
❼の「改行を入れる」は、自分で書いたコピーでない限り、執筆者の許可が要ります。念のため。

後述する “タイポグラフィ7つのルール その❺ 「ひく」ことは、すべてがマイナスではない” でも述べることになりますが、要素は、大きいから目立つとは限らず、小さいから目立たないとは限らないのです。

［適切」な空間は、視覚的に安らぎと安心感を与える重要な要素となります。

なお、この図は複数箇所で登場します。

● ● ●

次回（第３回：通算第11回）は、「トンボ」と「空間（ホワイトスペース）」のお話しです。予告下ページャ［３］のをクリックを。