TYPOGRAPHY RULES

タイポグラフィ7つのルール その❸ 息苦しいデザインの回避法は「あける」こと

タイポグラフィ7つのルール その❸ あける 息苦しいデザインの回避法は「あける」こと

タイポグラフィ7つのルール ❸ あける
▼第2回(通算第10回)

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

第2回:通算第10回
もくじ
3.2 「行間」と[行送り]と「行長」のお話し
  3.2.1 ●状況によって「適切な行間」は変化する
  3.2.2 ●「行長」は、物理的な長さではなく字詰めの数
  3.2.3 ●「行間」と[行送り]は違う
3.3 ブロック(要素)同士の間隔

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に1段で入れるのは、公的機関の文書でもない限り「NG」です。
ちなみに190mmの中に、文書に使う一般的な文字サイズである14Q(3.5mm角)で組むと、54文字にもなります。

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

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

(figure3-5)
「行間」と「行長」はデザインの良し悪しに重大な影響を与える

3.2.3 ●「行間」と[行送り]は違う

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

では、[行送り]とは何でしょうか。

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

4(mm)÷2(50%)=2(行間の計算)
4(mm:文字サイズ)+2(mm:行間)=6(mm:行送り)

となります。

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

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

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

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

(figure3-6-1)
「行間」と「行送り」は違う

(figure3-6-1)のキャプション

[日本語基準の行送り]は、ボディ(仮想ボディ)の一番上の位置から、次の行の同じ位置まで。[欧文基準の行送り]は、欧文ベースラインの位置から、次の行の同じ位置までをいう。

すべてが同じサイズの普通の文章では、どこを基準にしようが数値はどちらも変わらないし結果も変わらない。「じゃ、なぜふたつあるのか」という疑問も湧くが、文章中に違うサイズが混じると、とたんにふたつの結果が変わる。
[行送り]の奥が深い不思議なところである。

(figure3-6-2)
[日本語基準の行送り]と[欧文基準の行送り]の見えかたの違い

(figure3-6-2)のキャプション

上段の[日本語基準の行送り]は、「新聞書体」を大きくしたことで、2行目は大きい文字の上辺が基準になる。それにより、最初に設定した行送りが変わって見えてしまう。(行送りの数値が増えたわけではない)

下段の[欧文基準の行送り]では、「新聞書体」を大きくしても、「欧文ベースライン」が基準になっているので、行間の見えかたは、変化しない。

どちらを選択するかは、その場の状況や、シチュエーションによって判断すればいいと思う。

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

3.3 ブロック(要素)同士の間隔

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

(figure3-7)
ブロック(要素)同士の間隔は適切に空けるデザイン感覚が求められる

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

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

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

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

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

● ● ●

次回(第3回:通算第11回)は、「トンボ」と「空間(ホワイトスペース)」のお話しです。予告下ページャ[3]のをクリックを。

第3回:通算第11回
予告
3.4 トンボ([トリムマーク])の役割と3mmの限界値
3.5 ただの余白ではない「ホワイトスペース」
ページ:
1

2

3

関連記事

  1. タイポグラフィ7つのルール その❻-5 和文組版美しさの原点・縦組みで起きるさまざまなこと
  2. タイポグラフィ7つのルール その❷ 和文の美しさのカギは「つめる」こと

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❷ 和文の美しさのカギは「つめる」こと

    ▼第1回(通算第5回)この章では、主に和文の詰め処理につい…

  3. デザインが100%うまくなるタイポグラフィ7つのルール:はじめに

    TYPOGRAPHY RULES

    デザインが100%うまくなるタイポグラフィ7つのルール Prologue

    はじめにタイポグラフィ文字表現のデザイン処理のことをいいま…

  4. タイポグラフィ7つのルール その❻-3 文字組みを見やすくする[行頭・行末・分離禁則]、しかし…
  5. タイポグラフィ7つのルール その❹ たす 強調・複合などを盛り込む「たす」要素

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❹ 強調・複合などを盛り込む「たす」要素

    ▼第1回(通算第12回)前章 “タイポグラフィ7つのルール…

  6. タイポグラフィ7つのルール その❼ 「ひらく」ことは読者の目と心への思いやり

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❼ 「ひらく」ことは読者の目と心への思いやり

    ▼1回完結(通算第24回)前回までは、タイポグラフィに関す…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


NEWS

2018.09.18新フォントを制作中です

最終チェックの段階に入りました。10月中旬のリリース予定です。以前から要望の多かった「和音」の従属欧文を、欧文フォントとして独立させたものです。紹介ページでご案内しています。

2018.7.29サイトを引っ越ししました

ドメインも新規になっています
moji-blog.typoren.com は moji-blog.renfont.com に引っ越ししました。moji-blog.typoren.com にお越しの方は自動的に moji-blog.renfont.com の同じ記事にご案内しております。

おすすめ記事

  1. 書体の表情 12:作者の文字への情熱がほとばしる=小塚明朝
  2. 書体の表情 11:好き嫌いがはっきり分かれる=小塚ゴシック
  3. 現代的と伝統的の不思議なコラボ=ヒラギノ明朝
  4. 書体の表情 9:macOSやiOSに標準搭載されている=ヒラギノ角ゴ
  5. 書体の表情 8:藤沢周平の小説を組むために作られたという=游明朝体

最近の記事

  1. 書体の表情 12 作者の文字への情熱がほとばしる=小塚明朝
  2. 書体の表情 11 好き嫌いがはっきり分かれる=小塚ゴシック
  3. 書体の表情 10 現代的と伝統的の不思議なコラボ=ヒラギノ明…
  4. 書体の表情 9 macOSやiOSに標準搭載されている=ヒラ…
  5. 書体の表情 8 藤沢周平の小説を組むために作られたという=游…

アーカイブ

  1. 書体の表情 6:ワンポイントに独特の雰囲気を醸し出す=A1明朝

    TYPOGRAPHY SERIES 2

    書体の表情 6 ワンポイントに独特の雰囲気を醸し出す=A1明朝
  2. 書体の選びかたでデザインが劇的に変わる。書体の性格を知ろう。書体選定に役立つ、書体の表情を知るための12+1のチェックポイント

    TYPOGRAPHY SERIES 2

    書体選定に役立つ、書体の表情を知るための12+1のチェックポイント
  3. タイポグラフィ7つのルール その❻-3 文字組みを見やすくする[行頭・行末・分離禁則]、しかし…

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❻-3 文字組みを見やすくする[行頭・行末・分離…
  4. タイポグラフィ7つのルール その❻ 細心の注意を払うべき大切な「くむ」こと

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❻-1 細心の注意を払うべき大切な「くむ」こと
  5. タイポグラフィ7つのルール その❸ あける 息苦しいデザインの回避法は「あける」こと

    TYPOGRAPHY RULES

    タイポグラフィ7つのルール その❸ 息苦しいデザインの回避法は「あける」こと
PAGE TOP
%d人のブロガーが「いいね」をつけました。